/* EDO-1219 — public homepage drought section (data-driven, per-observatory).
   The ReportCard reuses the existing .cdiReport / .cdiReportMap primitives from
   adapter.css; these rules add the two-column layout, the carousel behaviour, and
   an aspect-adaptive legend box. Everything is scoped under .dro* / .dro-card so
   the compat CDI/SPEI fallback is untouched. */

/* ── Two-column layout (EDO left / GDO right) ─────────────────────────────── */
.dro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
    margin: 30px 0;
}

@media (max-width: 1160px) {
    .dro-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Equal-height columns & cards ─────────────────────────────────────────────
   The grid row already stretches to its tallest cell, so cascade that height down
   through the column, its single-card / carousel slot, and the card itself. The
   map stays a fixed band and the body absorbs the slack, so a report with a tiny
   body ends up exactly as tall as its neighbours instead of collapsing. */
.dro-col {
    display: flex;
    flex-direction: column;
    /* Let the grid track shrink below the card's intrinsic width; without this a
       grid item's default min-width:auto can push the track past the container. */
    min-width: 0;
}

.dro-single,
.dro-carousel,
.dro-empty {
    flex: 1;
}

.dro-single {
    display: flex;
}

.dro-carousel {
    display: flex;
    flex-direction: column;
}

.dro-single > .dro-card,
.dro-slide > .dro-card {
    flex: 1;
}

.dro-card.cdiReport {
    height: 100%;
    /* Drop the shared 670px floor so the card hugs the map + its content instead
       of leaving a tall empty band under the CTA. */
    min-height: auto;
}

.dro-card .cdiReportMap {
    flex: 0 0 auto;
}

/* The body fills the leftover height; a growing .dro-cta-spacer pushes the
   divider + CTA to the bottom so the "Browse this map" buttons line up across
   cards. It's uncapped on purpose: a max-height would stop the push and let a
   tall card's slack fall *below* the CTA, un-anchoring it. Removing the shared
   670px floor (above) already keeps the gap to the real content difference. */
.dro-card .cdiReportItem {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* The shared .cdiReportItem is content-box with width:fit-content +
       min-width:-webkit-fill-available + 24px padding, so its padding rendered
       ~48px past the card's right edge and blew out the page's right margin once
       the columns stacked full-width. Pin it to the card and fold the padding in. */
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.dro-card .cdiReportItem .dro-cta-spacer {
    flex: 1 1 auto;      /* grows to push the divider + CTA to the card bottom */
    min-height: 10px;    /* keep a little breathing room under the text when snug */
}

/* The UA stylesheet gives hr { margin-inline: auto }, which in this flex column
   overrides align-items:stretch and collapses the divider to 0 width (invisible).
   Zero every margin so it stretches to the full card width and sits tight to the
   CTA (the gap below is controlled solely by .map-home-btn's margin-top). */
.dro-card .cdiReportItem .divider {
    margin: 0;
}

/* Tighten the gap between the divider and the "Browse this map" link (the shared
   rule uses 20px). */
.dro-card .map-home-btn {
    margin-top: 12px;
}

/* ── Empty state (structural placeholder, no text) ────────────────────────── */
.dro-empty {
    border: 1px dashed #d9d2c6;
    border-radius: 14px;
    padding: 46px 24px;
}

/* ── Carousel ─────────────────────────────────────────────────────────────────
   Slides are stacked in one grid cell (kept in layout via visibility, not
   display:none) so the track always reserves the height of the *tallest* slide.
   The carousel never jumps as it rotates and every slide renders at that shared
   height. The JS only toggles .is-active, so it's unaffected by the swap. */
.dro-track {
    position: relative;
    flex: 1;
    display: grid;
    min-height: 0;
}

/* Fade + zoom on advance: the incoming slide fades in from a 96.5% scale over 1s.
   The delayed `visibility` keeps the outgoing slide in layout for the full fade —
   a bare opacity swap flips it hidden instantly and cuts the crossfade short. */
.dro-slide {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.965);
    transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 1s cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 0s linear 1s;
}

.dro-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .dro-slide,
    .dro-slide.is-active {
        transition: none;
        transform: none;
    }
}

.dro-progress {
    height: 5px;
    background: #eef0f3;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 16px;
}

.dro-progress-fill {
    display: block;
    height: 100%;
    background: #faa73e;
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
}

.dro-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.dro-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dro-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d9d2c6;
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}

.dro-dot.is-active {
    width: 26px;
    background: #faa73e;
}

/* ── ReportCard additions (adaptive legend) ───────────────────────────────── */
/* Aspect-adaptive legend box: bounds both dimensions so vertical ramps (CDI
   110x82 / 149x198) and very wide ones (HWI2A 905x82) both fit the corner. */
.dro-card .cdiReportLegend {
    max-width: 46%;
    padding: 3px;
    line-height: 0;
}

.dro-card .cdiReportLegend img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 120px;
    display: block;
}