/* ============================================================
   GARY PARKER · D-26 · 2026  ·  MOBILE STYLES
   Mobile pages override / re-skin the desktop styles in styles.css.
   Anchored to 360–430px viewports; degrades up to ~640.
   ============================================================ */

:root {
  /* tighter mobile spacing scale */
  --gutter: 1.15rem;
  --section-y: 2.5rem;
}

/* prevent any horizontal scroll/bleed */
html, body { overflow-x: hidden; }

/* --- base typography sizing for mobile --- */
html { font-size: 16px; }
body { font-size: 16px; line-height: 1.55; }


/* ============================================================
   GENERAL SECTION TIGHTENING
   ============================================================ */
section { padding-left: var(--gutter); padding-right: var(--gutter); }
.intro,
.thesis,
.chapters,
.dossier,
.events,
.donate,
.volunteer,
.shift,
.bio,
.awards,
.built,
.page-cta,
.sched-lede,
.sched,
.donate-page {
  padding-top: var(--section-y) !important;
  padding-bottom: var(--section-y) !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* ============================================================
   INTRO BAND
   ============================================================ */
.intro__inner {
  grid-template-columns: 1fr !important;
  gap: 1.25rem !important;
}
.intro__lede {
  font-size: 1.15rem !important;
  line-height: 1.4 !important;
}
.intro__cta {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
}
.intro__cta .btn { justify-content: center; width: 100%; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marq__track {
  font-size: 1.5rem !important;
  gap: 1.25rem !important;
  animation-duration: 22s;
}

/* ============================================================
   THESIS
   ============================================================ */
.thesis__h {
  font-size: clamp(2.1rem, 11vw, 3rem) !important;
  line-height: 0.96 !important;
}
.thesis__body { font-size: 1rem !important; }

/* ============================================================
   CHAPTERS
   ============================================================ */
.chapters { padding-left: 0 !important; padding-right: 0 !important; }
.chapters__head {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
  margin-bottom: 1.5rem !important;
}
.chapters__h {
  font-size: clamp(1.65rem, 7vw, 2rem) !important;
  line-height: 1.05 !important;
}
.chapters__sub { font-size: 1rem !important; margin-top: 0.75rem !important; }
.chap {
  grid-template-columns: 1fr !important;
  padding: 1.75rem var(--gutter) !important;
  gap: 0.5rem !important;
}
.chap--right .chap__num,
.chap--right .chap__body { order: unset !important; text-align: left !important; }
.chap__num {
  font-size: 5rem !important;
  margin: 0 !important;
  line-height: 0.85 !important;
}
.chap__h { font-size: 1.45rem !important; line-height: 1.15 !important; }
.chap__body p { font-size: 1rem !important; line-height: 1.55 !important; }
.chap__pull p { font-size: 1.05rem !important; line-height: 1.4 !important; }
.chap__commit { padding: 1rem !important; }
.chap__commit-lede { font-size: 1rem !important; }
.chap__commit-list li { font-size: 0.95rem !important; }
.chap__close { font-size: 1.05rem !important; }
.chap__beat { font-size: 1.15rem !important; }

/* ============================================================
   DOSSIER (Meet Gary head)
   ============================================================ */
.dossier__inner {
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}
.dossier__media { aspect-ratio: 4 / 5; max-width: 100%; }
.dossier__h { font-size: clamp(1.85rem, 8.5vw, 2.4rem) !important; line-height: 1.0 !important; }
.dossier__list > div {
  grid-template-columns: 1fr !important;
  gap: 0.35rem !important;
  padding: 0.85rem 0 !important;
}
.dossier__list dd { font-size: 1rem !important; }

/* ============================================================
   SHIFT (Solutions opener)
   ============================================================ */
.shift__h {
  font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
  line-height: 1.05 !important;
}
.shift__lede { font-size: 1.1rem !important; line-height: 1.4 !important; }
.shift__body p { font-size: 1rem !important; line-height: 1.55 !important; }
.shift__truth { font-size: 1.25rem !important; }
.shift__close { font-size: 1.5rem !important; }

/* ============================================================
   BIO (Meet Gary long form)
   ============================================================ */
.bio__inner { padding: 0 !important; }
.bio__h { font-size: clamp(1.85rem, 9vw, 2.4rem) !important; }
.bio__lede { font-size: 1.1rem !important; line-height: 1.45 !important; }
.bio__lede-pull { font-size: 1.2rem !important; }
.bio__chap {
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
}
.bio__num { font-size: 1.5rem !important; }
.bio__num-label { font-size: 0.7rem !important; }
.bio__sub { font-size: 1.25rem !important; line-height: 1.2 !important; }
.bio__pullquote p { font-size: 1.4rem !important; line-height: 1.2 !important; }

/* ============================================================
   AWARDS — mobile vertical stack
   Per card: [year above] · [laurel framing centered name] · [issuer below]
   Implemented with CSS Grid so laurel + name share the same cell.
   ============================================================ */
.awards__h { font-size: clamp(1.65rem, 7vw, 2rem) !important; line-height: 1.1 !important; }
.awards__intro { font-size: 1rem !important; }
.awards__pull p { font-size: 1.2rem !important; line-height: 1.3 !important; }

/* both lists become single column */
.awards__featured,
.awards__grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  max-width: 100% !important;
  margin: 0 0 1.75rem !important;
  padding: 0 !important;
  list-style: none;
}

/* card uses a 3-row grid; laurel + name occupy the same middle cell */
.award-card,
.award-mini {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  padding: 1.1rem 1rem !important;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "year"
    "laurel"
    "issuer";
  justify-items: center;
  align-items: center;
  row-gap: 0.7rem;
  text-align: center;
  transform: none !important;
}
.award-card:hover, .award-mini:hover { transform: none !important; }

/* laurel image: sized; centered in the middle cell */
.award-card__laurel,
.award-mini__laurel {
  position: relative !important;
  inset: auto !important;
  display: block;
  grid-area: laurel;
  width: 200px !important;
  height: 150px !important;
  max-width: 100%;
  object-fit: contain !important;
  z-index: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  margin: 0 !important;
}

/* name shares the laurel cell — sits on top, centered */
.award-card__name,
.award-mini__name {
  grid-area: laurel;
  position: relative !important;
  z-index: 1;
  width: 100px;
  margin: 0 !important;
  font-family: var(--display);
  font-weight: 800;
  /* ~35% smaller than the prior 1.35rem (≈ 0.88rem) */
  font-size: 0.88rem !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  text-wrap: balance;
  pointer-events: none;
  align-self: center;
  justify-self: center;
}
.award-card__name span,
.award-mini__name span {
  display: block;
  font-size: inherit !important;
  white-space: normal;
}

/* year — one line above the laurel */
.award-card__year,
.award-mini__year {
  grid-area: year;
  position: relative !important;
  z-index: 1;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.82rem !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin: 0 !important;
  white-space: nowrap;
  line-height: 1;
}
/* multi-year cards: still force one line, just slightly tighter */
.award-mini__year--stacked,
.award-card__year--stacked {
  white-space: nowrap !important;
  display: block !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.18em;
}
.award-mini__year--stacked span,
.award-card__year--stacked span {
  display: inline !important;
  white-space: nowrap;
}
.award-mini__year--stacked span + span,
.award-card__year--stacked span + span {
  margin-left: 0.15em;
}

/* issuer — 1 or 2 lines below the laurel */
.award-card__issuer,
.award-mini__issuer {
  grid-area: issuer;
  position: relative !important;
  z-index: 1;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.78rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted) !important;
  line-height: 1.35;
  margin: 0 !important;
  max-width: 28ch;
}
.award-card__issuer br,
.award-mini__issuer br { display: none; }

.awards__close p { font-size: 1.2rem !important; }
.awards__close-final { font-size: 1.4rem !important; }

/* ============================================================
   BUILT (Meet Gary tail)
   ============================================================ */
.built__inner {
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}
.built__h { font-size: clamp(1.75rem, 8vw, 2.2rem) !important; line-height: 1.1 !important; }
.built__pull span { font-size: 1.15rem !important; }
.built__pull-emph { font-size: 1.3rem !important; }

/* ============================================================
   EVENTS — list view
   ============================================================ */
.sched-lede__h { font-size: clamp(1.85rem, 8.5vw, 2.4rem) !important; line-height: 1.05 !important; }
.sched-lede__sub { font-size: 1rem !important; }

/* Featured "Next Up" card — fully redesigned for narrow screens */
.sched-next {
  display: block !important;
  grid-template-columns: 1fr !important;
  margin: 0 0 1.5rem !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 40px -22px rgba(15,27,45,0.4) !important;
  overflow: hidden;
}
.sched-next__media {
  position: relative;
  min-height: 0 !important;
  /* Portrait crop on phones — admin uploads a dedicated 828×1160 (3:4) mobile asset. */
  aspect-ratio: 3 / 4 !important;
  width: 100%;
}
.sched-next__media picture,
.sched-next__media picture img {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
}
.sched-next__media picture img { object-fit: cover; }
.sched-next__media img {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover;
}
.sched-next__badge {
  top: 0.85rem !important;
  left: 0.85rem !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.18em !important;
  padding: 0.35rem 0.6rem !important;
}
.sched-next__body {
  padding: 1.25rem !important;
  display: flex !important;
  flex-direction: column;
  gap: 0.65rem !important;
}
.sched-next__type {
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
}
/* Date row: keep the big day numeral, but make the m/wd column flex naturally */
.sched-next__date {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  margin: 0 !important;
}
.sched-next__date-d {
  font-size: 2.75rem !important;
  line-height: 0.9 !important;
}
.sched-next__date-m {
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
  line-height: 1.25 !important;
}
.sched-next__date-m span:first-child {
  font-size: 0.8rem !important;
}
.sched-next__title {
  font-size: 1.4rem !important;
  line-height: 1.1 !important;
  text-wrap: balance;
  margin: 0 !important;
}
.sched-next__meta {
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.3rem 0.45rem !important;
  align-items: baseline;
  margin: 0 !important;
}
.sched-next__lede {
  font-size: 0.97rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  max-width: 100% !important;
}
.sched-next__cta {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.55rem !important;
  margin-top: 0.35rem !important;
  width: 100%;
}
.sched-next__cta .btn {
  width: 100%;
  justify-content: center;
  padding: 0.95rem 1rem !important;
  font-size: 0.95rem !important;
}
.sched-next__add {
  width: 100%;
  justify-content: center !important;
  text-align: center !important;
  padding: 0.8rem 0.85rem !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap;
}

.sched-filter {
  gap: 0.4rem;
  overflow-x: auto;
  flex-wrap: nowrap;
  margin: 0 calc(-1 * var(--gutter)) 1.25rem;
  padding: 0.85rem var(--gutter);
  -webkit-overflow-scrolling: touch;
}
.sched-filter__chip { flex-shrink: 0; }

.sched-item__head {
  grid-template-columns: auto 1fr auto !important;
  padding: 0.85rem 0.85rem !important;
  gap: 0.85rem !important;
}
.sched-item__media { display: none !important; }
.sched-item__date {
  min-width: 56px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.1rem !important;
}
.sched-item__date-d { font-size: 1.7rem !important; }
.sched-item__date-m { font-size: 0.62rem !important; }
.sched-item__title { font-size: 1.05rem !important; line-height: 1.2 !important; }
.sched-item__meta { font-size: 0.74rem !important; gap: 0.25rem !important; }
.sched-item__detail-grid {
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
  padding: 1rem !important;
}
.sched-item__detail-body { font-size: 0.98rem !important; }
.sched-item__detail-cta { padding: 0 1rem 1rem !important; flex-wrap: wrap; }

.sched-notify {
  flex-direction: column;
  align-items: stretch !important;
  text-align: left;
  gap: 1rem !important;
}
.sched-notify .btn { justify-content: center; width: 100%; }

/* ============================================================
   DONATE PAGE
   ============================================================ */
.donate-page__h { font-size: clamp(1.85rem, 8.5vw, 2.4rem) !important; line-height: 1.05 !important; }
.donate-page__sub { font-size: 1rem !important; }
.donate-page__grid {
  grid-template-columns: 1fr !important;
  gap: 1.25rem !important;
  justify-content: stretch !important;
}
/* Anedot iframe — lock to viewport width, prevent any horizontal bleed */
.dform-embed {
  /* Pull card flush with section gutter on BOTH sides so the form gets every available px.
     width:100% would collapse the negative right margin into empty space — explicitly widen instead. */
  width: calc(100% + 2 * (var(--gutter) - 0.25rem)) !important;
  max-width: none !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  margin-left: calc(-1 * var(--gutter) + 0.25rem);
  margin-right: calc(-1 * var(--gutter) + 0.25rem);
}
.dform-scaler {
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}
.dside { gap: 0.85rem !important; }
.dside-card { padding: 1.25rem !important; }
.dside-card__h { font-size: 1.3rem !important; }
.dside-card__quote { font-size: 1.05rem !important; line-height: 1.4 !important; }
.dside-card__btn { width: 100%; text-align: center; }
.donate-page__compliance { font-size: 0.78rem !important; line-height: 1.5 !important; }

/* Home page donate band */
.donate__grid {
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}
.donate__h { font-size: clamp(1.95rem, 9vw, 2.5rem) !important; }
.donate__body { font-size: 1rem !important; }
.donate__form {
  padding: 1.25rem !important;
  gap: 1rem !important;
  /* full-bleed within section gutter so the form card aligns with the section, not nested inside it */
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
.donate__tiers { grid-template-columns: repeat(3, 1fr) !important; gap: 0.5rem !important; }
.tier { padding: 0.85rem 0.5rem !important; font-size: 1rem !important; }
/* Contribute now: keep on a single line, even at 320px */
.donate__form .btn,
.donate__form .btn--full.btn--lg {
  font-size: 0.95rem !important;
  padding: 0.95rem 1rem !important;
  white-space: nowrap;
  min-height: 50px;
}

/* Home page volunteer band */
.volunteer__grid {
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}
.volunteer__h { font-size: clamp(1.95rem, 9vw, 2.5rem) !important; }
.volunteer__sub { font-size: 1rem !important; }
.vol-form {
  padding: 1.25rem !important;
  gap: 0.9rem !important;
  /* full-bleed within section gutter — symmetrical look */
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
.field-row { grid-template-columns: 1fr !important; }
.field input { padding: 0.85rem 0.9rem !important; }

/* ============================================================
   EVENTS HOMEPAGE LIST
   ============================================================ */
.events__h { font-size: clamp(1.85rem, 9vw, 2.4rem) !important; }
.events__body { font-size: 1rem !important; margin-bottom: 1.5rem !important; }
.events__list li {
  grid-template-columns: 1fr !important;
  gap: 0.35rem !important;
  padding: 1.1rem 0 !important;
}
.events__list li:hover { padding-left: 0 !important; padding-right: 0 !important; }
.events__title { font-size: 1.15rem !important; }
.events__loc { text-align: left !important; }

/* Inline link button on dark sections — must read on dark ink */
.events .btn--inline,
.thesis .btn--inline,
.donate .btn--inline {
  color: var(--on-ink) !important;
  border-color: var(--on-ink) !important;
}
.events .btn--inline:hover,
.thesis .btn--inline:hover,
.donate .btn--inline:hover {
  color: var(--on-ink) !important;
  border-color: var(--on-ink) !important;
}

/* ============================================================
   PAGE CTA
   ============================================================ */
.page-cta__h { font-size: clamp(1.85rem, 9vw, 2.4rem) !important; line-height: 1.1 !important; }
.page-cta__btns {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
}
.page-cta__btns .btn { width: 100%; justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot__statement { font-size: 1.5rem !important; line-height: 1.15 !important; }
.foot__grid { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
.foot__logo { width: 180px; }

/* ============================================================
   BUTTONS — beef up touch targets
   ============================================================ */
.btn { min-height: 48px; padding: 0.85rem 1.25rem; font-size: 0.98rem; }
.btn--lg { min-height: 54px; padding: 1.05rem 1.4rem; font-size: 1.05rem; }
.btn--compact { min-height: 40px; padding: 0.55rem 0.9rem; font-size: 0.85rem; }

/* Hide all overlay/chrome elements not used on mobile */
.donate__bg-mark { font-size: 18rem !important; }

/* Pulled-into-bleed page-cta */
.page-cta__inner { padding: 0 !important; max-width: 100% !important; }
.page-cta__inner .page-cta__btns { width: 100%; }