/* ==========================================================================
   Page patterns – sections that are composed from components.
   ========================================================================== */

/* Prototype helpers (remove in production) */
.proto-badge {
  position: fixed; left: var(--space-12); bottom: var(--space-12); z-index: 60;
  padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(46,46,46,.85); color: #fff;
  font: 500 11px/1.2 var(--font-text); letter-spacing: .02em; pointer-events: none;
}
.proto-toast {
  position: fixed; left: 50%; bottom: var(--space-24); z-index: 70; transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: var(--space-12) var(--space-16); border-radius: var(--radius-8);
  background: var(--color-graphite); color: #fff; font: 500 14px/1.35 var(--font-text); box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.not-italic { font-style: normal; }
.prose > * + * { margin-top: calc(var(--body-size) * var(--body-lh)); }

/* --------------------------------------------------------------------------
   Startsida – hero
   -------------------------------------------------------------------------- */
.hero__inner { gap: var(--space-16); }
.heading-group { display: flex; flex-direction: column; gap: var(--space-16); }
@media (min-width: 1024px) {
  .hero__inner { gap: var(--space-24); }
  .heading-group { gap: 0; }
}

/* Startsida – guide ("Hur kan vi hjälpa dig?") */
.guide__inner { display: grid; grid-template-columns: minmax(0, 1fr); }
.guide__choices { margin-top: var(--space-32); }
.guide__result { margin-top: var(--space-16); }
.guide__result {
  display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-16);
  background: var(--color-medfit-blue); border-radius: var(--radius-16); color: var(--color-white);
}
.guide__more { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-8); color: var(--color-white); }
.guide__more:hover .arrow-btn { background: var(--color-tone); }
@media (min-width: 1024px) {
  .guide__inner {
    grid-template-columns: minmax(0, 576fr) minmax(0, 592fr); column-gap: var(--space-16);
    grid-template-areas: "intro result" "choices result"; grid-template-rows: auto 1fr; align-items: start;
  }
  .guide__intro { grid-area: intro; padding-top: var(--space-8); }
  .guide__choices { grid-area: choices; margin-top: var(--space-32); }
  .guide__result { grid-area: result; margin-top: 0; padding: var(--space-48); }
}

/* --------------------------------------------------------------------------
   Steps band [Små steg]
   -------------------------------------------------------------------------- */
.steps-band { position: relative; isolation: isolate; overflow: hidden; background: var(--color-deep); color: var(--color-white); padding-block: var(--space-24); }
.steps-band__media { position: absolute; inset: 0; z-index: -2; }
.steps-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.steps-band__inner { display: flex; flex-direction: column; }
.steps-band__head { min-height: 440px; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-16); padding-bottom: var(--space-32); }
.steps-band--offer .steps-band__head { justify-content: space-between; }
.steps-band__cta { padding-top: var(--space-24); }
.steps-band__btn { width: 100%; }
@media (min-width: 1024px) {
  .steps-band { min-height: 720px; padding-block: 0; display: flex; align-items: center; }
  .steps-band__media { left: 120px; }
  .steps-band__media img { object-position: var(--pos-desktop, 50% 50%); }
  .steps-band::before {
    content: ""; position: absolute; inset: 0 0 0 120px; z-index: -1;
    background: linear-gradient(90deg, rgba(0,50,76,1) 0%, rgba(0,50,76,.35) 45%, rgba(0,50,76,0) 80%);
  }
  .steps-band__inner { gap: var(--space-32); }
  .steps-band__inner > * { max-width: 560px; }
  .steps-band__head { min-height: 0; padding-bottom: 0; justify-content: flex-start; gap: var(--space-32); }
  .steps-band--offer .steps-band__head { justify-content: flex-start; }
  .steps-band__cta { padding-top: var(--space-4); }
  .steps-band__btn { width: auto; }
}

/* --------------------------------------------------------------------------
   Member wall [Medlemsväggen]
   -------------------------------------------------------------------------- */
.member-wall { background: var(--color-white); padding-block: var(--space-24); overflow: hidden; }
.member-wall__inner { display: grid; grid-template-columns: minmax(0, 1fr); }
.member-wall__stat { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-32); }
.member-wall__sub { display: flex; align-items: center; gap: var(--space-8); color: var(--color-muted); font-size: var(--small-size); line-height: var(--small-lh); }
.member-wall__wall { position: relative; height: 500px; overflow: hidden; margin-inline: calc(-1 * var(--gutter)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.member-wall__col { position: relative; }
.member-wall__col--1 { top: -24px; } .member-wall__col--2 { top: -44px; } .member-wall__col--3 { top: -8px; }
.member-wall__track { display: flex; flex-direction: column; gap: var(--space-8); animation: wall-up 32s linear infinite; }
.member-wall__col--2 .member-wall__track { animation-name: wall-down; animation-duration: 38s; }
.member-wall__col--3 .member-wall__track { animation-duration: 35s; }
.member-wall.is-paused .member-wall__track { animation-play-state: paused; }
@keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 4px)); } }
@keyframes wall-down { from { transform: translateY(calc(-50% - 4px)); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .member-wall__track { animation: none; } }
.portrait { position: relative; aspect-ratio: 126 / 200; border-radius: var(--radius-16); overflow: hidden; background: var(--color-line); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.portrait__name { position: absolute; left: var(--space-8); top: var(--space-8); padding: var(--space-4) var(--space-8); border-radius: var(--radius-pill); background: var(--color-graphite); color: var(--color-white); font-size: var(--label-size); line-height: var(--label-lh); letter-spacing: var(--label-ls); font-weight: 500; }
.member-wall__quote { display: flex; flex-direction: column; gap: var(--space-12); padding-top: var(--space-32); }
.member-wall__quote blockquote { color: var(--color-graphite); }
.member-wall__sender { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.pause-btn { width: 32px; height: 32px; color: var(--color-graphite); border-radius: 50%; }
.pause-btn svg { width: 32px; height: 32px; }
.pause-btn .play-tri { display: none; }
.pause-btn[aria-pressed="true"] .pause-bars { display: none; }
.pause-btn[aria-pressed="true"] .play-tri { display: block; }
@media (min-width: 1024px) {
  .member-wall { background: var(--color-canvas); padding-block: 0; }
  .member-wall__inner { grid-template-columns: minmax(0, 619fr) minmax(0, 541px); column-gap: var(--space-24); grid-template-areas: "wall stat" "wall quote"; grid-template-rows: auto 1fr; min-height: 640px; }
  .member-wall__wall { grid-area: wall; height: 640px; margin: 0; gap: var(--space-8); grid-template-columns: repeat(3, 188px); align-self: stretch; }
  .member-wall__col--1 { top: -36px; } .member-wall__col--2 { top: -66px; } .member-wall__col--3 { top: -12px; }
  .member-wall__stat { grid-area: stat; padding: var(--space-96) 0 0; }
  .member-wall__sub { font-size: var(--body-size); line-height: var(--body-lh); }
  .member-wall__quote { grid-area: quote; padding: var(--space-48) 0 var(--space-96); }
  .portrait { aspect-ratio: 188 / 300; }
}

/* --------------------------------------------------------------------------
   Startsida – centers + closing
   -------------------------------------------------------------------------- */
.centers__inner { gap: var(--space-16); }
.centers__sub { font-size: var(--body-size); line-height: var(--body-lh); }
@media (min-width: 1024px) {
  .centers__inner { gap: var(--space-32); }
  .centers__sub { font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-ls); font-weight: 600; }
}
.closing { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); padding: var(--space-16); background: var(--color-sand); border-radius: var(--radius-16); }
.closing__text { display: flex; flex-direction: column; gap: var(--space-12); }
@media (min-width: 1024px) {
  .closing { align-items: center; padding: var(--space-64) var(--space-24); text-align: center; }
  .closing__text { align-items: center; }
  .closing__text p { max-width: 560px; }
}

/* --------------------------------------------------------------------------
   Template intro [Sidhuvud] – Mall 2–8
   Mobile order: back · heading · tags · media · lead
   Desktop: back · heading · media · [rail: tag | lead]
   -------------------------------------------------------------------------- */
.page-intro { padding-bottom: var(--space-24); }
.page-intro__body { display: flex; flex-direction: column; gap: var(--space-16); }
.page-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
.page-intro__heading { display: flex; flex-direction: column; gap: var(--space-16); }
.page-intro__title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.page-intro__tags { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); margin-top: var(--space-8); }
.page-intro--center .page-intro__tags { margin-top: 0; }
.page-intro--cards .page-intro__lead { margin-top: var(--space-32); }
.lead__text { gap: var(--space-16); }
.lead__facts { gap: var(--space-24); }
.media-wide { aspect-ratio: 358 / 378; border-radius: var(--radius-16); overflow: hidden; background: var(--color-tone); }
.media-wide img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023.98px) {
  .btn-row--fill-mobile .btn { flex: 1 1 0; }
}
@media (min-width: 1024px) {
  .page-intro { padding-bottom: 0; }
  .page-intro__body { gap: var(--space-32); padding-bottom: var(--space-48); border-bottom: 1px solid var(--color-line); }
  .page-intro__grid { gap: var(--space-24); }
  .page-intro__heading { gap: 0; }
  .page-intro--cards .page-intro__lead { margin-top: 0; }
  .page-intro__lead .rail__side { display: flex; flex-direction: column; align-items: flex-start; }
  .lead__text { gap: var(--space-24); }
  .lead--no-rail { max-width: 776px; }
  .media-wide { aspect-ratio: auto; height: 600px; }
}

/* Gallery (Mall 8) */
.gallery { display: flex; gap: var(--space-12); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.gallery::-webkit-scrollbar { display: none; }
.gallery li { flex: 0 0 300px; height: 378px; border-radius: var(--radius-16); overflow: hidden; scroll-snap-align: start; background: var(--color-line); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); overflow: visible; margin: 0; padding: 0; }
  .gallery li { height: 300px; }
}

/* Map (Mall 7) */
.map { position: relative; height: 260px; border-radius: var(--radius-16); overflow: hidden; background: var(--color-tone); z-index: 0; }
.map__fallback { position: absolute; inset: 0; }
.map__fallback li { position: absolute; }
.map__fallback li:nth-child(1) { left: 90px; top: 90px; } .map__fallback li:nth-child(2) { left: 220px; top: 50px; } .map__fallback li:nth-child(3) { left: 260px; top: 180px; }
.map__fallback a { display: flex; align-items: flex-start; gap: 4px; color: var(--color-graphite); }
.map__fallback svg { width: 28px; height: 36px; }
.map__fallback span { margin-top: 8px; }
.map.is-ready .map__fallback { display: none; }
.map .leaflet-container { font-family: var(--font-text); }
.map-pin { background: none; border: 0; }
.map-pin svg { width: 28px; height: 36px; }
.map-pin span { position: absolute; left: 32px; top: 8px; white-space: nowrap; font: 500 var(--label-size)/1.2 var(--font-text); letter-spacing: .02em; color: var(--color-graphite); text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
@media (min-width: 1024px) { .map { height: 600px; } }

/* Rail sections */
.rail__title--with-text { gap: var(--space-16); }
.rail--choose .rail__content { min-width: 0; }
.info-text { max-width: 776px; }

/* Mall 8 prompt box (same component as Behöver du hjälp) */
.prompt--center .prompt__actions { justify-content: flex-start; }
@media (min-width: 1024px) { .prompt--center .prompt__actions { justify-content: center; } }

/* Membership grid inside rail */
.membership-grid.rail__content { display: grid; }