/* occasion-group.css — one level-1 scene group (/occasions/{group}/).
   Owned by the level-1 page task. Every class here is prefixed `sp-g1-`, so this file never
   collides with the shared catalogue styles or with the other page tasks. Only tokens.css
   custom properties are used: no new palette, no font link, no inline style. */

/* The page opens with the group's own image beside its H1, and reads as one column when the record
   holds no image. */
.sp-g1-hero__inner{
  display:grid;
  gap:clamp(1.25rem,3vw,2.5rem);
  align-items:center;
}
@media (min-width:60rem){
  .sp-g1-hero__inner--media{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.sp-g1-hero__copy{gap:.9rem}
.sp-g1-hero__intro{max-width:56ch}
.sp-g1-hero__media{
  margin:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--sand);
  border:1px solid var(--line);
}
.sp-g1-hero__media img,
.sp-g1-hero__img{
  display:block;
  width:100%;
  height:auto;
}

/* The level-2 scene navigation: image, English name, nothing else. */
.sp-g1-scenes__grid{align-items:stretch}
.sp-g1-scenes .sp-g1-scene{overflow:hidden}
.sp-g1-scene__media{aspect-ratio:16/10}
.sp-g1-scene__body{justify-content:center}
.sp-g1-scene__title{margin:0}
.sp-g1-scene--text .sp-g1-scene__body{padding-block:1.35rem}

/* The three selection ideas. A card is a link to this same page with the idea's purposes in the
   address; the selected one is outlined and tagged, so the state is visible as well as in the URL. */
.sp-g1-ideas__head{display:flex;flex-direction:column;gap:.4rem}
.sp-g1-ideas__grid{align-items:stretch}
.sp-g1-idea{
  overflow:hidden;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.sp-g1-idea:hover{border-color:var(--line-strong)}
.sp-g1-idea--on{
  border-color:var(--brand);
  box-shadow:var(--shadow-sm);
}
.sp-g1-idea__media{aspect-ratio:16/10}
.sp-g1-idea__title{margin:0}
.sp-g1-idea__text{line-height:1.5}
.sp-g1-idea__dirs{
  margin:0;
  padding-top:.55rem;
  border-top:1px solid var(--line);
}
.sp-g1-idea__foot{
  margin-top:auto;
  padding-top:.85rem;
  gap:.6rem;
  flex-wrap:wrap;
}
.sp-g1-idea__btn{flex:1 1 auto;text-align:center}
.sp-g1-idea--on .sp-g1-idea__state{flex:0 0 auto}

/* The products block: heading, the five-facet bar, then the result line, the grid and the paging. */
.sp-g1-products__title{margin:0}
.sp-g1-bar{display:block}
.sp-g1-results{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding-block:.9rem;
  border-block:1px solid var(--line);
}
.sp-g1-results__line{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem 1.25rem;
}
.sp-g1-results__count{margin:0;font-weight:650}
.sp-g1-results__conditions{
  margin:0;
  font-size:var(--step--1);
  color:var(--ink-2);
}
.sp-g1-chips{margin:0;gap:.5rem}

/* The idea the list is narrowed by: one removable condition, reading as a chip rather than a link
   in a paragraph, so it is never mistaken for the idea band above. */
.sp-g1-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .75rem;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  background:var(--brand-tint);
  color:var(--brand-dark);
  font-size:var(--step--1);
  font-weight:600;
  text-decoration:none;
}
.sp-g1-chip:hover{
  border-color:var(--brand);
  color:var(--brand-dark);
}
.sp-g1-chip__x{font-size:1.05em;line-height:1}
.sp-g1-chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.sp-g1-cards{align-items:stretch}

/* Reading next: guides, cleared cases and at most two services share one quiet card. */
.sp-g1-reading__grid,
.sp-g1-projects__grid,
.sp-g1-support__grid{align-items:stretch}
.sp-g1-note__text{line-height:1.5}

/* The short project CTA. */
.sp-g1-cta__inner{
  display:grid;
  gap:1.25rem 2rem;
  align-items:center;
  padding:clamp(1.5rem,3vw,2.5rem);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--sand);
}
@media (min-width:52rem){
  .sp-g1-cta__inner{grid-template-columns:minmax(0,1fr) auto}
  .sp-g1-cta__actions{justify-content:flex-end}
}
.sp-g1-cta__copy{gap:.5rem}
.sp-g1-cta__copy h2{margin:0}
.sp-g1-cta__copy .lede{max-width:56ch}
.sp-g1-cta__actions{margin:0}