/**
 * single-transfer.css
 *
 * Transfer single-page styles. Uses tr-* BEM prefix.
 * Shares the same CSS token layer as the other product singles
 * (--atria-ink, --atria-gold, --atria-sand-band, etc. from style.css).
 *
 * Sections: hero · subnav · overview · vehicles · inclusions · faq · cta-dark.
 * No itinerary (transfers have none).
 *
 * @package atria-travel
 */

/* ══════════════════════════════════════════════════════════════ HERO ════ */

.tr-hero {
    position:       relative;
    height:         clamp( 360px, 60vh, 680px );
    display:        flex;
    align-items:    flex-end;
    overflow:       hidden;
    background:     var( --atria-ink, #1A1715 );
}

.tr-hero--no-img {
    height: clamp( 280px, 40vh, 480px );
}

.tr-hero__bg {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center 35%;
}

.tr-hero__gradient {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        rgba( 20, 17, 15, .08 ) 0%,
        rgba( 20, 17, 15, .60 ) 55%,
        rgba( 20, 17, 15, .90 ) 100%
    );
}

.tr-hero__content {
    position:  relative;
    width:     100%;
    padding:   0 var( --atria-gutter, 24px ) clamp( 36px, 4vw, 60px );
    max-width: 1280px;
    margin:    0 auto;
}

.tr-hero__breadcrumb {
    font-size:      11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          rgba( 247, 241, 231, .55 );
    margin:         0 0 14px;
}

.tr-hero__breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.tr-hero__breadcrumb a:hover {
    color: var( --atria-gold, #B8915A );
}

.tr-hero__title {
    font-family:    var( --atria-font-display, serif );
    font-size:      clamp( 26px, 4.5vw, 52px );
    font-weight:    500;
    color:          var( --atria-cream, #F7F1E7 );
    line-height:    1.1;
    margin:         0 0 20px;
    letter-spacing: -.01em;
}

.tr-hero__route {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   clamp( 13px, 1.2vw, 15.5px );
    font-weight: 500;
    color:       var( --atria-cream, #F7F1E7 );
    margin:      0 0 18px;
    flex-wrap:   wrap;
}

.tr-hero__route-from,
.tr-hero__route-to {
    color: rgba( 247, 241, 231, .85 );
}

.tr-hero__route-arrow {
    color: var( --atria-gold, #B8915A );
    font-size: 1.2em;
    flex-shrink: 0;
}

.tr-hero__specs {
    display:   flex;
    gap:       clamp( 14px, 2vw, 28px );
    flex-wrap: wrap;
}

.tr-hero__spec {
    display:     flex;
    align-items: center;
    gap:         7px;
    font-size:   clamp( 11px, 1vw, 13.5px );
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:       rgba( 247, 241, 231, .75 );
}

.tr-hero__spec svg {
    flex-shrink: 0;
}


/* ═════════════════════════════════════════════════ STICKY SUB-NAV ════ */

.tr-subnav {
    position:        sticky;
    top:             0;
    z-index:         100;
    background:      var( --atria-ink, #1A1715 );
    border-bottom:   1px solid rgba( 247, 241, 231, .07 );
}

.tr-subnav__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          54px;
    gap:             var( --atria-gutter, 24px );
}

.tr-subnav__tabs {
    display:    flex;
    gap:        clamp( 16px, 2.5vw, 36px );
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 1;
    min-width:  0;
}

.tr-subnav__tabs::-webkit-scrollbar { display: none; }

.tr-subnav__tab {
    font-size:      11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          rgba( 247, 241, 231, .5 );
    text-decoration: none;
    white-space:    nowrap;
    transition:     color .2s;
}

.tr-subnav__tab:hover,
.tr-subnav__tab.is-active {
    color: var( --atria-gold, #B8915A );
}

.tr-subnav__cta {
    display:     flex;
    align-items: center;
    gap:         18px;
    flex-shrink: 0;
}

.tr-subnav__from {
    display:     flex;
    align-items: baseline;
    gap:         5px;
}

.tr-subnav__from-label {
    font-size:      10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          rgba( 247, 241, 231, .45 );
}

.tr-subnav__from-price {
    font-family: var( --atria-font-display, serif );
    font-size:   clamp( 14px, 1.3vw, 17px );
    font-weight: 500;
    color:       var( --atria-gold, #B8915A );
}

.tr-subnav__req {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    padding:        0 20px;
    height:         36px;
    font-size:      10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight:    600;
    color:          var( --atria-ink, #1A1715 );
    background:     var( --atria-gold, #B8915A );
    border-radius:  2px;
    text-decoration: none;
    transition:     background .2s;
    white-space:    nowrap;
}

.tr-subnav__req:hover {
    background: var( --atria-gold-deep, #8a6a38 );
    color:      var( --atria-ink, #1A1715 );
}


/* ═══════════════════════════════════════════════════ OVERVIEW ═══════ */

.tr-overview {
    padding: clamp( 56px, 7vw, 100px ) 0;
}

.tr-overview__grid {
    display:               grid;
    grid-template-columns: 1fr 360px;
    gap:                   clamp( 40px, 5vw, 80px );
    align-items:           start;
}

@media ( max-width: 900px ) {
    .tr-overview__grid {
        grid-template-columns: 1fr;
    }
}

.tr-overview__eyebrow {
    font-size:      11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:          var( --atria-gold, #B8915A );
    margin:         0 0 14px;
}

.tr-overview__text {
    font-size:   clamp( 15px, 1.35vw, 17px );
    line-height: 1.75;
    color:       var( --atria-body, #3D3830 );
    margin:      0 0 clamp( 20px, 2.5vw, 32px );
}

/* Meet & Assist badge */
.tr-meet-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    padding:        6px 16px;
    background:     rgba( 184, 145, 90, .1 );
    border:         1px solid rgba( 184, 145, 90, .35 );
    border-radius:  99px;
    font-size:      12.5px;
    font-weight:    600;
    color:          var( --atria-gold-deep, #8a6a38 );
    margin:         0 0 clamp( 20px, 2vw, 28px );
}

/* Highlights (shared .atria-hl-diamond from style.css) */
.tr-overview__hl-heading {
    font-family:    var( --atria-font-display, serif );
    font-size:      clamp( 17px, 1.6vw, 21px );
    font-weight:    500;
    color:          var( --atria-ink, #1A1715 );
    margin:         clamp( 28px, 3vw, 40px ) 0 clamp( 14px, 1.5vw, 20px );
    letter-spacing: -.01em;
}

.tr-overview__highlights {
    display:   flex;
    flex-direction: column;
    gap:       12px;
    list-style: none;
    margin:    0;
    padding:   0;
}

.tr-overview__hl-item {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    font-size:   clamp( 14px, 1.25vw, 15.5px );
    line-height: 1.6;
    color:       var( --atria-body, #3D3830 );
}


/* ── At a Glance sidebar card ─────────────────────────────────────────── */

.tr-glance {
    background:    var( --atria-sand-band, #EFE7D9 );
    border-radius: 4px;
    padding:       clamp( 24px, 3vw, 36px );
    margin-bottom: clamp( 24px, 3vw, 36px );
}

.tr-glance__title {
    font-family:    var( --atria-font-display, serif );
    font-size:      clamp( 16px, 1.4vw, 18px );
    font-weight:    500;
    color:          var( --atria-ink, #1A1715 );
    margin:         0 0 20px;
    letter-spacing: -.01em;
}

.tr-glance__row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    padding:         10px 0;
    border-bottom:   1px solid rgba( 26, 23, 21, .08 );
    gap:             12px;
}

.tr-glance__row:last-of-type {
    border-bottom: none;
}

.tr-glance__label {
    font-size:      12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var( --atria-body, #3D3830 );
    opacity:        .7;
    flex-shrink:    0;
}

.tr-glance__value {
    font-size:   clamp( 13px, 1.1vw, 14.5px );
    font-weight: 500;
    color:       var( --atria-ink, #1A1715 );
    text-align:  right;
}

.tr-glance__value--price {
    color:       var( --atria-gold, #B8915A );
    font-family: var( --atria-font-display, serif );
    font-size:   clamp( 15px, 1.4vw, 17px );
}

.tr-glance__btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    margin-top:      22px;
    padding:         14px;
    background:      var( --atria-ink, #1A1715 );
    color:           var( --atria-cream, #F7F1E7 );
    font-size:       11px;
    font-weight:     600;
    letter-spacing:  .14em;
    text-transform:  uppercase;
    text-decoration: none;
    border-radius:   2px;
    transition:      background .2s;
}

.tr-glance__btn:hover {
    background: var( --atria-gold, #B8915A );
    color:      var( --atria-ink, #1A1715 );
}


/* ── Vehicle estimator (sidebar widget) ──────────────────────────────── */

.tr-estimator {
    background:    rgba( 26, 23, 21, .04 );
    border:        1px solid rgba( 26, 23, 21, .1 );
    border-radius: 4px;
    padding:       clamp( 20px, 2.5vw, 30px );
    margin-bottom: clamp( 24px, 3vw, 36px );
}

.tr-estimator__eyebrow {
    font-size:      11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var( --atria-gold, #B8915A );
    display:        block;
    margin-bottom:  16px;
}

.tr-estimator__pax-label {
    display:   block;
    font-size: 12px;
    color:     var( --atria-body, #3D3830 );
    opacity:   .7;
    margin-bottom: 6px;
}

.tr-estimator__pax-input {
    width:         100%;
    max-width:     120px;
    padding:       9px 12px;
    border:        1px solid rgba( 26, 23, 21, .18 );
    border-radius: 3px;
    font-size:     15px;
    color:         var( --atria-ink, #1A1715 );
    background:    #fff;
    margin-bottom: 6px;
}

.tr-estimator__suggestion {
    font-size:   12.5px;
    color:       var( --atria-gold-deep, #8a6a38 );
    min-height:  1.3em;
    margin:      0 0 16px;
}

/* Vehicle tile buttons */
.tr-vehicle-tile {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             12px;
    width:           100%;
    padding:         11px 14px;
    border:          1.5px solid rgba( 26, 23, 21, .15 );
    border-radius:   3px;
    background:      #fff;
    cursor:          pointer;
    text-align:      left;
    margin-bottom:   8px;
    transition:      border-color .15s, background .15s;
}

.tr-vehicle-tile:last-child { margin-bottom: 0; }

.tr-vehicle-tile:hover {
    border-color: var( --atria-gold, #B8915A );
}

.tr-vehicle-tile.is-selected {
    border-color: var( --atria-gold, #B8915A );
    background:   rgba( 184, 145, 90, .08 );
}

.tr-vehicle-tile--unavailable {
    opacity: .42;
    cursor:  default;
}

.tr-vehicle-tile__name {
    display:     block;
    font-size:   14px;
    font-weight: 600;
    color:       var( --atria-ink, #1A1715 );
}

.tr-vehicle-tile__cap {
    font-size: 12px;
    color:     var( --atria-body, #3D3830 );
    opacity:   .65;
}

.tr-vehicle-tile__price {
    font-size:   14px;
    font-weight: 600;
    color:       var( --atria-ink, #1A1715 );
    white-space: nowrap;
    text-align:  right;
}

.tr-vehicle-tile__per {
    font-size:   11px;
    font-weight: 400;
    color:       var( --atria-body, #3D3830 );
    opacity:     .6;
    display:     block;
}

/* Direction toggle */
.tr-direction-group {
    display:   flex;
    gap:       8px;
    margin:    16px 0;
}

.tr-direction-btn {
    flex:           1;
    padding:        10px 0;
    font-size:      12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight:    600;
    border:         1.5px solid rgba( 26, 23, 21, .2 );
    border-radius:  3px;
    background:     transparent;
    color:          var( --atria-body, #3D3830 );
    cursor:         pointer;
    transition:     border-color .15s, background .15s, color .15s;
}

.tr-direction-btn:hover {
    border-color: var( --atria-gold, #B8915A );
    color:        var( --atria-ink, #1A1715 );
}

.tr-direction-btn.is-active {
    border-color: var( --atria-ink, #1A1715 );
    background:   var( --atria-ink, #1A1715 );
    color:        var( --atria-cream, #F7F1E7 );
}

.tr-price-display {
    font-size:   15px;
    font-weight: 600;
    color:       var( --atria-ink, #1A1715 );
    min-height:  1.4em;
    margin-top:  4px;
}


/* ═══════════════════════════════════════════ VEHICLES (DARK SECTION) ════ */

.tr-vehicles {
    background: var( --atria-ink, #1A1715 );
    padding:    clamp( 56px, 7vw, 96px ) 0;
}

.tr-vehicles__header {
    text-align:    center;
    margin-bottom: clamp( 36px, 4vw, 56px );
}

.tr-vehicles__eyebrow {
    font-size:      11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          var( --atria-gold, #B8915A );
    display:        block;
    margin-bottom:  14px;
}

.tr-vehicles__title {
    font-family:    var( --atria-font-display, serif );
    font-size:      clamp( 24px, 3.5vw, 38px );
    font-weight:    500;
    color:          var( --atria-cream, #F7F1E7 );
    margin:         0;
    letter-spacing: -.01em;
}

.tr-vehicle-grid {
    display:               grid;
    grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) );
    gap:                   clamp( 16px, 2vw, 24px );
}

.tr-vehicle-card {
    background:    rgba( 247, 241, 231, .06 );
    border:        1px solid rgba( 247, 241, 231, .1 );
    border-radius: 4px;
    padding:       clamp( 24px, 3vw, 36px ) clamp( 20px, 2.5vw, 28px );
    display:       flex;
    flex-direction: column;
    gap:           16px;
    transition:    border-color .2s, background .2s;
}

.tr-vehicle-card--available:hover {
    border-color: var( --atria-gold, #B8915A );
    background:   rgba( 184, 145, 90, .07 );
}

.tr-vehicle-card--unavailable {
    opacity: .38;
}

.tr-vehicle-card__cap {
    font-family: var( --atria-font-display, serif );
    font-size:   clamp( 40px, 5vw, 56px );
    font-weight: 400;
    color:       var( --atria-gold, #B8915A );
    line-height: 1;
}

.tr-vehicle-card__label {
    font-size:      clamp( 15px, 1.4vw, 18px );
    font-weight:    600;
    color:          var( --atria-cream, #F7F1E7 );
    letter-spacing: .02em;
}

.tr-vehicle-card__desc {
    font-size:   13px;
    color:       rgba( 247, 241, 231, .5 );
    line-height: 1.5;
    flex:        1;
}

.tr-vehicle-card__footer {
    border-top:  1px solid rgba( 247, 241, 231, .08 );
    padding-top: 16px;
}

.tr-vehicle-card__from {
    font-size:   11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:       rgba( 247, 241, 231, .4 );
    margin-bottom: 4px;
    display:     block;
}

.tr-vehicle-card__price {
    font-family: var( --atria-font-display, serif );
    font-size:   clamp( 18px, 1.8vw, 22px );
    font-weight: 500;
    color:       var( --atria-cream, #F7F1E7 );
}

.tr-vehicle-card__per {
    font-size:   12px;
    color:       rgba( 247, 241, 231, .4 );
    margin-left: 4px;
}

.tr-vehicle-card__return {
    font-size:   12px;
    color:       rgba( 247, 241, 231, .4 );
    margin-top:  6px;
}


/* ══════════════════════════════════════ INCLUSIONS / EXCLUSIONS ════════ */

.tr-included {
    background: var( --atria-ink, #1A1715 );
    padding:    clamp( 56px, 7vw, 96px ) 0;
}

.tr-included__header {
    margin-bottom: clamp( 36px, 4vw, 56px );
}

.tr-included__eyebrow {
    font-size:      11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          var( --color-include, var( --atria-gold, #B8915A ) );
    display:        block;
    margin-bottom:  14px;
}

.tr-included__title {
    font-family: var( --atria-font-display, serif );
    font-size:   clamp( 22px, 3vw, 34px );
    font-weight: 500;
    color:       var( --atria-cream, #F7F1E7 );
    margin:      0;
}

.tr-incl-grid {
    display:               grid;
    grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
    gap:                   clamp( 24px, 3vw, 40px );
}

.tr-incl-card {
    background:    rgba( 247, 241, 231, .05 );
    border-radius: 4px;
    padding:       clamp( 24px, 3vw, 36px );
}

.tr-incl-card__heading {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-family: var( --atria-font-display, serif );
    font-size:   clamp( 17px, 1.6vw, 20px );
    font-weight: 500;
    color:       var( --atria-cream, #F7F1E7 );
    margin:      0 0 20px;
}

.tr-incl-icon {
    display:      flex;
    align-items:  center;
    justify-content: center;
    width:        28px;
    height:       28px;
    border-radius: 50%;
    flex-shrink:  0;
}

/* Fallbacks only apply while --color-include/--color-exclude are unset — a
   chosen color palette prints them at :root, overriding every fallback here. */
.tr-incl-card--in .tr-incl-icon {
    background: color-mix( in srgb, var( --color-include, var( --atria-gold, #B8915A ) ) 18%, transparent );
    color:      var( --color-include, var( --atria-gold, #B8915A ) );
}

.tr-incl-card--ex .tr-incl-icon {
    background: rgba( 247, 241, 231, .08 );
    color:      color-mix( in srgb, var( --color-exclude, var( --atria-ink-contrast ) ) 50%, transparent );
}

.tr-incl-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        12px;
}

.tr-incl-item {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
}

.tr-incl-item__icon {
    display:      flex;
    align-items:  center;
    justify-content: center;
    flex-shrink:  0;
    margin-top:   2px;
}

.tr-incl-card--in .tr-incl-item__icon {
    color: var( --color-include, var( --atria-gold, #B8915A ) );
}

.tr-incl-card--ex .tr-incl-item__icon {
    color: color-mix( in srgb, var( --color-exclude, var( --atria-ink-contrast ) ) 40%, transparent );
}

.tr-incl-item__text {
    font-size:   clamp( 13.5px, 1.2vw, 15px );
    line-height: 1.6;
    color:       rgba( 247, 241, 231, .75 );
}


/* ═════════════════════════════════════════════════════════ FAQ ══════ */

.tr-faq {
    background: var( --atria-sand-band, #EFE7D9 );
    padding:    clamp( 56px, 7vw, 96px ) var( --atria-gutter, 24px );
}

.tr-faq__header {
    max-width:     720px;
    margin:        0 auto clamp( 36px, 4vw, 56px );
    text-align:    center;
}

.tr-faq__eyebrow {
    font-size:      11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          var( --atria-gold, #B8915A );
    display:        block;
    margin-bottom:  14px;
}

.tr-faq__title {
    font-family: var( --atria-font-display, serif );
    font-size:   clamp( 24px, 3.5vw, 38px );
    font-weight: 500;
    color:       var( --atria-ink, #1A1715 );
    margin:      0;
}


/* ══════════════════════════════════════════════════ CTA DARK BAND ════ */

.tr-cta-dark {
    position:   relative;
    background: var( --atria-ink, #1A1715 );
    overflow:   hidden;
    padding:    clamp( 64px, 8vw, 110px ) 0;
}

.tr-cta-dark__inner {
    text-align: center;
    max-width:  680px;
    margin:     0 auto;
}

.tr-cta-dark__eyebrow {
    font-size:      11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          var( --atria-gold, #B8915A );
    display:        block;
    margin-bottom:  18px;
}

.tr-cta-dark__title {
    font-family:    var( --atria-font-display, serif );
    font-size:      clamp( 26px, 4vw, 44px );
    font-weight:    500;
    color:          var( --atria-cream, #F7F1E7 );
    margin:         0 0 20px;
    line-height:    1.15;
    letter-spacing: -.01em;
}

.tr-cta-dark__body {
    font-size:   clamp( 14.5px, 1.3vw, 16.5px );
    line-height: 1.75;
    color:       rgba( 247, 241, 231, .65 );
    margin:      0 0 clamp( 32px, 4vw, 48px );
}

.tr-cta-dark__actions {
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         16px;
    flex-wrap:   wrap;
}

.tr-cta-dark__btn-wa {
    display:        inline-flex;
    align-items:    center;
    gap:            9px;
    padding:        16px 30px;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          rgba( 247, 241, 231, .75 );
    border:         1px solid rgba( 247, 241, 231, .2 );
    border-radius:  2px;
    text-decoration: none;
    transition:     border-color .2s, color .2s;
}

.tr-cta-dark__btn-wa:hover {
    border-color: var( --atria-gold, #B8915A );
    color:        var( --atria-gold, #B8915A );
}