/* Site content areas (Portal Home, Event Pages and the editor preview). Uses
   the reference tokens from ../styles.css; component shapes follow program-lead,
   program-photo, editorial-lead, program-campaigns, campaign-visual, scope-note,
   program-note, page-header, tool-nav and status-banner. Load after ../styles.css. */

.site-content { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.site-content > * { min-width: 0; margin-block: 0; }
.site-content h2 { overflow-wrap: anywhere; }
.site-content img { display: block; max-width: 100%; background: var(--dune); }

.site-content .site-content-copy { min-width: 0; }
.site-content .site-content-copy p,
.site-content .site-content-copy ul { max-width: 62ch; margin: 0 0 var(--space-2); line-height: 1.6; }
.site-content .site-content-copy > :last-child { margin-bottom: 0; }
.site-content .site-content-copy ul { padding-left: 1.1rem; }
.site-content .site-content-copy li + li { margin-top: .35rem; }
.site-content .site-content-link { margin-top: var(--space-4); }

/* Hero: split photo (program-lead) */
.site-content .site-content-hero--split { margin-top: 0; }
.site-content .site-content-hero--split > div > .site-content-copy { margin-top: var(--space-4); }
.site-content .site-content-hero--split img { min-height: 100%; }

/* Hero: full photo (program-photo) */
.site-content .site-content-hero--photo { margin: 0; }
.site-content .site-content-hero--photo figcaption .eyebrow { margin-bottom: var(--space-2); color: var(--photo-text); }
.site-content .site-content-hero--photo figcaption > span { max-width: 60ch; line-height: 1.5; }
.site-content .site-content-hero--photo .text-cta { color: var(--photo-text); border-color: currentColor; }

/* Hero: text band (dune panel, bonus-section proportions) */
.site-content-band { padding: var(--space-5) clamp(2rem, 5vw, 4rem); background: var(--dune); }
.site-content-band h2 { max-width: 16ch; margin: 0; font-size: clamp(2.6rem, 4vw, 4.6rem); line-height: .95; }
.site-content-band .site-content-copy { margin-top: var(--space-3); color: var(--muted); }

/* Text (editorial-lead) */
.site-content .site-content-text { padding: 0; align-items: start; }
.site-content .site-content-text h2 { font-size: clamp(2.8rem, 4.8vw, 5.5rem); }
.site-content .site-content-text .site-content-copy { font-size: 1.1rem; }

/* Photo and text (program-campaigns article) */
.site-content-feature { display: grid; grid-template-columns: minmax(250px, .85fr) 1.15fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: var(--space-5) 0; border-block: 1px solid var(--rule); }
.site-content-feature img { width: 100%; height: 380px; object-fit: cover; }
.site-content-feature--image-right { grid-template-columns: 1.15fr minmax(250px, .85fr); }
.site-content-feature--image-right img { order: 2; }
.site-content-feature .site-content-feature-title { margin: 0 0 var(--space-3); font-size: clamp(2.2rem, 3.5vw, 4rem); line-height: .95; }
.site-content-feature .site-content-copy { color: var(--muted); }

/* Photo (campaign-visual) */
.site-content .site-content-photo { margin: 0; }
.site-content .site-content-photo figcaption span { text-transform: none; letter-spacing: 0; font-size: .9rem; }

/* Notice (scope-note / program-note) */
.site-content .site-content-notice { margin: 0; }
.site-content .site-content-notice-title { margin: 0; font-family: Acumin, Arial, sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.site-content .site-content-notice .site-content-copy { margin-top: var(--space-1); color: var(--muted); }
.site-content .site-content-notice .site-content-link { margin-top: var(--space-3); }

/* Event areas (lane 8b): labelled placeholders for media the Keune events team
   has not supplied yet, and Vimeo videos in a 16:9 frame. */
.site-content-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-1); min-width: 0; padding: clamp(1.25rem, 4vw, 3rem); background: var(--dune); border: 1px solid var(--rule); color: var(--muted); }
.site-content-placeholder p { max-width: 46ch; margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.site-content-placeholder .eyebrow { color: var(--ink); }
.site-content .program-lead .site-content-placeholder { background: var(--paper); }
.site-content-feature .site-content-placeholder--photo { height: 380px; }
.site-content-feature--image-right .site-content-placeholder--photo { order: 2; }
.site-content .site-content-hero--split .site-content-placeholder--photo { height: 100%; }
/* Under a caption laid over the lower edge, the label sits at the top. */
.site-content .site-content-hero--photo .site-content-placeholder--photo,
.site-content .site-content-photo .site-content-placeholder--photo { height: 100%; justify-content: flex-start; }
.site-content .site-content-hero--photo .site-content-placeholder--photo,
.site-content .site-content-photo .site-content-placeholder--photo { border: 0; }

.site-content-video-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; min-width: 0; background: var(--ink); }
.site-content-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.site-content-video-frame.site-content-placeholder--video { background: var(--dune); }
.site-content .site-content-video { max-width: 1120px; }
.site-content .site-content-video figure { margin: 0; }
.site-content .site-content-video-title { margin: 0 0 var(--space-3); font-size: clamp(2.2rem, 3.5vw, 4rem); line-height: .95; }
.site-content .site-content-video figcaption { margin-top: var(--space-2); color: var(--muted); font-size: .9rem; line-height: 1.5; }
.site-content .site-content-hero--video { align-items: center; }
.site-content .site-content-hero--video > .site-content-video-frame { align-self: center; width: auto; margin: clamp(1.5rem, 3vw, 3rem); }

/* Portal Home area: below the welcome, before the operational blocks */
.home-site-content { padding-top: var(--space-5); }
/* Operations Homes: keep the area apart from the dune operations block below it. */
.home-operations .home-site-content { padding-bottom: var(--space-5); }

/* Event Pages (D-09): the Incentives tool frame (tool heading, tabs,
   status banner) around published content; the list reuses program-campaigns. */
.events-page { padding-top: 2.25rem; }
.events-page .events-nav { flex-wrap: wrap; column-gap: clamp(1.5rem, 4vw, 4rem); }
.events-page .events-nav a { max-width: 100%; }
.events-page .event-dates { margin: 0; }
.events-page .event-dates span { overflow-wrap: anywhere; }
.events-intro { margin-top: 3.5rem; }
.events-body > .site-content { margin-top: 3.5rem; }
.events-list { padding-top: var(--space-6); }
.events-list .section-head { align-items: center; }
.events-cards .events-card h3 { overflow-wrap: anywhere; }
.events-cards .events-card .period { margin: var(--space-2) 0 0; }
.events-cards .events-card-summary { max-width: 62ch; margin: var(--space-2) 0 0; line-height: 1.55; }
.events-cards .events-card .text-cta { margin-top: var(--space-3); }
.events-page .events-state { min-height: 360px; }

@media (max-width: 900px) {
  .site-content { gap: var(--space-4); }
  .site-content .site-content-hero--split { margin-inline: -16px; }
  .site-content .site-content-hero--split img { height: 220px; min-height: 0; }
  .site-content .site-content-hero--split .site-content-placeholder--photo { height: auto; min-height: 220px; }
  .site-content .site-content-hero--video { margin-inline: -16px; }
  .site-content .site-content-hero--video > .site-content-video-frame { width: 100%; margin: 0; }
  .site-content .site-content-hero--video h2 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .site-content-feature .site-content-placeholder--photo { height: auto; min-height: 56vw; max-height: 320px; margin-bottom: var(--space-3); }
  .site-content .site-content-hero--split h2 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .site-content .site-content-hero--photo { margin-inline: -16px; }
  .site-content-band { margin-inline: -16px; padding: var(--space-4) 16px; }
  .site-content-band h2 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .site-content .site-content-text { display: block; }
  .site-content .site-content-text h2 { font-size: clamp(2.3rem, 10vw, 3.2rem); }
  .site-content .site-content-text .site-content-copy { margin-top: var(--space-3); font-size: 1rem; }
  .site-content-feature { display: block; padding: var(--space-4) 0; }
  .site-content-feature img { height: 56vw; max-height: 320px; margin-bottom: var(--space-3); }
  .site-content-feature .site-content-feature-title { font-size: 2.1rem; }
  .site-content .site-content-photo { height: 58vw; max-height: 360px; }
  .site-content .site-content-notice { padding: 1.25rem; }
  /* The reference stacks program-lead as a column; a short hero text still fills the width. */
  .site-content .site-content-hero--split > div { align-self: stretch; }
  .home-site-content { padding-top: var(--space-4); }
  .home-operations .home-site-content { padding-bottom: var(--space-4); }
  .events-page { padding-top: 1.5rem; }
  /* Tabs in two columns (reference tool-nav); only an odd last tab spans the row. */
  .events-page .events-nav a:last-child { grid-column: auto; }
  .events-page .events-nav a:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .events-intro, .events-body > .site-content { margin-top: var(--space-4); }
  .events-list { padding-top: var(--space-5); }
  .events-page .events-state { min-height: 280px; }
}

/* Lane PREVIEW2: inside the Portal preview frame (site-content/preview/), which
   loads the portal's own stylesheets (styles.css, then this file) and no others,
   so its screens look exactly as they do in the portal. The sample-data banner is
   announced, not drawn: it would push the page down (the note above the frame
   says it instead). The notice and the "nothing was sent" line are preview-only. */
.preview-banner { position: absolute; z-index: var(--z-bar); width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.preview-notice { position: fixed; z-index: var(--z-skip); top: var(--space-6); left: var(--space-3); right: var(--space-3); max-width: 28rem; margin: 0 auto; box-shadow: var(--shadow-pop); }
.preview-notice[hidden] { display: none; }
.preview-sent { margin: var(--space-3) 0 0; }
/* D27-PV: the same portal at the actual viewport, with one measured banner. Live data (22 Oct):
   the same visible banner in the frame too, so no live screen can be mistaken for the real one. */
.preview-fullscreen-hint { color: var(--muted); font-size: var(--text-sm); }
.preview-direct { margin: var(--space-4); }
html[data-preview-bar] { --preview-banner-h: 44px; scroll-padding-top: var(--preview-banner-h); }
html[data-preview-bar] body { padding-top: var(--preview-banner-h); }
html[data-preview-bar] .preview-banner { position: fixed; inset: 0 0 auto; z-index: var(--z-skip); display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: auto; height: auto; min-height: 44px; margin: 0; padding: 0 var(--gutter); overflow: visible; clip-path: none; white-space: normal; border: 0; border-bottom: 1px solid var(--rule); background: var(--paper); color: var(--ink); font-size: var(--text-xs); line-height: 1.3; }
.preview-banner [data-preview-exit] { flex: none; min-height: 44px; border: 0; padding: .4rem 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
html[data-preview-bar] .menu-backdrop { top: calc(var(--preview-banner-h) + var(--header-h)); }
html[data-preview-bar] .portal-menu { max-height: calc(100dvh - var(--preview-banner-h) - var(--header-h) - var(--tabbar-visible)); }
html[data-preview-bar] .preview-notice { top: calc(var(--preview-banner-h) + var(--space-3)); }
html[data-preview-bar] #preview-screen:not(:empty) { min-height: calc(100dvh - var(--preview-banner-h)); }
html[data-preview-bar] .home-hero--sea { --hero-top: calc(var(--header-h) + var(--preview-banner-h)); }
html[data-preview-bar] .home-hero--sea:not(.home-hero--bleed) { --hero-top: calc(var(--header-h) + var(--preview-banner-h) + var(--space-6)); }
@media (max-width: 900px) {
  html[data-preview-bar] .portal-menu { top: calc(var(--preview-banner-h) + var(--header-h)); }
  html[data-preview-bar] body:has(.mobile-bottom-nav) #preview-screen:not(:empty) { min-height: calc(100dvh - var(--preview-banner-h) - var(--mobile-nav-h) - env(safe-area-inset-bottom)); }
}
@media (max-width: 700px), (max-width: 900px) and (orientation: portrait) {
  html[data-preview-bar] :is(.home-hero--sea, .home-hero--celebrate) { --first: max(22rem, 100svh - var(--preview-banner-h) - var(--header-h) - var(--tabbar-visible)); }
}
@media (max-width: 700px) {
  html[data-preview-bar] .home-hero--sea { --first: max(22rem, 100svh - var(--preview-banner-h) - var(--header-h) - 1px - var(--tabbar-visible)); }
}
/* The frame's screen holder is the portal's #app (base.css): the page column fills the viewport and the footer sits at the bottom. */
#preview-screen:not(:empty) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
#preview-screen:not(:empty) > .site-footer { margin-top: auto; }
@media (max-width: 900px) {
  body:has(.mobile-bottom-nav) #preview-screen:not(:empty) { min-height: calc(100vh - var(--mobile-nav-h) - env(safe-area-inset-bottom)); min-height: calc(100dvh - var(--mobile-nav-h) - env(safe-area-inset-bottom)); }
}
/* Portal preview, live data: the pickers (search above each list) and the notes above the frame. */
.preview-live-controls[hidden], .preview-live-field[hidden], .preview-controls [data-sample-only][hidden] { display: none; }
.preview-live-field { display: grid; gap: var(--space-1); }
.preview-live-field input[type=search] { min-height: 44px; }
.preview-live-note { margin: 0 0 var(--space-2); }
.preview-excluded { margin: var(--space-3) var(--gutter); }