/* ==========================================================================
   LAYOUT - page structure and Paragraph bands.
   Markup (paragraph.html.twig):
     .pg.pg--{bundle} > .pg__band > .container > .row > .pg__main
     (boxed: .pg > .container > .pg__band--boxed > .pg-inner > .row > .pg__main)
   ========================================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Without a hero, push the content below the (absolute) header. */
.no-hero main { padding-top: calc(var(--epsa-header-h) + 1.5rem); }
main { flex: 1 0 auto; }
.skip-link a { background: var(--epsa-gold); color: var(--epsa-navy); }

/* Container: no extra padding inside the paragraph columns. */
.pg-fluid { width: 100%; }
.pg__band { position: relative; }
.pg__main { min-width: 0; }
.pg__main .row { --bs-gutter-x: clamp(1.5rem, 3.9vw, 3.9rem); --bs-gutter-y: 1.5rem; }
/* Full-width band: the outer row must not overflow the viewport. */
.pg-fluid > .row { margin-inline: 0; }
.pg-fluid > .row > .pg__main { padding-inline: 0; }

/* Section band: padding comes from the spacing helper (py-*), but a band
   with a background always keeps a minimum rhythm. */
.pg__band.has-bg-color { padding-block: max(var(--epsa-section-y) * 0.4, 1.5rem); }
.pg--section > .pg__band, .pg--section > .container > .pg__band { scroll-margin-top: var(--epsa-header-h); }

/* Boxed background (background set, field_full_width off): the colour fills
   a rounded box aligned on the .container. With field_full_width the band
   itself is full-bleed. */
.pg__band--boxed { border-radius: var(--epsa-radius-card); padding-inline: clamp(1.25rem, 3.5vw, 3.5rem); overflow: clip; }
.pg-inner { width: 100%; }
.pg__band--boxed .container { max-width: none; padding-inline: 0; }
.pg-inner > .row { margin-inline: 0; }
.pg-inner > .row > .pg__main { padding-inline: 0; }

/* Framed columns (equal-height cards with a border). */
.pg .framed { border: 1px solid var(--epsa-line); border-radius: var(--epsa-radius-card); padding: clamp(1rem, 2vw, 1.75rem); }

/* Two columns layouts: image column. */
.pg .col-img img, .pg figure img { width: 100%; height: auto; border-radius: var(--epsa-radius-card); display: block; }
.pg figure { margin: 0; }
.pg .col-img .inner-col { height: 100%; }

/* Responsive display field. */
.pg .d-block.d-md-none { /* mobile only helper from field_responsive_display */ }

/* Scroll reveal (class added by js/main.js). */
.to-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.to-reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .to-reveal { opacity: 1; transform: none; transition: none; } }
html:not(.js) .to-reveal { opacity: 1; transform: none; }

/* Text separators, tables, media from CKEditor. */
.pg hr { border-color: var(--epsa-line); opacity: 1; }
.pg img { max-width: 100%; height: auto; }
.pg .has-video, .pg .media--type-remote-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--epsa-radius-card); }
.pg article h2 { margin-top: 2.25rem; }
.pg article h3 { margin-top: 1.5rem; font-size: 1.15rem; }

/* Legal / long text pages (1col inside .pg--1col). */
.pg--1col .inner-col > :first-child { margin-top: 0; }

/* Figure and mobile horizontal scroller (multicol field_mobile_slider). */
.pg__figure { margin: 0; }
.pg__figure img { width: 100%; height: auto; display: block; border-radius: var(--epsa-radius-card); }
@media (max-width: 767.98px) {
  .pg__scroll-mobile { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; }
  .pg__scroll-mobile > * { flex: 0 0 82%; scroll-snap-align: start; }
}

/* Non-paragraph blocks in the content region on node pages. */
.region-content > .block:not(.block-system-main-block),
.region-content > .views-element-container { width: min(100% - 2rem, 1288px); margin-inline: auto; }