/* ===================================================================
   INDUSTRIES PAGE — Tabbed bento layout
   Consolidates 5 industry sections into one interactive tabbed section.
   Pure CSS switching via radio inputs, JS fallback for keyboard nav.
   =================================================================== */

/* ── Hero overrides ── */

/* Hide lime accent lines + atmospheric gradients from hero */
.tr-page-hero::after,
.tr-page-hero::before {
    display: none;
}

/* Remove bottom border — tabs section provides its own visual break */
.tr-page-hero {
    border-bottom: none;
    padding-bottom: 80px;
}

/* Standard hero spacing: eyebrow 20px → H1 20px → sub 36px → CTA */
.tr-page-hero .mv-eyebrow {
    margin-bottom: 20px;
}

/* Constrain H1 width to match subtitle proportions */
.tr-page-hero .tr-h1 {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

/* Widen subtitle slightly for better balance with H1 */
.tr-page-hero .tr-page-hero__sub {
    max-width: 600px;
}

/* Indigo eyebrow */
.tr-eyebrow--indigo {
    color: var(--mv-color-indigo);
    background: var(--tr-lav-soft);
}

/* Tighten gap: tabs 80px bottom → CTA 0 top = 80px total */
.tr-ind-tabs + .tr-cta-band {
    padding-top: 0;
}

/* ── Tab section container — evergreen file cabinet ── */

.tr-ind-tabs {
    padding: 0 0 80px;
    position: relative;
}

.tr-ind-tabs__inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
}


/* ── Hidden radio inputs ── */

.tr-ind-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* ── Tab bar — file cabinet tabs ── */

.tr-ind-bar {
    display: flex;
    gap: 0;
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}

.tr-ind-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    flex: 1;
    background: #a3c5a6;
    border: 1px solid rgba(13, 44, 17, 0.12);
    border-bottom: 1px solid rgba(13, 44, 17, 0.15);
    border-radius: 16px 16px 0 0;
    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;
    margin-bottom: -1px;
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-body-sm);
    font-weight: var(--tr-weight-heading);
    color: var(--mv-color-evergreen);
    text-align: center;
    /* Inner shadow — tab appears recessed / behind the active one */
    box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.06);
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
}

/* No gap — files sit flush against each other */
.tr-ind-trigger + .tr-ind-trigger {
    margin-left: 0;
    border-left: none;
}

/* No accent line */
.tr-ind-trigger::before {
    display: none;
}

/* ── Hover state ── */
.tr-ind-trigger:hover {
    color: var(--mv-color-evergreen);
    background: #b2cfb5;
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.04);
}

/* ── Active/selected state — tab pops forward, inner shadow removed ── */
#ind-financial:checked  ~ .tr-ind-bar .tr-ind-trigger:nth-child(1),
#ind-healthcare:checked ~ .tr-ind-bar .tr-ind-trigger:nth-child(2),
#ind-realestate:checked ~ .tr-ind-bar .tr-ind-trigger:nth-child(3),
#ind-legal:checked      ~ .tr-ind-bar .tr-ind-trigger:nth-child(4),
#ind-remote:checked     ~ .tr-ind-bar .tr-ind-trigger:nth-child(5) {
    background: var(--mv-color-celadon);
    border-color: rgba(13, 44, 17, 0.12);
    border-bottom-color: var(--mv-color-celadon);
    box-shadow: none;
    color: var(--mv-color-evergreen);
    font-weight: var(--tr-weight-bold);
}

/* ── Panel container — evergreen file body ── */

.tr-ind-panels {
    position: relative;
    background: var(--mv-color-celadon);
    border: 1px solid rgba(13, 44, 17, 0.12);
    border-radius: 0 0 14px 14px;
    padding: 32px;
}

.tr-ind-panel {
    display: none;
}

/* Active panel — via radio :checked */
#ind-financial:checked  ~ .tr-ind-panels .tr-ind-panel--financial,
#ind-healthcare:checked ~ .tr-ind-panels .tr-ind-panel--healthcare,
#ind-realestate:checked ~ .tr-ind-panels .tr-ind-panel--realestate,
#ind-legal:checked      ~ .tr-ind-panels .tr-ind-panel--legal,
#ind-remote:checked     ~ .tr-ind-panels .tr-ind-panel--remote {
    display: block;
    animation: trPanelFadeIn 0.3s ease both;
}

@keyframes trPanelFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ===================================================================
   BENTO GRID — asymmetric card layout within each panel
   =================================================================== */

.tr-ind-bento {
    display: grid;
    gap: 16px;
}

/* ── Layout A: callout RIGHT (Financial, Real Estate, Remote-First) ── */

.tr-ind-panel--financial .tr-ind-bento,
.tr-ind-panel--realestate .tr-ind-bento,
.tr-ind-panel--remote .tr-ind-bento {
    grid-template-columns: 1.1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "intro    intro    callout"
        "problems solutions callout";
}

/* ── Layout B: callout LEFT (Healthcare, Legal) ── */

.tr-ind-panel--healthcare .tr-ind-bento,
.tr-ind-panel--legal .tr-ind-bento {
    grid-template-columns: 1fr 1fr 1.1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "callout intro    intro"
        "callout problems solutions";
}

/* ── Grid area assignments ── */

.tr-ind-intro    { grid-area: intro; }
.tr-ind-problems { grid-area: problems; }
.tr-ind-solutions { grid-area: solutions; }
.tr-ind-callout  { grid-area: callout; }

/* ===================================================================
   BENTO CARDS — standardized cell styling
   =================================================================== */

/* ── Shared card base — celadon bg, evergreen wash on hover ── */

.tr-ind-intro,
.tr-ind-problems,
.tr-ind-solutions,
.tr-ind-callout {
    padding: 28px;
    background: transparent;
    border: 1px solid rgba(13, 44, 17, 0.20);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Evergreen wash overlay — height animates on hover */
.tr-ind-intro::before,
.tr-ind-problems::before,
.tr-ind-solutions::before,
.tr-ind-callout::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(180deg, rgba(251, 252, 239, 0.10), rgba(251, 252, 239, 0.10));
    pointer-events: none;
    border-radius: 14px 14px 0 0;
    z-index: 0;
    transition: height 0.3s ease;
}

.tr-ind-intro:hover,
.tr-ind-problems:hover,
.tr-ind-solutions:hover,
.tr-ind-callout:hover {
    border-color: rgba(13, 44, 17, 0.30);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.tr-ind-intro:hover::before,
.tr-ind-problems:hover::before,
.tr-ind-solutions:hover::before,
.tr-ind-callout:hover::before {
    height: 100%;
}

/* ── Intro card ── */

.tr-ind-intro {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tr-ind-intro__headline {
    font-family: var(--tr-font-display);
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: var(--tr-weight-bold);
    color: var(--mv-color-evergreen);
    line-height: var(--tr-leading-h4);
    margin-top: 0;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.tr-ind-intro__body {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin: 0;
    max-width: 640px;
    position: relative;
    z-index: 1;
}

.tr-ind-intro__reg {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-sm);
    color: var(--mv-color-indigo);
    margin-top: 20px;
    padding-top: 16px;
    letter-spacing: 0.02em;
    border-top: 1px solid rgba(13, 44, 17, 0.12);
    position: relative;
    z-index: 1;
}

/* ── Shared list card elements ── */

.tr-ind-card-label {
    display: block;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-wide);
    color: var(--mv-color-indigo);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.tr-ind-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tr-ind-list li {
    padding: 9px 0 9px 22px;
    position: relative;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-md);
    line-height: var(--tr-leading-label);
    color: var(--tr-ev-strong);
    z-index: 1;
}

.tr-ind-list li + li {
    border-top: 1px solid rgba(13, 44, 17, 0.10);
}

.tr-ind-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(13, 44, 17, 0.3);
}

/* ── Problems card ── */

/* Problems card label — uses base grey color, no override needed */

/* Problems + solutions: identical styling */
.tr-ind-problems .tr-ind-list li::before {
    background: var(--mv-color-indigo);
}

.tr-ind-solutions .tr-ind-list li::before {
    background: var(--mv-color-evergreen);
}

.tr-ind-problems .tr-ind-list li,
.tr-ind-solutions .tr-ind-list li {
    font-weight: 500;
    color: var(--mv-color-evergreen);
}

/* ── Callout card (sidebar) ── */

.tr-ind-callout {
    display: flex;
    flex-direction: column;
}

/* Callout card — no label color override, uses base grey */

.tr-ind-callout__title {
    font-family: var(--tr-font-display);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: var(--tr-weight-bold);
    line-height: var(--tr-leading-h4);
    color: var(--mv-color-evergreen);
    margin-top: 0;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.tr-ind-callout__note {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-md);
    line-height: var(--tr-leading-body-lg);
    color: var(--tr-text-tertiary);
    margin: 0;
    position: relative;
    z-index: 1;
}




/* ===================================================================
   MOBILE ACCORDION — replaces tab bar on ≤768px
   =================================================================== */

.tr-ind-accordion {
    display: none;
}

/* ===================================================================
   RESPONSIVE — Tablet (≤1024px)
   =================================================================== */

@media (max-width: 1024px) {
    .tr-ind-trigger {
        padding: 14px 16px;
        font-size: var(--tr-size-body-md);
    }

    .tr-ind-bento {
        gap: 16px;
    }

    /* Simplify to 2-column on tablet */
    .tr-ind-panel--financial .tr-ind-bento,
    .tr-ind-panel--realestate .tr-ind-bento,
    .tr-ind-panel--remote .tr-ind-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "intro    intro"
            "problems solutions"
            "callout  callout";
    }

    .tr-ind-panel--healthcare .tr-ind-bento,
    .tr-ind-panel--legal .tr-ind-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "intro    intro"
            "problems solutions"
            "callout  callout";
    }

}

@keyframes trAccordionReveal {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===================================================================
   RESPONSIVE — Mobile (≤768px)
   =================================================================== */

@media (max-width: 768px) {
    /* Hide desktop tab bar + panels */
    .tr-ind-bar { display: none; }
    .tr-ind-panels { display: none; }

    /* ── Stacked file sections ── */
    .tr-ind-accordion {
        display: flex;
        flex-direction: column;
        gap: 28px; /* ivory shows between each file */
    }

    /* Each item is its own file — always open, no toggle */
    .tr-ind-acc-item {
        border: none;
        border-radius: 0 0 14px 14px;
        overflow: hidden;
        position: relative;
    }
    .tr-ind-acc-item[open] { display: block; }
    .tr-ind-acc-item:not([open]) { display: block; }
    /* Force all details open visually */
    .tr-ind-acc-item > .tr-ind-acc-content {
        display: block !important;
    }

    .tr-ind-acc-item:first-child { border-top: none; }

    /* ── Tab — positioned across the width per item ── */
    .tr-ind-acc-summary {
        display: block;
        width: fit-content;
        padding: 12px 24px;
        margin: 0;
        font-family: var(--tr-font-display);
        font-size: var(--tr-size-body-sm);
        font-weight: var(--tr-weight-heading);
        white-space: nowrap;
        color: var(--mv-color-evergreen);
        background: #a3c5a6;
        border: 1px solid rgba(13, 44, 17, 0.12);
        border-bottom: none;
        border-radius: 16px 16px 0 0;
        cursor: default;
        list-style: none;
        user-select: none;
        letter-spacing: var(--tr-tracking-h5);
    }

    /* Remove chevron arrow */
    .tr-ind-acc-summary::-webkit-details-marker { display: none; }
    .tr-ind-acc-summary::marker { content: ''; }
    .tr-ind-acc-summary::after { display: none; }

    /* Remove hover effects — not interactive on mobile */
    .tr-ind-acc-summary:hover {
        color: var(--mv-color-evergreen);
        background: #a3c5a6;
    }
    .tr-ind-acc-item[open] .tr-ind-acc-summary {
        color: var(--mv-color-evergreen);
    }

    /* Hide the 01-05 numbers in mobile tabs */
    .tr-ind-acc-summary .tr-ind-num { display: none; }

    /* ── Tab horizontal positioning — 0% → 25% → 50% → 75% → 100% ── */
    .tr-ind-acc-item:nth-child(1) .tr-ind-acc-summary {
        margin-left: 0;
    }
    .tr-ind-acc-item:nth-child(2) .tr-ind-acc-summary {
        margin-left: 25%;
        transform: translateX(-25%);
    }
    .tr-ind-acc-item:nth-child(3) .tr-ind-acc-summary {
        margin-left: 50%;
        transform: translateX(-50%);
    }
    .tr-ind-acc-item:nth-child(4) .tr-ind-acc-summary {
        margin-left: 75%;
        transform: translateX(-75%);
    }
    .tr-ind-acc-item:nth-child(5) .tr-ind-acc-summary {
        margin-left: auto;
        margin-right: 0;
        float: right;
    }
    /* Clear float for content */
    .tr-ind-acc-item:nth-child(5) .tr-ind-acc-content {
        clear: both;
    }

    /* ── File body — celadon container ── */
    .tr-ind-acc-content {
        padding: 24px 16px;
        background: var(--mv-color-celadon);
        border: 1px solid rgba(13, 44, 17, 0.12);
        border-radius: 0 0 14px 14px;
        animation: none;
    }
    /* First item: round top-right since tab is left-aligned */
    .tr-ind-acc-item:nth-child(1) .tr-ind-acc-content {
        border-radius: 0 14px 14px 14px;
    }
    /* Last item: round top-left since tab is right-aligned */
    .tr-ind-acc-item:nth-child(5) .tr-ind-acc-content {
        border-radius: 14px 0 14px 14px;
    }
    /* Middle items: round both top corners except where tab sits */
    .tr-ind-acc-item:nth-child(2) .tr-ind-acc-content,
    .tr-ind-acc-item:nth-child(3) .tr-ind-acc-content,
    .tr-ind-acc-item:nth-child(4) .tr-ind-acc-content {
        border-radius: 14px 14px 14px 14px;
    }

    /* Stack bento to single column */
    .tr-ind-acc-content .tr-ind-bento {
        grid-template-columns: 1fr;
        grid-template-areas:
            "intro"
            "problems"
            "solutions"
            "callout";
    }

    .tr-ind-callout { flex-direction: column; }
    .tr-ind-intro { padding: 24px 20px; }
    .tr-ind-problems,
    .tr-ind-solutions { padding: 20px 18px; }
    .tr-ind-callout { padding: 24px 20px; }
}

/* ===================================================================
   ACCESSIBILITY
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
    .tr-ind-panel {
        transition: none;
    }
}

/* ===================================================================
   RESPONSIVE — Ultra-small mobile (≤480px)
   =================================================================== */

@media (max-width: 480px) {
    .tr-ind-acc-content {
        padding: 20px 12px;
    }

    .tr-ind-intro,
    .tr-ind-problems,
    .tr-ind-solutions,
    .tr-ind-callout {
        padding: 20px 16px;
    }
}