/**
 * archive-package.css
 *
 * Package archive page styles. Uses pka-* BEM prefix.
 * Design reference: Atria-Packages.dc.html
 *
 * Sections: hero · filter-bar · card-grid · reassurance · cta-dark · pagination.
 *
 * @package atria-travel
 */

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

.pka-hero {
    position:    relative;
    min-height:  clamp( 440px, 58vh, 640px );
    display:     flex;
    align-items: flex-end;
    overflow:    hidden;
    background:  #1A1715;
}

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

.pka-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%
    );
}

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

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

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

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

.pka-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 );
}

.pka-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 ════ */

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


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

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

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

.pka-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;
}

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

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

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

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

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

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


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

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

/* Package Card */
.pka-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;
}

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

.pka-card__media {
    position: relative;
    height:   clamp( 220px, 21vw, 260px );
    overflow: hidden;
}

.pka-card__img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    transition:      transform .4s ease;
}

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

.pka-card__img-placeholder {
    position:   absolute;
    inset:      0;
    background: #E8DFD0;
}

/* Trip-style badge — dark pill in top-left */
.pka-card__badge {
    position:       absolute;
    top:            14px;
    left:           14px;
    background:     rgba( 20, 16, 12, .78 );
    color:          #EFD9AE;
    font-size:      10.5px;
    font-weight:    600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding:        6px 12px;
    line-height:    1;
}

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

.pka-card__title {
    margin:         0 0 6px;
    font-family:    var( --atria-font-display, 'Cormorant Garamond', serif );
    font-weight:    600;
    font-size:      24px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color:          #1A1715;
    line-height:    1.12;
}

.pka-card__title a {
    text-decoration: none;
    color:           inherit;
}

.pka-card__title a:hover { color: #8a6a38; }

.pka-card__meta {
    margin:         0 0 14px;
    font-size:      13px;
    letter-spacing: .04em;
    color:          #7a6f62;
    line-height:    1.5;
}

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

.pka-card__footer {
    margin-top:      auto;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    border-top:      1px solid rgba( 26, 23, 21, .1 );
    padding-top:     15px;
}

.pka-card__price {
    margin:     0;
    font-size:  12px;
    color:      #9a8a72;
    line-height: 1;
}

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

.pka-card__view {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    color:           #8a6a38;
    font-size:       11px;
    font-weight:     600;
    letter-spacing:  .12em;
    text-transform:  uppercase;
    text-decoration: none;
    transition:      color .18s;
}

.pka-card__view:hover { color: #C9A86A; }

/* Empty state */
.pka-empty {
    grid-column: 1 / -1;
    padding:     clamp( 56px, 7vw, 84px ) 0;
    text-align:  center;
}

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

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

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

.pka-empty__link:hover { background: #C9A86A; }


/* ══════════════════════════════════════ REASSURANCE BAND (sand) ═════════ */

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

.pka-reassurance__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 );
}

.pka-reassurance__item {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}

.pka-reassurance__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;
}

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

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


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

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

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

.pka-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%
    );
}

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

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

.pka-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;
}

.pka-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;
}

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

.pka-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;
}

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

.pka-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;
}

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


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

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

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

.pka-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;
}

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

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

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


/* ═══════════════════════════════════════════════════════ RESPONSIVE ════ */

@media ( max-width: 640px ) {
    .pka-hero__title { max-width: none; }
    .pka-card__footer { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pka-reassurance__inner { grid-template-columns: 1fr; }
}