/* occasion-scene.css — one level-2 scene (taxonomy-occasion.php).
   Prefix: sp-g2-__. Only this page prints these classes; the shared classes it leans on (.section,
   .wrap, .grid, .card, .btn, .lede, .note, .link-arrow) come from style.css and are not restyled
   here. Every value is a tokens.css custom property: no literal colour, size step or radius. */

/* ---------- head: the path, the scene's own heading, its brief button ---------- */
.sp-g2-hero{padding-block-start:clamp(1.25rem,3vw,2rem)}
.sp-g2-hero__inner{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-items:center;
  margin-block-start:clamp(1rem,2.5vw,1.75rem);
}
.sp-g2-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;max-width:56ch}
.sp-g2-hero__title{
  font-size:var(--step-3);line-height:1.15;letter-spacing:-.02em;margin:0;max-width:24ch;
  text-wrap:balance;
}
.sp-g2-hero__intro{margin:0}
.sp-g2-hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:.25rem 0 0}
.sp-g2-hero__media{
  margin:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--sand);
}
.sp-g2-hero__img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
@media (min-width:900px){
  .sp-g2-hero__inner--media{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}

/* ---------- a section's own heading ---------- */
.sp-g2-head{display:flex;flex-direction:column;gap:.55rem;margin-block-end:clamp(1rem,2vw,1.5rem)}
.sp-g2-title{
  font-size:var(--step-2);line-height:1.2;letter-spacing:-.01em;margin:0;max-width:40ch;
}
.sp-g2-featured__line{margin:0;max-width:64ch}
.sp-g2-featured__note{margin:0}

/* ---------- one grid for every card row ----------
   One column on a phone, two on a tablet, three on a desktop: the same rhythm the catalogue grid
   keeps, written out here so this page does not depend on another page's stylesheet. */
.sp-g2-grid{margin:0;gap:clamp(1rem,2vw,1.35rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){
  .sp-g2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .sp-g2-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* The reading and help blocks hold at most two cards, so two columns is their widest. */
.sp-g2-grid--reading{grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){
  .sp-g2-grid--reading{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- the list: bar, count and order, the chosen conditions, the cards ---------- */
.sp-g2-products{padding-block-start:clamp(1.5rem,3vw,2.5rem)}
.sp-g2-products .sp-g2-head{margin-block-end:.75rem}
.sp-g2-products__bar{margin-block:0 clamp(1rem,2vw,1.5rem)}
.sp-g2-results{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.35rem)}
.sp-g2-results__line{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem 1.25rem;padding-block-end:.75rem;border-block-end:1px solid var(--line);
}
.sp-g2-results__count{margin:0;font-weight:650;letter-spacing:-.01em}
.sp-g2-results__summary{margin:0;font-size:var(--step--1);color:var(--ink-2);line-height:1.5}

/* ---------- reading and help: at most two cards per block ---------- */
.sp-g2-related__inner{display:flex;flex-direction:column;gap:clamp(2rem,4vw,3rem)}
.sp-g2-block{display:flex;flex-direction:column;gap:.9rem}
.sp-g2-card{height:100%}
.sp-g2-card__text{
  margin:0;font-size:var(--step--1);line-height:1.5;color:var(--ink-2);
}
/* The action sits at the foot of the card, so two cards of different text lengths line up. */
.sp-g2-card__link{margin-top:auto;align-self:flex-start;padding-block-start:.6rem}

/* ---------- the occasions next to this one ---------- */
.sp-g2-scenes__list{
  list-style:none;margin:clamp(1rem,2vw,1.5rem) 0 0;padding:0;
  display:grid;gap:clamp(.9rem,2vw,1.25rem);grid-template-columns:minmax(0,1fr);
}
@media (min-width:640px){
  .sp-g2-scenes__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .sp-g2-scenes__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.sp-g2-scene{margin:0}
.sp-g2-scene__link{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  text-decoration:none;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:border-color .15s,box-shadow .15s;
}
.sp-g2-scene__link:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.sp-g2-scene__link:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sp-g2-scene__media{display:block;aspect-ratio:16/10;background:var(--sand)}
.sp-g2-scene__img{display:block;width:100%;height:100%;object-fit:cover}
.sp-g2-scene__name{padding:.75rem 1rem .9rem;font-weight:650;line-height:1.3}
.sp-g2-scene:not(.sp-g2-scene--media) .sp-g2-scene__name{padding-block-start:.9rem}

/* ---------- the bottom brief ---------- */
.sp-g2-cta__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.25rem 2rem;padding:clamp(1.25rem,3vw,2.25rem);
  background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-lg);
}
.sp-g2-cta__copy{display:flex;flex-direction:column;gap:.6rem;max-width:56ch}
.sp-g2-cta__copy .lede{margin:0}
.sp-g2-cta__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:0}

@media (prefers-reduced-motion:reduce){
  .sp-g2-scene__link{transition:none}
  .sp-g2-scene__link:hover{box-shadow:none}
}