/**
 * archive-daytour.css
 *
 * Day Tour archive page styles. Uses dta-* BEM prefix.
 * Design reference: Atria-Day-Tours.dc.html
 *
 * Sections: hero · filter-bar · card-grid · how-it-works · cta-dark · pagination.
 *
 * @package atria-travel
 */

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

.dta-hero {
    position:   relative;
    min-height: clamp( 400px, 50vh, 560px );
    display:    flex;
    align-items: flex-end;
    overflow:   hidden;
    background: #1A1715;
}

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

.dta-hero__gradient {
    position:   absolute;
    inset:      0;
    pointer-events: none;
    background: linear-gradient(
        0deg,
        rgba( 15, 12, 10, .85 ) 0%,
        rgba( 15, 12, 10, .22 ) 58%,
        rgba( 15, 12, 10, .40 ) 100%
    );
}

.dta-hero__content {
    position:  relative;
    z-index:   2;
    width:     100%;
    max-width: 1320px;
    margin:    0 auto;
    padding:   0 clamp( 20px, 5vw, 72px ) clamp( 44px, 6vh, 72px );
    pointer-events: none;
}

.dta-hero__breadcrumb {
    margin:         0 0 16px;
    font-size:      12px;
    font-weight:    500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color:          rgba( 247, 241, 231, .72 );
}

.dta-hero__breadcrumb a {
    color:           #D8B97E;
    text-decoration: none;
}

.dta-hero__breadcrumb a:hover {
    color: #F7F1E7;
}

.dta-hero__title {
    margin:      0;
    font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
    font-weight: 500;
    font-size:   clamp( 44px, 6vw, 84px );
    line-height: 1.0;
    color:       #F7F1E7;
    max-width:   16ch;
    text-shadow: 0 2px 30px rgba( 0, 0, 0, .4 );
}

.dta-hero__subtitle {
    margin:      20px 0 0;
    font-size:   clamp( 15px, 1.4vw, 18px );
    line-height: 1.7;
    color:       rgba( 247, 241, 231, .86 );
    max-width:   50ch;
    font-weight: 300;
}


/* ══════════════════════════════════════════════ FILTER + GRID WRAPPER ════ */

.dta-section {
    max-width: 1320px;
    margin:    0 auto;
    padding:   clamp( 40px, 5vw, 72px ) clamp( 20px, 5vw, 72px ) clamp( 64px, 8vw, 108px );
}


/* ── Filter bar ─────────────────────────────────────────────────────────── */

.dta-filter-bar {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: space-between;
    gap:             18px;
    margin-bottom:   clamp( 24px, 3vw, 40px );
}

.dta-chips {
    display:  flex;
    flex-wrap: wrap;
    gap:      9px;
}

.dta-chip {
    display:         inline-flex;
    align-items:     center;
    padding:         9px 18px;
    border-radius:   999px;
    font-size:       12.5px;
    font-weight:     500;
    letter-spacing:  .04em;
    text-decoration: none;
    transition:      background .18s, border-color .18s, color .18s;
    white-space:     nowrap;
}

.dta-chip--off {
    background:   transparent;
    border:       1px solid rgba( 26, 23, 21, .2 );
    color:        #3A332D;
}

.dta-chip--off:hover {
    border-color: rgba( 26, 23, 21, .5 );
    color:        #1A1715;
}

.dta-chip--on {
    background: #1A1715;
    border:     1px solid #1A1715;
    color:      #F7F1E7;
}

.dta-chip--on:hover {
    background:   #8a6a38;
    border-color: #8a6a38;
}

.dta-count {
    margin:         0;
    font-size:      13px;
    letter-spacing: .06em;
    color:          #7a6f62;
    white-space:    nowrap;
}

.dta-count__n {
    color:       #8a6a38;
    font-weight: 600;
}


/* ── Card grid ──────────────────────────────────────────────────────────── */

.dta-grid {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 290px, 1fr ) );
    gap:                   clamp( 20px, 2.4vw, 30px );
}

/* Tour Card */
.dta-card {
    display:         flex;
    flex-direction:  column;
    text-decoration: none;
    background:      #fff;
    border:          1px solid rgba( 26, 23, 21, .08 );
    color:           inherit;
    transition:      box-shadow .25s, transform .25s;
}

.dta-card:hover {
    box-shadow: 0 18px 40px rgba( 26, 23, 21, .14 );
    transform:  translateY( -4px );
}

.dta-card__media {
    position: relative;
    height:   clamp( 200px, 19vw, 230px );
    overflow: hidden;
}

.dta-card__img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .45s;
}

.dta-card:hover .dta-card__img {
    transform: scale( 1.04 );
}

.dta-card__img-placeholder {
    position:   absolute;
    inset:      0;
    background: rgba( 26, 23, 21, .06 );
}

/* City badge — top-left, dark pill */
.dta-card__city {
    position:        absolute;
    top:             12px;
    left:            12px;
    background:      rgba( 20, 16, 12, .78 );
    color:           #EFD9AE;
    font-size:       10px;
    font-weight:     600;
    letter-spacing:  .14em;
    text-transform:  uppercase;
    padding:         5px 11px;
    pointer-events:  none;
}

/* Duration badge — top-right, light pill */
.dta-card__duration {
    position:        absolute;
    top:             12px;
    right:           12px;
    background:      rgba( 245, 239, 230, .92 );
    color:           #3A332D;
    font-size:       10px;
    font-weight:     600;
    letter-spacing:  .10em;
    text-transform:  uppercase;
    padding:         5px 11px;
    pointer-events:  none;
}

.dta-card__body {
    padding:        20px 22px 24px;
    display:        flex;
    flex-direction: column;
    flex:           1;
}

.dta-card__title {
    margin:      0 0 10px;
    font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
    font-weight: 600;
    font-size:   22px;
    color:       #1A1715;
    line-height: 1.18;
}

.dta-card__blurb {
    margin:      0 0 18px;
    font-size:   14px;
    line-height: 1.6;
    color:       #5A5048;
    font-weight: 300;
    flex:        1;
}

.dta-card__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    border-top:      1px solid rgba( 26, 23, 21, .1 );
    padding-top:     14px;
    gap:             8px;
}

.dta-card__price {
    font-size: 12px;
    color:     #9a8a72;
}

.dta-card__price-amount {
    font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
    font-size:   20px;
    font-weight: 600;
    color:       #8a6a38;
}

.dta-card__enquire {
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    color:          #8a6a38;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space:    nowrap;
    flex-shrink:    0;
}

/* Empty state */
.dta-empty {
    grid-column: 1 / -1;
    padding:     clamp( 48px, 6vw, 80px ) 0;
    text-align:  center;
}

.dta-empty__heading {
    font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
    font-size:   clamp( 22px, 2.5vw, 28px );
    font-weight: 500;
    color:       #1A1715;
    margin:      0 0 12px;
}

.dta-empty__text {
    font-size:   15px;
    color:       #7a6f62;
    margin:      0 0 24px;
}

.dta-empty__link {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         12px 28px;
    background:      #1A1715;
    color:           #F7F1E7;
    font-size:       11px;
    font-weight:     600;
    letter-spacing:  .14em;
    text-transform:  uppercase;
    text-decoration: none;
    transition:      background .2s;
}

.dta-empty__link:hover {
    background: #8a6a38;
}


/* ═══════════════════════════════════════════════════ HOW IT WORKS ════════ */

.dta-how {
    background:   #EFE7D9;
    border-top:   1px solid rgba( 26, 23, 21, .08 );
    border-bottom: 1px solid rgba( 26, 23, 21, .08 );
}

/* Optional — only rendered when a "How It Works" heading is set in
   Theme Settings → Content & Copy; the section has no heading by default. */
.dta-how__section-heading {
    max-width:    1320px;
    margin:       0 auto;
    padding:      clamp( 32px, 4vw, 48px ) clamp( 20px, 5vw, 72px ) 0;
    font-family:  var( --atria-font-display, 'Cormorant Garamond', serif );
    font-weight:  600;
    font-size:    clamp( 24px, 3vw, 32px );
    text-align:   center;
    color:        #1A1715;
}

.dta-how__inner {
    max-width: 1320px;
    margin:    0 auto;
    padding:   clamp( 48px, 6vw, 80px ) clamp( 20px, 5vw, 72px );
    display:   grid;
    grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
    gap:       clamp( 28px, 3.5vw, 48px );
}

.dta-how__item {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}

.dta-how__icon {
    display:         inline-flex;
    width:           44px;
    height:          44px;
    align-items:     center;
    justify-content: center;
    border:          1px solid rgba( 184, 145, 90, .5 );
    border-radius:   50%;
    color:           #B8915A;
    flex-shrink:     0;
}

.dta-how__heading {
    margin:      0;
    font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
    font-weight: 600;
    font-size:   21px;
    color:       #1A1715;
}

.dta-how__text {
    margin:      0;
    font-size:   14.5px;
    line-height: 1.7;
    color:       #5A5048;
    font-weight: 300;
}


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

.dta-cta {
    position: relative;
    background: #1A1715;
    color:    #F7F1E7;
    overflow: hidden;
}

.dta-cta__bg {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    opacity:    .28;
}

.dta-cta__overlay {
    position: absolute;
    inset:    0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba( 20, 16, 12, .92 ) 0%,
        rgba( 20, 16, 12, .62 ) 70%,
        rgba( 20, 16, 12, .40 ) 100%
    );
}

.dta-cta__inner {
    position:  relative;
    z-index:   2;
    max-width: 1320px;
    margin:    0 auto;
    padding:   clamp( 56px, 7vw, 100px ) clamp( 24px, 5vw, 72px );
}

.dta-cta__eyebrow {
    margin:         0 0 16px;
    font-size:      12px;
    font-weight:    500;
    letter-spacing: .30em;
    text-transform: uppercase;
    color:          #C9A86A;
}

.dta-cta__title {
    margin:      0;
    font-family: var( --atria-font-display, 'Cormorant Garamond', serif );
    font-weight: 500;
    font-size:   clamp( 32px, 4.6vw, 56px );
    line-height: 1.06;
    color:       #F7F1E7;
    max-width:   18ch;
}

.dta-cta__body {
    margin:      20px 0 0;
    font-size:   clamp( 15px, 1.4vw, 18px );
    line-height: 1.7;
    color:       rgba( 247, 241, 231, .78 );
    max-width:   50ch;
    font-weight: 300;
}

.dta-cta__actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       16px;
    margin-top: 36px;
}

.dta-cta__btn-primary {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    text-decoration: none;
    background:      #B8915A;
    color:           #1A1715;
    padding:         17px 36px;
    font-size:       12.5px;
    font-weight:     600;
    letter-spacing:  .16em;
    text-transform:  uppercase;
    transition:      background .2s;
}

.dta-cta__btn-primary:hover {
    background: #C9A86A;
    color:      #1A1715;
}

.dta-cta__btn-wa {
    display:         inline-flex;
    align-items:     center;
    gap:             11px;
    text-decoration: none;
    background:      transparent;
    border:          1px solid rgba( 247, 241, 231, .45 );
    color:           #F7F1E7;
    padding:         17px 30px;
    font-size:       12.5px;
    font-weight:     600;
    letter-spacing:  .16em;
    text-transform:  uppercase;
    transition:      background .2s, border-color .2s;
}

.dta-cta__btn-wa:hover {
    background:   rgba( 247, 241, 231, .1 );
    border-color: rgba( 247, 241, 231, .7 );
}


/* ═══════════════════════════════════════════════════════ PAGINATION ════ */

.dta-pagination {
    margin-top: clamp( 40px, 5vw, 60px );
    display:    flex;
    justify-content: center;
}

.dta-pagination .nav-links {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         8px;
}

.dta-pagination .page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       38px;
    height:          38px;
    padding:         0 10px;
    font-size:       13px;
    font-weight:     500;
    color:           #3A332D;
    text-decoration: none;
    border:          1px solid rgba( 26, 23, 21, .18 );
    transition:      border-color .18s, background .18s, color .18s;
}

.dta-pagination .page-numbers:hover {
    border-color: #B8915A;
    color:        #8a6a38;
}

.dta-pagination .page-numbers.current {
    background:   #1A1715;
    border-color: #1A1715;
    color:        #F7F1E7;
}

.dta-pagination .page-numbers.dots {
    border-color: transparent;
    cursor:       default;
    color:        #9a8a72;
}