/*
 * Homepage Hero — the ONE layout/typography policy for both the public page
 * and the admin 1366/1024/820/390px device previews.
 *
 * Responsive rules use the width of .agri-hero-responsive-root (container
 * queries), not the outer admin viewport. Never create per-device line breaks.
 */
.agri-hero-responsive-root { container: agribank-hero / inline-size; }
/*
 * Critical: the public hero is a flex row. An inline-size query container
 * has no intrinsic preferred width, so its flex base may collapse to 0 on
 * narrow mobile viewports (letters stack vertically). Explicitly occupy
 * the full flex row. Do not apply this to admin's fixed-width preview.
 */
.hero-section > .agri-hero-responsive-root {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.agri-hero-grid {
    display: grid;
    /* Use the wide desktop canvas without hugging screen edges. */
    width: calc(100% - clamp(32px, 5cqw, 96px));
    max-width: 1600px;
    margin-inline: auto;
    /* One third for editable copy, two thirds for the activity slider. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-areas: "eyebrow ." "copy media";
    grid-template-rows: auto auto;
    column-gap: clamp(22px, 3.2cqw, 50px);
    align-items: stretch;
}
.agri-hero-eyebrow { grid-area: eyebrow; min-width: 0; padding-bottom: 16px; }
.agri-hero-copy { grid-area: copy; min-width: 0; }
.agri-hero-heading {
    /* A narrower copy column needs a fluid heading, not a fixed desktop size. */
    font-size: clamp(1.9rem, 2.65cqw, 3rem);
    line-height: 1.17;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
    text-wrap: balance;
    max-inline-size: 27ch;
}
.agri-hero-description {
    /* Word-style justify for the editable intro, shared by live and preview. */
    text-align: justify;
    text-align-last: start;
    text-justify: inter-word;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    line-height: 1.55;
}
.agri-hero-responsive-root[data-text-flow="auto"] .agri-hero-heading,
.agri-hero-responsive-root[data-text-flow="auto"] .agri-hero-description {
    white-space: normal;
}
.agri-hero-responsive-root[data-text-flow="manual"] .agri-hero-heading,
.agri-hero-responsive-root[data-text-flow="manual"] .agri-hero-description {
    white-space: pre-line;
}
.agri-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.agri-hero-actions > * { max-width: 100%; white-space: normal; }
.agri-hero-media { grid-area: media; position: relative; min-width: 0; min-height: 0; }
.agri-hero-media-fill { position: absolute; inset: 0; min-height: 0; overflow: hidden; border-radius: 16px; }
/* Slider frame and carousel must have the same width as their grid cell. */
.agri-hero-media-fill .hero-carousel {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    box-sizing: border-box;
}
.agri-hero-media-fill .carousel-inner {
    width: 100%;
    margin-inline: 0;
}
.agri-hero-media-fill .hero-carousel,
.agri-hero-media-fill .carousel-inner,
.agri-hero-media-fill .carousel-item { height: 100%; }
.agri-hero-media-fill .agri-hero-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.agri-hero-caption {
    position: absolute;
    z-index: 2;
    bottom: 12px;
    /* Shrink-wrap the actual text: no anonymous line boxes around a block
       paragraph, and never stretch to the old fixed 74% image width. */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max-content;
    max-width: 70%;
    box-sizing: border-box;
    max-height: 48%;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #fff;
    background: rgba(2,6,23,.60);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    /* Balanced and compact padding above and below the actual text. */
    padding: 5px 9px;
    box-shadow: 0 4px 12px rgba(0,0,0,.14);
    font-size: clamp(.76rem, 1.1cqw, .9rem);
    line-height: 1.32;
    text-align: center;
    white-space: pre-line;
    overflow-wrap: anywhere;
    text-wrap: balance;
    scrollbar-width: thin;
}
.agri-hero-caption:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; }

/* Container-size, NOT admin page viewport size, controls both renderers. */
@container agribank-hero (min-width: 1200px) {
    /* Keep two long CTAs legible inside the one-third copy column. */
    .agri-hero-actions { flex-direction: column; align-items: flex-start; }
}
@container agribank-hero (max-width: 1199px) {
    /* Tablet landscape: maintain balanced copy/media columns. */
    .agri-hero-grid {
        max-width: 960px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .agri-hero-heading { font-size: clamp(1.7rem, 3cqw, 2.28rem); }
    .agri-hero-actions > * { font-size: .9rem; }
}
@container agribank-hero (max-width: 991px) {
    .agri-hero-grid {
        max-width: 720px;
        grid-template-columns: minmax(0,1fr);
        grid-template-areas: "eyebrow" "copy" "media";
    }
    .agri-hero-heading { font-size: clamp(1.8rem, 4.5cqw, 2.65rem); }
    .agri-hero-media {
        margin-top: 28px;
        width: 100%;
        justify-self: stretch;
        min-height: 300px;
        aspect-ratio: 16 / 9;
    }
    /*
     * AOS fade-left translates the entire picture pane by 100px until the
     * entrance animation completes. On stacked screens that makes the slider
     * appear offset or clipped even though the grid itself is centered.
     * Keep desktop animation, but never displace the picture on narrow screens.
     */
    .agri-hero-media[data-aos="fade-left"] {
        transform: none !important;
        opacity: 1 !important;
    }
}
@container agribank-hero (max-width: 767px) {
    .agri-hero-grid { max-width: calc(100% - 24px); }
    .agri-hero-media { min-height: 230px; aspect-ratio: 16 / 10; }
    .agri-hero-caption { bottom: 8px; max-width: 72%; max-height: 55%; padding: 4px 8px; font-size: .78rem; }
}
@container agribank-hero (max-width: 575px) {
    .agri-hero-heading { font-size: clamp(1.6rem, 6.8cqw, 2.15rem); }
    .agri-hero-actions { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; }
    .agri-hero-actions > * { width: 100%; text-align: center; }
    .agri-hero-media { margin-top: 22px; min-height: 190px; aspect-ratio: 16 / 10; }
}

/* Large tablet portrait: never squeeze the copy against the slider. */
@media (orientation: portrait) and (min-width: 992px) and (max-width: 1199.98px) {
    .agri-hero-responsive-root:not([data-size]) .agri-hero-grid {
        grid-template-columns: minmax(0,1fr);
        grid-template-areas: "eyebrow" "copy" "media";
        max-width: 800px;
    }
    .agri-hero-responsive-root:not([data-size]) .agri-hero-media {
        margin-top: 28px;
        min-height: 320px;
        aspect-ratio: 16 / 9;
    }
}