/* ==========================================================================
   BLOCK SYSTEM — Text / Media / Page / Section blocks
   --------------------------------------------------------------------------
   Database-driven content blocks. All typography colors/sizes/fonts are
   applied as inline styles from the DB; this file provides the layout
   mechanics, designs, buttons, and responsive behavior.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared block basics
   -------------------------------------------------------------------------- */
.block,
.sblock {
    width: 100%;
    box-sizing: border-box;
}

.block img,
.block video,
.sblock img,
.sblock video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   TEXT BLOCK
   ========================================================================== */
.block--text {
    padding: 2rem 1rem;
}
.block--text.block--has-bg {
    padding: 2.5rem 1rem;
}

/* Text box width */
.block__inner--box-size-small { max-width: 600px; }
.block__inner--box-size-medium { max-width: 1000px; }
.block__inner--box-size-large { max-width: 1400px; }

/* Text box position on the page */
.block__inner--position-left { margin-left: 0; margin-right: auto; }
.block__inner--position-center { margin-left: auto; margin-right: auto; }
.block__inner--position-right { margin-left: auto; margin-right: 0; }

.block__title {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.1;
}
.block__body {
    font-size: 1.05rem;
    line-height: 1.6;
}
.block__body p { margin: 0 0 1rem; }
.block__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   MEDIA BLOCK
   ========================================================================== */
.block--media {
    padding: 2rem 1rem;
}
/* "Full width" media must be a true full-bleed — no side padding/margin at
   all, edge-to-edge with the viewport. Medium/small keep the side padding
   so the smaller image still sits inside the page's normal gutters. */
.block--media-size-full {
    padding-left: 0;
    padding-right: 0;
}
.block__media { width: 100%; }
.block__media img,
.block__media video {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Media width: full = 100%, medium ≈ 80–90%, small ≈ 60–70% */
.block--media-size-full .block__media { width: 100%; margin-left: 0; margin-right: 0; }
.block--media-size-medium .block__media { width: 85%; }
.block--media-size-small .block__media { width: 65%; }


/* Media placement on the page */
.block--media-placement-left .block__media { margin-left: 0; margin-right: auto; }
.block--media-placement-center .block__media { margin-left: auto; margin-right: auto; }
.block--media-placement-right .block__media { margin-left: auto; margin-right: 0; }

/* ==========================================================================
   PAGE BLOCK — Design 1 (side-by-side) & Design 2 (stacked)
   Keeps the visual design of the previous page-starter block.
   ========================================================================== */
.block--page-starter {
    width: 100%;
    margin: 0 auto 4rem;
}
/* Intro media is full-bleed (true edge-to-edge of the viewport). Rather than
   relying on a 100vw + negative-margin calc() trick (which is thrown off by
   vertical scrollbar width and produces an inconsistent gap on one side),
   the media simply lives directly inside the full-width article and is
   never constrained. Only the text content below it (columns/stack) gets
   the max-width + centering treatment. */
.block--page-starter .block__media {
    width: 100%;
    margin-bottom: 2rem;
}
.block--page-starter .block__media img,
.block--page-starter .block__media video {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.block--page-starter .block__page-starter-columns,
.block--page-starter .block__page-starter-stack {
    width: min(1200px, 90%);
    margin-left: auto;
    margin-right: auto;
}

/* Side-by-side: title+subtitle left, text right */
.block--page-starter--side .block__page-starter-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* Vertical placement of the title column relative to the text column */
.block--page-starter--side .block__page-starter-heading--v-top { align-self: flex-start; }
.block--page-starter--side .block__page-starter-heading--v-center { align-self: center; }
.block--page-starter--side .block__page-starter-heading--v-bottom { align-self: flex-end; }

.block--page-starter--side .block__page-starter-heading h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.05;
    margin: 0 0 0.75rem;
}
.block--page-starter--side .block__page-starter-heading h2 {
    font-size: 1.3rem;
    font-weight: 400;
    margin: 0;
    opacity: 0.75;
}

/* Stacked: title, subtitle, text one under another */
.block--page-starter--stacked { display: block; }
.block--page-starter--stacked .block__page-starter-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.block--page-starter--stacked .block__page-starter-stack h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.05;
    margin: 0;
}
.block--page-starter--stacked .block__page-starter-stack h2 {
    font-size: 1.3rem;
    font-weight: 400;
    margin: 0;
    opacity: 0.75;
}
.block--page-starter--stacked .block__page-starter-stack .block__body {
    margin-top: 0.5rem;
}

@media (max-width: 900px) {
    .block--page-starter--side .block__page-starter-columns {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ==========================================================================
   SECTION BLOCK — Design 1
   IMAGE | TEXT (or reversed). One box, no border/radius/shadow. Text side
   gets the selected background color. Box height follows the image. Text is
   vertically centered on its side. No extra outer padding.
   ========================================================================== */
.sblock--design1 {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.sblock--design1 .sblock__media {
    flex: 1 1 50%;
    min-width: 0;
    /* Center the media box within its column, so the image keeps its own
       natural ratio instead of stretching to a forced height that would
       crop it. */
    display: flex;
    align-items: center;
    justify-content: center;
}
.sblock--design1 .sblock__media img,
.sblock--design1 .sblock__media video {
    width: 100%;
    /* No forced height — the image keeps its aspect ratio. Never crops. */
    height: auto;
}
.sblock--design1 .sblock__text {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(2rem, 4vw, 3.5rem);
    box-sizing: border-box;
}
.sblock--variation-image_right_text_left.sblock--design1 .sblock__media { order: 2; }
.sblock--variation-image_right_text_left.sblock--design1 .sblock__text { order: 1; }

.sblock__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.1;
}
.sblock__subtitle {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 400;
    opacity: 0.85;
}
.sblock__body { font-size: 1.05rem; line-height: 1.6; }
.sblock__body p { margin: 0 0 1rem; }
.sblock__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   SECTION BLOCK — Design 2
   Full outer box with background color. Image and text centered inside.
   The image has vertical spacing above/below within the box. The box uses
   a minimum viewport height but grows if the content requires more space.
   ========================================================================== */
.sblock--design2 {
    --sbox: 50vh;            /* fallback = Design 2 default 'half' */
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: clamp(2rem, 5vw, 4rem);
}
/* The chosen section height caps how tall the image may render, so the box
   really is that height — the media no longer forces the box to grow. */
.sblock--height-half   { --sbox: 50vh;    min-height: 50vh;   }
.sblock--height-third  { --sbox: 33.33vh; min-height: 33.33vh;}
.sblock--height-quarter{ --sbox: 25vh;    min-height: 25vh;   }
.sblock--height-fifth  { --sbox: 20vh;    min-height: 20vh;   }

.sblock--design2 .sblock__media {
    flex: 1 1 50%;
    /* Deepen the media column to the section's actual height (so the tint /
       layout still reflects the chosen section height), and center the image
       inside it. */
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem) 0; /* visible spacing above/below the image */
    min-width: 0;
    min-height: 0;
}
/* Images show at their NATURAL size — the CSS never zooms or stretches them up.
   `max-width` / `max-height` only ever shrink an image so it fits the column
   and the chosen section height; the aspect ratio is always preserved via
   `object-fit: contain`, so nothing is ever cropped or distorted. */
.sblock--design2 .sblock__media img,
.sblock--design2 .sblock__media video {
    display: block;
    width: auto;                          /* natural pixel width — never upscaled */
    height: auto;
    max-width: 100%;                      /* never overflow the media column */
    max-height: calc(var(--sbox, 75vh) * 0.9); /* fits inside the chosen section height */
    object-fit: contain;                  /* safety: no cropping, no distortion */
}

/* Design 2 — admin-editable image size (max display width).
   'natural' (default) shows the image just as it is, up to the column width. */
.sblock--design2.sblock--media-size-small  .sblock__media img,
.sblock--design2.sblock--media-size-small  .sblock__media video { max-width: 360px; }
.sblock--design2.sblock--media-size-medium .sblock__media img,
.sblock--design2.sblock--media-size-medium .sblock__media video { max-width: 520px; }
.sblock--design2.sblock--media-size-large  .sblock__media img,
.sblock--design2.sblock--media-size-large  .sblock__media video { max-width: 720px; }

.sblock--design2 .sblock__text {
    flex: 1 1 50%;
    min-width: 0;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-sizing: border-box;
}
.sblock--variation-image_right_text_left.sblock--design2 .sblock__media { order: 2; }
.sblock--variation-image_right_text_left.sblock--design2 .sblock__text { order: 1; }

/* ==========================================================================
   SECTION BLOCK — Design 3
   Media is the full background. Text box is overlaid and positioned
   horizontally (left/center/right) and vertically (top/center/bottom).
   The media covers the area without distortion.
   ========================================================================== */
.sblock--design3 {
    position: relative;
    display: flex;
    min-height: 60vh;
    overflow: hidden;
}
.sblock--design3 .sblock__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.sblock--design3 .sblock__bg img,
.sblock--design3 .sblock__bg video {
    width: 100%;
    height: 100%;
    /* Whole image always visible, never cropped, never distorted.
       If the image's ratio differs from the section, it letterboxes
       (centered empty space top/bottom or left/right) instead of cutting. */
    object-fit: contain;
}
/* Media width: full vs contained (centered with margins).
   NOTE: `inset: 0 auto` (i.e. left:auto; right:auto) does NOT actually
   center an absolutely-positioned box via `margin:0 auto` — with both
   left/right auto, the browser falls back to the element's static
   position (effectively flush against one side), which is exactly what
   produced a visible one-sided gap here (the same "full-bleed but
   margin only on the right" symptom as the page-starter bug). Setting
   left:0/right:0 explicitly, with a fixed width and margin:auto,
   centers it correctly and symmetrically. */
.sblock--design3.sblock--media-contained .sblock__bg {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 90%;
    margin: 0 auto;
}


.sblock__overlay {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-height: 60vh;
    padding: clamp(1.5rem, 4vw, 3rem);
    box-sizing: border-box;
}

/* Horizontal position */
.sblock__overlay--h-left { justify-content: flex-start; }
.sblock__overlay--h-center { justify-content: center; }
.sblock__overlay--h-right { justify-content: flex-end; }

/* Vertical position */
.sblock__overlay--v-top { align-items: flex-start; }
.sblock__overlay--v-center { align-items: center; }
.sblock__overlay--v-bottom { align-items: flex-end; }

.sblock__text-box {
    width: 100%;
    max-width: 560px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-sizing: border-box;
}
.sblock__text-box .sblock__title,
.sblock__text-box .sblock__subtitle,
.sblock__text-box .sblock__body { color: #fff; }

/* ==========================================================================
   BUTTON
   ========================================================================== */
.block-button {
    margin-top: 1.5rem;
    display: flex;
}
.block-button--align-left { justify-content: flex-start; }
.block-button--align-center { justify-content: center; }
.block-button--align-right { justify-content: flex-end; }

.block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    border-style: solid;
    border-width: 0;
    transition: opacity 0.2s ease;
}
.block-button__link:hover { opacity: 0.85; }

/* Filled (fallback brand color if Admin leaves it blank) */
.block-button--filled .block-button__link {
    background-color: #BE1333;
    color: #fff;
    border: none;
}

/* Outline */
.block-button--outline .block-button__link {
    background-color: transparent;
    color: currentColor;
    border: 2px solid currentColor;
}

/* Text / arrow */
.block-button--text_arrow .block-button__link {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
}
.block-button--text_arrow .block-button__link::after {
    content: "→";
    font-size: 1.2em;
    line-height: 1;
}

/* ==========================================================================
   MOBILE / RESPONSIVE
   Design 1 & Design 2 stack to: TITLE → TEXT → IMAGE → BUTTON.
   No horizontal overflow, no clipping, no distortion.
   ========================================================================== */
@media (max-width: 768px) {
    .sblock--design1,
    .sblock--design2 {
        flex-direction: column;
        align-items: stretch;
    }
    /* Text first (title → subtitle → body → button), then media */
    .sblock--design1 .sblock__text,
    .sblock--design2 .sblock__text {
        order: -1;
        padding: 1.5rem 1.25rem;
    }
    .sblock--design1 .sblock__media,
    .sblock--design2 .sblock__media {
        order: 2;
        width: 100%;
        padding: 0;
    }
    .sblock--design1 .sblock__media img,
    .sblock--design1 .sblock__media video,
    .sblock--design2 .sblock__media img,
    .sblock--design2 .sblock__media video {
        height: auto;
        max-height: 70vh;
    }
    /* Mobile: Design 2 images keep their ratio (never huge, never cropped) —
       cap the display height to the viewport so the section stays compact. */
    .sblock--design2 .sblock__media img,
    .sblock--design2 .sblock__media video {
        max-height: 55vh;
    }
    /* Override the desktop reversed variations so the stack is always
       text-first on mobile. */
    .sblock--variation-image_right_text_left.sblock--design1 .sblock__media,
    .sblock--variation-image_right_text_left.sblock--design1 .sblock__text,
    .sblock--variation-image_right_text_left.sblock--design2 .sblock__media,
    .sblock--variation-image_right_text_left.sblock--design2 .sblock__text {
        order: auto;
    }
    .sblock--variation-image_right_text_left.sblock--design1 .sblock__text,
    .sblock--variation-image_right_text_left.sblock--design2 .sblock__text {
        order: -1;
    }
    .sblock--variation-image_right_text_left.sblock--design1 .sblock__media,
    .sblock--variation-image_right_text_left.sblock--design2 .sblock__media {
        order: 2;
    }

    /* Design 3: text box stays readable, full width of the screen */
    .sblock--design3,
    .sblock__overlay {
        min-height: 55vh;
    }
    .sblock__overlay {
        padding: 1.25rem;
    }
    .sblock__text-box {
        max-width: 100%;
        padding: 1.25rem;
    }
    .sblock--design3.sblock--media-contained .sblock__bg {
        width: 100%;
    }

    .block--media-size-medium .block__media,
    .block--media-size-small .block__media {
        width: 100%;
    }
}

/* ==========================================================================
   MOBILE IMAGE ZOOM — admin checkbox on Media / Page / Section blocks
   ("Zoom image on mobile"). Mirrors the film page hero (film_detail.css):
   on phones the photo is shown full-width and "zoomed in" — it fills about
   half the screen height and is cropped via object-fit: cover, instead of
   rendering at its natural ratio. Desktop rendering is completely unchanged.
   ========================================================================== */
@media (max-width: 560px) {
    /* Media blocks + Page blocks — the image lives inside .block__media.
       The optional admin percentage (--block-mobile-zoom) scales the image
       up on top of the hero-style crop; overflow: hidden clips it so the
       zoom never causes scrollbars or layout shifts. */
    .block--mobile-zoom .block__media {
        overflow: hidden;
    }
    .block--mobile-zoom .block__media img,
    .block--mobile-zoom .block__media video {
        width: 100%;
        height: 50vh;   /* fallback for browsers without small-viewport units */
        height: 50svh;  /* stable 50% of the visible screen (URL bar aware) */
        min-height: 0;
        object-fit: cover;
        object-position: center;
        transform: scale(calc(1 + var(--block-mobile-zoom, 0) / 100));
        transform-origin: center center;
    }

    /* Section block designs 1 & 2 — the image lives inside .sblock__media.
       Higher specificity + later in this file, so this wins over the
       natural-ratio / max-height mobile rules above. */
    .sblock--design1.sblock--mobile-zoom .sblock__media,
    .sblock--design2.sblock--mobile-zoom .sblock__media {
        padding: 0;
        overflow: hidden;
    }
    .sblock--design1.sblock--mobile-zoom .sblock__media img,
    .sblock--design1.sblock--mobile-zoom .sblock__media video,
    .sblock--design2.sblock--mobile-zoom .sblock__media img,
    .sblock--design2.sblock--mobile-zoom .sblock__media video {
        width: 100%;
        height: 50vh;   /* fallback for browsers without small-viewport units */
        height: 50svh;  /* stable 50% of the visible screen (URL bar aware) */
        max-height: none;
        object-fit: cover;
        object-position: center;
        transform: scale(calc(1 + var(--block-mobile-zoom, 0) / 100));
        transform-origin: center center;
    }

    /* Section block design 3 — the background image fills the section
       (object-fit: cover) and is zoomed in further by exactly the percentage
       chosen in the admin ("Mobile zoom amount") via --block-mobile-zoom.
       NOTHING zooms automatically — no extra zoom when the amount is 0.
       The section's overflow: hidden clips the scaled image, and the text
       box is a separate layer so it is never affected by the zoom. */
    .sblock--design3.sblock--mobile-zoom .sblock__bg img,
    .sblock--design3.sblock--mobile-zoom .sblock__bg video {
        object-fit: cover;
        object-position: center;
        transform: scale(calc(1 + var(--block-mobile-zoom, 0) / 100));
        transform-origin: center center;
    }
}