/* Collection cards: categories and tags as picture cards; the first six in an
   image accordion (.acc), the rest in a three-column grid (.type-card).
   Behaviour in assets/js/accordion.js.
*/

.exp-types{
  padding:clamp(56px, 5.6vw, 96px) var(--gutter) clamp(88px, 8vw, 140px);
}
.exp-types__head{ margin-bottom:clamp(20px, 2vw, 32px); }
.acc{
  display:flex; gap:clamp(8px, .8vw, 12px);
  height:clamp(420px, 42vw, 640px);
}
.acc__panel{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden;
  background:var(--ink); color:var(--white);
  isolation:isolate;
  transition:flex-grow .8s var(--ease-out);
}
.acc__panel.is-open{ flex-grow:5.2; }
.acc__panel:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }
.acc__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  filter:saturate(.8) brightness(.82);
  transition:filter .8s var(--ease), transform 1.4s var(--ease-out);
}
.acc__panel.is-open .acc__img{ filter:none; }
.acc__panel::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(10,9,7,.78) 0%, rgba(10,9,7,.3) 40%, rgba(10,9,7,0) 64%);
}

/* folded: the place name runs up the strip */
.acc__tab{
  position:absolute; left:50%; bottom:clamp(18px, 1.8vw, 28px);
  writing-mode:vertical-rl; rotate:180deg; translate:-50% 0;
  font:600 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; white-space:nowrap;
  color:rgba(255,255,255,.9);
  transition:opacity .35s var(--ease);
}
.acc__panel.is-open .acc__tab{ opacity:0; }

/* open: the story's words, fading in once the panel has room */
.acc__body{
  position:absolute; left:0; bottom:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  width:min(100%, 620px); padding:clamp(22px, 2.4vw, 40px);
  opacity:0; translate:0 12px; pointer-events:none;
  transition:opacity .3s var(--ease), translate .3s var(--ease);
}
.acc__panel.is-open .acc__body{
  opacity:1; translate:0 0;
  transition:opacity .6s var(--ease) .35s, translate .8s var(--ease-out) .35s;
}
.acc__hed{
  display:block; min-width:18ch;
  font:400 clamp(26px, 2.6vw, 42px)/1.08 var(--serif); letter-spacing:-.01em; text-wrap:balance;
}
.acc__more{
  display:inline-flex; align-items:center; gap:8px; margin-top:6px;
  font:600 10px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  transition:gap .35s var(--ease);
}
.acc__more svg{ width:12px; height:12px; color:var(--gold-lift); }
.acc__panel.is-open:hover .acc__img{ transform:scale(1.03); }
.acc__panel.is-open:hover .acc__more{ gap:14px; }

/* ---- the rest: three-column photo cards, name and Explore on the picture --- */
.exp-types__grid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px, 1.6vw, 24px); margin-top:clamp(48px, 4.8vw, 80px);
}
.type-card{
  position:relative; display:block; aspect-ratio:4 / 3; overflow:hidden;
  background:var(--ink); color:var(--white);
  isolation:isolate;
}
.type-card:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }
.type-card__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform 1.4s var(--ease-out);
}
.type-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(10,9,7,.72) 0%, rgba(10,9,7,.2) 45%, rgba(10,9,7,0) 65%);
}
.type-card__body{
  position:absolute; left:0; bottom:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:clamp(20px, 2vw, 32px);
}
.type-card__hed{ font:400 clamp(24px, 2vw, 32px)/1.08 var(--serif); letter-spacing:-.01em; }
.type-card:hover .type-card__img{ transform:scale(1.05); }
.type-card:hover .acc__more{ gap:14px; }
@media (max-width:1099px){
  .exp-types__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:720px){
  .acc{ flex-direction:column; height:clamp(520px, 140vw, 640px); }
  .acc__tab{
    left:clamp(18px, 5vw, 24px); bottom:50%; translate:0 50%;
    writing-mode:horizontal-tb; rotate:none;
  }
  .acc__hed{ min-width:0; }
  .exp-types__grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .acc__panel, .acc__body, .acc__img, .type-card__img{ transition:none; }
}