/* =============================================================
   Bookstacks and Stories — layout refinements
   -------------------------------------------------------------
   Loaded last so it can adjust the base sheet.
     1. Tighter CTA spacing
     2. Larger four-up group cards
     3. Events band (reference layout)
     4. Flat, full-bleed, left-aligned interior page heroes
   ============================================================= */

/* --- 1. Tighter CTA spacing ---------------------------------- */
/* Default section CTA sits clamp(2rem…3rem) below its cards. */
.section-cta--tight    { margin-top: clamp(1rem, .5rem + 1vw, 1.5rem); }    /* −50% */
.section-cta--tight-lg { margin-top: clamp(.8rem, .4rem + .8vw, 1.2rem); }  /* −60% */

/* The arc carousel's own controls and the CTA beneath it: the gaps
   between cards → arrows/dots → button are all pulled in tight. */
.learn .arc__viewport,
.arc--full .arc__viewport { padding-bottom: clamp(.4rem, .3rem + .4vw, .7rem); }
.learn .arc__controls,
.arc--full .arc__controls { margin-top: 0; }
.learn .section-cta--tight-lg { margin-top: clamp(.4rem, .25rem + .4vw, .7rem); }

/* --- 2. Group cards, four across and larger ------------------ */
.group-grid--home {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, .8rem + 1vw, 1.75rem);
}
.group-grid--home .group-card__media { aspect-ratio: 4 / 3; }
.group-grid--home .group-card__body  { padding: 1.25rem 1.4rem 1.6rem; }
.group-grid--home .group-card__name  { font-size: 1.22rem; }
.group-grid--home .group-card__copy  { font-size: var(--fs-sm); }

/* --- 3b. Unstyled icon fixes --------------------------------- */
/* Inline SVGs with no explicit size fall back to the browser default
   of 300×150, which is what broke the arrow on the Groups cards. */
.group-card__more {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .9rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--burgundy);
  transition: gap var(--dur) var(--ease);
}
.group-card__more svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.group-card__link:hover .group-card__more { gap: .75rem; }

.award-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: .9rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--gold);
}
.award-card__icon svg { width: 1.4rem; height: 1.4rem; }

/* Safety net: any icon inside a card that escaped an explicit size. */
.group-card svg,
.award-card svg,
.event-tile svg,
.alcove-card svg,
.contributor-card svg { max-width: 1.4rem; max-height: 1.4rem; }

/* --- 4. Interior page heroes: flat, full-bleed, left-aligned -- */
.page-hero {
  border-radius: 0;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: 100vw;
  text-align: left;
}
/* Overlay restored on interior heroes (the home hero keeps its own). */
.page-hero::after {
  display: block;
  background: linear-gradient(100deg,
    rgba(24, 12, 10, .90) 0%,
    rgba(48, 18, 20, .78) 45%,
    rgba(87, 18, 32, .48) 100%);
}
.page-hero__media img { object-fit: cover; object-position: center; }

/* Left-aligned, nudged 20px in from the shell edge. */
.page-hero__inner {
  margin-right: auto;
  margin-left: 0;
  padding-left: calc(var(--gutter) + 20px);
}

/* --- Responsive ---------------------------------------------- */
@media (max-width: 960px) {
  .group-grid--home { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .group-grid--home { grid-template-columns: 1fr; }
}