/* =====================================================================
   The Courtroom Bar
   ---------------------------------------------------------------------
   Same shape as the Infinity Pool — full-bleed slideshow banner, card
   overlapping its lower edge, breadcrumbs running behind it, info cards,
   gallery, CTA, collapsible menu — but warmer: oak and brass rather than
   the pool's white and sky.

   The drinks-menu rows inside the collapsible section still come from
   grand-ballroom-style.css (the gb-* classes); everything else is cb-*.
   ===================================================================== */
:root {
    --cb-navh:   126px;    /* height of the fixed site navbar */
    --cb-ground: #f7f3ed;   /* page ground, warmer than --cream-light */
    --cb-panel:  #ffffff;
    --cb-deep:   #1c1610;   /* the oak the room is panelled in */
}

/* ---------- Shared type ---------- */
.cb-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 0.85rem;
}

.cb-section-title {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    color: var(--text-dark);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.15;
    margin: 0 0 1.25rem;
}

.cb-section-sub {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 620px;
    margin: 0 auto;
}

/* ---------- Scroll reveal ---------- */
.cb-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.cb-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .cb-reveal { opacity: 1; transform: none; transition: none; }
}

@keyframes cb-rise {
    from { opacity: 0; transform: translateY(34px); }
    to   { opacity: 1; transform: none; }
}
@keyframes cb-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(7px); }
}

/* =====================================================================
   Banner + card
   ===================================================================== */
.cb-banner {
    position: relative;
    background: var(--cb-ground);
    /* The global sheet gives every <header> min-height:100vh. */
    min-height: 0;
    padding: 0 0 clamp(2rem, 4vw, 3.25rem);
    isolation: isolate;
    /* One number drives the card's overlap and where the scroll cue sits. */
    --cb-card-overlap: 5rem;
    --cb-crumb-h: 3rem;
}

.cb-banner_media {
    position: relative;
    margin: 0;
    width: 100%;
    height: 88vh;
    min-height: 560px;
    overflow: hidden;
}

/* Sizing and the darkening filter come from hero-about-us-style.css, which
   assumes a 100vh header. Scope them back to this banner. */
.cb-banner .header_bg_swiper,
.cb-banner .header_bg_swiper .swiper-slide { width: 100%; height: 100%; }
.cb-banner .header_bg_swiper { position: absolute; inset: 0; }
.cb-banner .header_bg_swiper img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block !important;
    /* A short, neutral darkening — not a colour cast — so the transparent
       navbar and its white logo stay legible over a bright slide. */
    filter: brightness(0.86);
}

/* The breadcrumb strip runs full width directly under the banner, and the
   card is pulled up over it, so it shows either side. Adding the strip's
   height keeps the card's overlap onto the photograph exact. */
.cb-banner .breadcrumbs {
    position: relative;
    z-index: 1;
    min-height: var(--cb-crumb-h);
    display: flex;
    align-items: center;
    background: var(--extra-light);
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cb-banner .breadcrumbs_inner {
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
}
.cb-banner .breadcrumbs a { color: var(--text-dark); font-weight: 600; }
.cb-banner .breadcrumbs a:hover { color: var(--primary-color); }
.cb-banner .breadcrumbs .current { color: var(--text-light); }

.cb-banner_card {
    position: relative;
    z-index: 2;
    /* 620px, not the pool's 680: "Home > Facilities > Courtroom Bar" is a
       longer trail, and the card has to clear its right edge at every width
       down to the 1200px breakpoint below. At 620 the clearance is ~25px. */
    max-width: min(620px, calc(100% - 2.5rem));
    margin: calc((var(--cb-card-overlap) + var(--cb-crumb-h)) * -1) auto 0;
    padding: clamp(2rem, 4vw, 3rem);
    background: var(--cb-panel);
    border-top: 2px solid var(--primary-color);
    box-shadow: 0 24px 60px rgba(28, 22, 16, 0.16);
    text-align: center;
    animation: cb-rise 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cb-banner_title {
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    color: var(--text-dark);
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 1.08;
    margin: 0 0 1.4rem;
}

.cb-banner_card p,
.cb-banner_copy {
    color: var(--text-light);
    line-height: 1.85;
    margin: 0 0 1.75rem;
}
.cb-banner_copy p { margin: 0 0 1rem; }
.cb-banner_copy p:last-child { margin-bottom: 0; }

/* The scroll cue — sits on the photograph, just above the card. */
.cb-banner_scroll {
    position: absolute;
    left: 50%;
    bottom: calc(var(--cb-card-overlap) + 2.5rem);
    z-index: 3;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: transparent;
    color: var(--white);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
    animation: cb-bob 2.4s ease-in-out infinite;
}
.cb-banner_scroll:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
    .cb-banner_scroll { animation: none; transform: translateX(-50%); }
    .cb-banner_card { animation: none; }
}

/* =====================================================================
   The feature strip — deliberately not pills. A divided row, read the
   way a case summary is read, and nothing in it is clickable.
   ===================================================================== */
.cb-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    padding: 1.25rem 0 0;
    margin: 0;
    border-top: 1px solid rgba(28, 22, 16, 0.1);
}

.cb-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 128px;
    min-width: 108px;
    padding: 0.35rem 0.85rem;
    color: var(--text-dark);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-align: center;
}
/* Hairlines between, not around — no rule before the first or after wrapping. */
.cb-feature + .cb-feature { border-left: 1px solid rgba(28, 22, 16, 0.12); }
.cb-feature i { font-size: 1.25rem; color: var(--primary-color); }

/* =====================================================================
   Info cards
   ===================================================================== */
.cb-info {
    background: var(--cb-ground);
    padding: clamp(1.25rem, 3vw, 2.25rem) 1.25rem clamp(3.5rem, 8vw, 6rem);
}

.cb-info_inner {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
}

.cb-info_card {
    box-shadow: rgba(10, 34, 64, 0.06) 0px 10px 28px;
    text-align: center;
    background: var(--white);
    padding: 2rem 2rem 2.25rem;
    border-radius: 8px;
    border: 1px solid var(--primary-color);
}
.cb-info_card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(28, 22, 16, 0.12);
}

.cb-info_title {
    font-size: 1.4rem;
    color: var(--text-dark);
    font-weight: 600;
    margin: 0 0 1.5rem;
}

.cb-info_list { padding: 0; margin: 0; }
.cb-info_list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(28, 22, 16, 0.08);
}
.cb-info_list li:last-child { border-bottom: none; }

.cb-info_day  { color: var(--text-dark); font-size: 0.95rem; }
.cb-info_time { color: var(--text-light); font-size: 0.9rem; text-align: right; }

/* =====================================================================
   The Exhibits — the gallery's twist
   ---------------------------------------------------------------------
   Panels stand closed as narrow slats with the exhibit number set
   vertically, like doors along a corridor. One is open at a time;
   courtroom.js moves the .is-open class on hover, focus or tap, so the
   whole thing keys off a single class and works without a pointer.
   ===================================================================== */
.cb-exhibits {
    background: var(--cb-deep);
    padding: clamp(3.5rem, 8vw, 6rem) 1.25rem;
}

.cb-exhibits_head {
    max-width: var(--max-width);
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.cb-exhibits_head .cb-section-title { color: #f5efe6; margin-bottom: 0; }

.cb-exhibits_rail {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    gap: 0.6rem;
    height: clamp(360px, 52vh, 560px);
}
/* `display: flex` above beats the browser's default [hidden] rule, so without
   this the two views render stacked instead of one replacing the other. The
   same trap applies to every element here toggled with the hidden attribute. */
.cb-exhibits_rail[hidden] { display: none; }

.cb-exhibit {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    overflow: hidden;
    background: #241c14;
    cursor: pointer;
    font-family: inherit;
    isolation: isolate;
    transition: flex-grow 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.cb-exhibit.is-open { flex-grow: 5; }

.cb-exhibit img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    display: block !important;
    filter: brightness(0.55) saturate(0.85);
    transform: scale(1.04);
    transition: filter 0.7s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.cb-exhibit.is-open img { filter: brightness(0.92) saturate(1); transform: scale(1); }

.cb-exhibit_plate {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 0.8rem;
    padding: 1.1rem 1rem;
    background: linear-gradient(180deg, transparent 0%, rgba(28, 22, 16, 0.9) 100%);
    text-align: left;
}

.cb-exhibit_no {
    /* Closed, the slat is too narrow for horizontal text, so the number
       stands on its side the way a spine label does. */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--primary-color);
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    white-space: nowrap;
}
.cb-exhibit.is-open .cb-exhibit_no { writing-mode: horizontal-tb; transform: none; }

.cb-exhibit_label {
    color: #f5efe6;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.5s ease 0.15s, max-width 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.cb-exhibit.is-open .cb-exhibit_label { max-width: 32ch; opacity: 1; }

.cb-exhibit:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .cb-exhibit, .cb-exhibit img, .cb-exhibit_label { transition: none; }
}

/* ---------------------------------------------------------------------
   The view switch — two plain tabs at the foot of the section, not
   form buttons. The active one carries a brass rule.
   --------------------------------------------------------------------- */
.cb-viewswitch {
    display: flex;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.cb-viewswitch_btn {
    position: relative;
    padding: 0.35rem 0.25rem 0.7rem;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 0.82rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(245, 239, 230, 0.5);
    cursor: pointer;
    transition: color 0.35s ease;
}
.cb-viewswitch_btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.cb-viewswitch_btn:hover { color: rgba(245, 239, 230, 0.85); }
.cb-viewswitch_btn.is-active { color: #f5efe6; }
.cb-viewswitch_btn.is-active::after { transform: scaleX(1); }
.cb-viewswitch_btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; }

/* Courtroom Bar Menu */
.cb-menu {
    background: var(--cb-deep);
    padding: 0 1.25rem clamp(3.5rem, 8vw, 6rem);
    color: #f5efe6;
}
.cb-menu[hidden] { display: none; }

.cb-menu_inner { max-width: var(--max-width); margin: 0 auto; }

/* Category Bar */
.cb-catbar {
    position: sticky;
    top: var(--cb-navh, 126px);
    z-index: 5;
    margin: 0 -1.25rem;
    background: rgba(22, 17, 12, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(196, 156, 116, 0.28);
}

.cb-catbar_inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.55rem 1.25rem;
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.cb-catbar_inner::-webkit-scrollbar { display: none; }

.cb-catbar_btn {
    flex: 0 0 auto;
    padding: 0.55rem 1.05rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    font-family: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(245, 239, 230, 0.55);
    white-space: nowrap;
    cursor: pointer;
    transition: 0.3s;
}
.cb-catbar_btn:hover { color: #f5efe6; border-color: rgba(196, 156, 116, 0.4); }
.cb-catbar_btn.is-active {
    color: var(--cb-deep);
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.cb-catbar_btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

.cb-menu_panel { animation: cb-menu-in 0.45s ease both; }
.cb-menu_panel[hidden] { display: none; }

@keyframes cb-menu-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.cb-menu_head {
    text-align: center;
    padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(1.75rem, 4vw, 2.75rem);
    border-top: 1px solid rgba(196, 156, 116, 0.28);
}

.cb-menu_title {
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    color: #f5efe6;
    font-weight: 300;
    letter-spacing: 0.04em;
    margin: 0 0 1rem;
}

.cb-menu_intro {
    color: rgba(245, 239, 230, 0.62);
    font-size: 0.95rem;
    line-height: 1.8;
    max-width: 620px;
    margin: 0 auto;
}

/* Standing note under every list */
.cb-menu_note {
    margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(196, 156, 116, 0.28);
    max-width: 62ch;
    text-align: center;
    color: rgba(245, 239, 230, 0.55);
    font-size: 0.85rem;
    font-style: italic;
    letter-spacing: 0.03em;
}

.cb-menu_empty {
    text-align: center;
    color: rgba(245, 239, 230, 0.45);
    font-size: 0.9rem;
    line-height: 1.8;
    padding-bottom: 2rem;
}

/* Sub-Category Tabs */
.cb-subtabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
    margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}

.cb-subtab {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(196, 156, 116, 0.3);
    border-radius: 2px;
    background: rgba(245, 239, 230, 0.03);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.cb-subtab:hover {
    border-color: rgba(196, 156, 116, 0.75);
    background: rgba(245, 239, 230, 0.07);
    transform: translateY(-2px);
}
.cb-subtab:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }

.cb-subtab_letter {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(196, 156, 116, 0.55);
    border-radius: 50%;
    color: var(--primary-color);
    font-size: 0.78rem;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cb-subtab_name {
    color: rgba(245, 239, 230, 0.7);
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

/* Lit. */
.cb-subtab.is-active {
    border-color: var(--primary-color);
    background: rgba(196, 156, 116, 0.12);
}
.cb-subtab.is-active .cb-subtab_letter {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--cb-deep);
}
.cb-subtab.is-active .cb-subtab_name { color: #f5efe6; }

.cb-subsection { animation: cb-menu-in 0.4s ease both; }
.cb-subsection[hidden] { display: none; }

.cb-subsection_desc {
    color: rgba(245, 239, 230, 0.55);
    font-size: 0.92rem;
    line-height: 1.8;
    max-width: 68ch;
    margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
    text-align: center;
}

.cb-group { padding-bottom: clamp(2rem, 4vw, 3rem); }

.cb-group_head { margin-bottom: 1.25rem; }

.cb-group_title {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: #f5efe6;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

.cb-group_letter {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(196, 156, 116, 0.55);
    border-radius: 50%;
    color: var(--primary-color);
    font-size: 0.72rem;
    letter-spacing: 0;
}

.cb-group_desc {
    color: rgba(245, 239, 230, 0.55);
    font-size: 0.9rem;
    line-height: 1.75;
    margin: 0;
    max-width: 62ch;
    padding-left: 2.45rem;
}

/* Region Filter */
.cb-originbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}

.cb-origin_btn {
    padding: 0.4rem 0.95rem;
    border: 1px solid rgba(196, 156, 116, 0.35);
    border-radius: 999px;
    background: none;
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(245, 239, 230, 0.6);
    cursor: pointer;
    transition: 0.28s;
}
.cb-origin_btn:hover {
    color: #f5efe6;
    border-color: var(--primary-color);
    background: rgba(196, 156, 116, 0.1);
}
.cb-origin_btn.is-active {
    color: var(--cb-deep);
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.cb-origin_btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* The region, set beside the whisky's name. */
.cb-item_origin {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.12rem 0.5rem;
    border: 1px solid rgba(196, 156, 116, 0.45);
    border-radius: 2px;
    color: var(--primary-color);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    vertical-align: 0.12em;
    white-space: nowrap;
}

/* --- items ---
   Two or three to a row rather than one long column. auto-fill means the
   count follows the width instead of being pinned to a breakpoint. */
.cb-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 0 clamp(2rem, 4vw, 3.5rem);
}

.cb-item {
    padding: 1.05rem 0;
    border-bottom: 1px solid rgba(245, 239, 230, 0.09);
}
/* Belt and braces: nothing here sets display on .cb-item, but every other
   element on this page toggled with the hidden attribute needs the guard, so
   this one gets it too rather than relying on that staying true. */
.cb-item[hidden] { display: none; }

.cb-item_head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}

.cb-item_name {
    flex: 0 1 auto;
    color: #f5efe6;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.cb-item_star { color: var(--primary-color); font-size: 0.9em; margin-left: 0.25rem; }

.cb-item_leaf { color: #7fae6e; font-size: 0.85em; margin-left: 0.25rem; }

.cb-item_leader {
    flex: 1 1 auto;
    /*min-width: 1.5rem;
    border-bottom: 1px dotted rgba(196, 156, 116, 0.45);
    transform: translateY(-0.28rem);*/
}

.cb-item_price {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    color: var(--primary-color);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

.cb-item_bottle {
    color: rgba(245, 239, 230, 0.5);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.08em;
}

.cb-item_ing {
    color: var(--primary-color);
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.6;
    margin: 0 0 0.35rem;
    max-width: 62ch;
}

.cb-item_desc {
    color: rgba(245, 239, 230, 0.58);
    font-size: 0.9rem;
    line-height: 1.75;
    margin: 0;
    max-width: 62ch;
}

/* =====================================================================
   CTA
   ===================================================================== */
.cb-cta {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 440px;
    padding: clamp(4rem, 9vw, 7rem) 1.25rem;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    color: var(--white);
}

.cb-cta_media { position: absolute; inset: 0; z-index: 0; }
.cb-cta_media img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block !important;
}

.cb-cta_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(28, 22, 16, 0.9) 0%, rgba(28, 22, 16, 0.72) 100%);
    transition: opacity 0.5s ease;
}
.cb-cta:hover .cb-cta_overlay { opacity: 0.45; }

.cb-cta_content { position: relative; z-index: 2; max-width: 640px; }

.cb-cta_eyebrow {
    display: inline-block;
    font-size: 0.88rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.cb-cta_title {
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    color: var(--white);
    font-weight: 300;
    letter-spacing: 0.03em;
    line-height: 1.15;
    margin: 0 0 1.1rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.cb-cta_text {
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.8;
    margin: 0 0 2.2rem;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.cb-cta_actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.cb-cta_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 0.95rem 2.6rem;
    border: 1px solid var(--primary-color);
    border-radius: 2px;
    color: var(--white);
    font-size: 0.85rem;
    font-family: inherit;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: rgba(28, 22, 16, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    transition: 0.35s;
}
.cb-cta_btn:hover { background: var(--primary-color); color: var(--cb-deep); }

.cb-cta_btn--ghost {
    border-color: rgba(255, 255, 255, 0.6);
    background: transparent;
}
.cb-cta_btn--ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: var(--white);
    color: var(--white);
}

.cb-cta_icon { font-size: 0.85rem; transition: transform 0.3s ease; }
.cb-cta_btn:hover .cb-cta_icon--arrow { transform: translateX(5px); }
.cb-expand_toggle_btn[aria-expanded="true"] .cb-cta_icon { transform: rotate(180deg); }

/* =====================================================================
   Responsive
   ===================================================================== */
/* The card is centred at up to 680px and the breadcrumb trail starts at the
   left edge of the 1200px content column. Above 1200px they clear each other
   by a constant margin; below it the column stops shrinking while the card
   keeps closing in, so the strip drops below the card instead of being
   grazed. The card keeps its overlap onto the photograph. */
@media (max-width: 1200px) {
    .cb-banner { display: flex; flex-direction: column; }
    .cb-banner_media { order: 1; }
    .cb-banner_card {
        order: 2;
        margin-top: calc(var(--cb-card-overlap) * -1);
    }
    .cb-banner .breadcrumbs {
        order: 3;
        margin-top: clamp(1.5rem, 5vw, 2.5rem);
    }
}

/* No hover on a phone, and slats this narrow cannot carry a picture, so the
   exhibits become a plain stack with every plate open. */
@media (max-width: 860px) {
    .cb-exhibits_rail {
        flex-direction: column;
        height: auto;
        gap: 0.85rem;
    }
    .cb-exhibit, .cb-exhibit.is-open { flex: 0 0 auto; height: clamp(200px, 42vw, 300px); }
    .cb-exhibit img { filter: brightness(0.88) saturate(1); transform: none; }
    .cb-exhibit_no { writing-mode: horizontal-tb; transform: none; }
    .cb-exhibit_label { max-width: none; opacity: 1; white-space: normal; }
    .cb-exhibit_plate { align-items: baseline; }
}

@media (max-width: 640px) {
    .cb-banner_media { height: 78vh; min-height: 460px; }
    .cb-banner { --cb-card-overlap: 2.5rem; }
    .cb-cta_actions { flex-direction: column; align-items: stretch; }
    .cb-cta_btn { width: 100%; }
    .cb-info_card { padding: 1.75rem 1.5rem 1.5rem; }
    .cb-info_list li { flex-direction: column; gap: 0.2rem; }
    .cb-info_time { text-align: left; }
    .cb-feature { flex-basis: 45%; }
    .cb-feature + .cb-feature { border-left: none; }
    .cb-viewswitch { gap: 1.25rem; }
    .cb-viewswitch_btn { font-size: 0.74rem; letter-spacing: 0.18em; }
    /* Leader dots need room to read as leader dots; below this the price
       drops onto its own line instead. */
    .cb-item_head { flex-wrap: wrap; }
    .cb-item_leader { display: none; }
    .cb-item_price { width: 100%; }
    .cb-group_desc { padding-left: 0; }
    .cb-subtabs { grid-template-columns: 1fr; }
    /* Centred reads as ragged in a narrow column. */
    .cb-subsection_desc { text-align: left; margin-inline: 0; }
    .cb-catbar_inner { padding: 0.45rem 1rem; }
    .cb-catbar_btn { font-size: 0.72rem; padding: 0.45rem 0.85rem; }
}