/**
 * archive-destination.css
 * ───────────────────────
 * Styles specific to archive-sk_destination.php  (/destinations/).
 * Depends on archive-shared.css being loaded first.
 *
 * Light-mode overrides use  html.sk-light  (set by header toggle).
 * NO data-theme attributes — we rely entirely on the global class.
 *
 * Sections:
 *  1. Destination design-token overrides (amber/gold palette)
 *  2. Hero — mosaic tiles + veil + pill
 *  3. SEO intro block
 *  4. City tabs (sticky)
 *  5. Layout (main + sidebar columns)
 *  6. Destination mosaic grid + cards
 *  7. Responsive
 */

/* ═══════════════════════════════════════════════════════════
   1. DESTINATION TOKEN OVERRIDES
   Extends .sk-archive-wrap tokens from archive-shared.css
═══════════════════════════════════════════════════════════ */

.sk-dest-wrap {
    /* Hero */
    --dest-hero-veil:   radial-gradient(ellipse 90% 80% at 50% 50%, rgba(7,8,15,0.55) 0%, rgba(7,8,15,0.92) 75%);
    --dest-cities-bg:   rgba(7,8,15,0.92);
    --dest-intro-bg:    #0a0c14;
    --dest-intro-bdr:   rgba(255,255,255,0.06);
    --dest-tile-bg:     #141622;
    --dest-badge-bg:    rgba(0,0,0,0.6);
    --dest-badge-bdr:   rgba(255,255,255,0.1);
    --dest-overlay:     linear-gradient(170deg, transparent 30%, rgba(7,8,15,0.78) 100%);

    /* Chips */
    --dest-fee-color:    #4ade80;   --dest-fee-bdr:    rgba(74,222,128,.2);
    --dest-hours-color:  #67e8f9;   --dest-hours-bdr:  rgba(103,232,249,.2);
    --dest-season-color: #f9a8d4;   --dest-season-bdr: rgba(249,168,212,.2);
}

html.sk-light .sk-dest-wrap {
    --dest-hero-veil:   radial-gradient(ellipse 90% 80% at 50% 50%, rgba(250,248,244,0.35) 0%, rgba(250,248,244,0.82) 75%);
    --dest-cities-bg:   rgba(250,248,244,0.94);
    --dest-intro-bg:    #fff9f0;
    --dest-intro-bdr:   rgba(180,83,9,0.18);
    --dest-tile-bg:     #e8e2d8;
    --dest-badge-bg:    rgba(255,255,255,0.82);
    --dest-badge-bdr:   rgba(0,0,0,0.12);
    --dest-overlay:     linear-gradient(170deg, transparent 30%, rgba(250,248,244,0.72) 100%);

    --dest-fee-color:    #15803d;   --dest-fee-bdr:    rgba(21,128,61,.22);
    --dest-hours-color:  #0369a1;   --dest-hours-bdr:  rgba(3,105,161,.22);
    --dest-season-color: #9d174d;   --dest-season-bdr: rgba(157,23,77,.2);
}


/* ═══════════════════════════════════════════════════════════
   2. HERO
═══════════════════════════════════════════════════════════ */

.sk-dest-hero {
    position: relative; overflow: hidden;
    padding: 88px 24px 60px;
    text-align: center;
}

/* Mosaic background tiles */
.sk-dest-hero-mosaic {
    position: absolute; inset: 0; z-index: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3px;
    pointer-events: none;
}
.sk-dh-tile {
    background: var(--dest-tile-bg);
    opacity: 0;
    animation: dkTileFade 3s ease forwards;
}
.sk-dh-tile--2  { background: rgba(245,158,11,0.15); }
.sk-dh-tile--7  { background: rgba(234,88,12,0.12);  }
.sk-dh-tile--11 { background: rgba(245,158,11,0.10); }
.sk-dh-tile--15 { background: rgba(234,88,12,0.08);  }

/* Tile delays are set inline via PHP (0.12s per tile) */
@keyframes dkTileFade {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1);   }
}

.sk-dest-hero-veil {
    position: absolute; inset: 0;
    background: var(--dest-hero-veil);
}
.sk-dest-hero-inner {
    position: relative; z-index: 1;
    max-width: 820px; margin: 0 auto;
}

.sk-dest-hero-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 100px;
    padding: 6px 18px;
    font-size: 12px; font-weight: 600;
    color: var(--sk-gold);
    letter-spacing: .4px; margin-bottom: 28px;
}
.sk-dest-hero-flag { font-size: 18px; }

.sk-dest-hero-title {
    font-family: var(--sk-font-h);
    font-size: clamp(34px, 5.5vw, 60px);
    font-weight: 800; line-height: 1.1; letter-spacing: -1.5px;
    color: #fff;
    margin: 0 0 16px;
    transition: color .25s;
	background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #00c8ff, #ff5fa0);
}
html.sk-light .sk-dest-hero-title { color: #1a1612; }

.sk-dest-hero-title em {
    font-style: normal;
    background: linear-gradient(110deg, var(--sk-gold) 20%, var(--sk-terra) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sk-dest-hero-sub {
    font-size: 15px; color: var(--sk-muted);
    line-height: 1.65; margin: 0 0 36px;
}

/* Category filter pills in hero */
.sk-dest-cat-pills {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; scroll-snap-type: x mandatory;
    padding-bottom: 4px;
}
.sk-dest-cat-pills::-webkit-scrollbar { display: none; }

.sk-dcp {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 15px; border-radius: 100px;
    font-size: 12px; font-weight: 600; text-decoration: none;
    background: var(--sk-chip-bg);
    border: 1px solid var(--sk-chip-border);
    color: var(--sk-muted);
    transition: all .18s;
    white-space: nowrap; scroll-snap-align: start;
    flex-shrink: 0;
}
.sk-dcp:hover,
.sk-dcp--active {
    background: rgba(245,158,11,0.12);
    border-color: rgba(245,158,11,0.35);
    color: var(--sk-gold);
}


/* ═══════════════════════════════════════════════════════════
   3. SEO INTRO BLOCK
═══════════════════════════════════════════════════════════ */

.sk-dest-intro {
    background: var(--dest-intro-bg);
    border-top: 1px solid var(--dest-intro-bdr);
    border-bottom: 1px solid var(--dest-intro-bdr);
    transition: background .25s;
}
.sk-dest-intro-inner {
    max-width: var(--sk-max); margin: 0 auto;
    padding: 28px 24px;
    display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap;
}
.sk-dest-intro-heading {
    font-family: var(--sk-font-h);
    font-size: 16px; font-weight: 700;
    color: var(--sk-text); margin: 0;
    white-space: nowrap; flex-shrink: 0;
}
.sk-dest-intro-text {
    font-size: 13px; color: var(--sk-muted);
    line-height: 1.7; margin: 0; max-width: 680px;
}


/* ═══════════════════════════════════════════════════════════
   4. CITY TABS (sticky)
═══════════════════════════════════════════════════════════ */

.sk-dest-cities {
    position: sticky; top: 0; z-index: 50;
    background: var(--dest-cities-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sk-border);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transition: background .25s;
}
.sk-dest-cities::-webkit-scrollbar { display: none; }
.sk-dest-cities-inner {
    max-width: var(--sk-max); margin: 0 auto;
    display: flex; gap: 4px; padding: 10px 24px;
    flex-wrap: nowrap;
}
.sk-dct {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 10px;
    font-size: 13px; font-weight: 600;
    white-space: nowrap; text-decoration: none;
    color: var(--sk-muted); transition: all .15s;
}
.sk-dct:hover, .sk-dct--active {
    background: rgba(245,158,11,0.1);
    color: var(--sk-gold);
}
.sk-dct-count {
    font-size: 10px; font-weight: 700;
    background: var(--sk-chip-bg);
    border-radius: 100px; padding: 1px 6px;
    color: var(--sk-muted);
}


/* ═══════════════════════════════════════════════════════════
   5. LAYOUT
═══════════════════════════════════════════════════════════ */

.sk-dest-layout {
    max-width: var(--sk-max); margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 290px;
    gap: 32px; padding: 36px 24px 64px;
    align-items: start;
}
.sk-dest-main { min-width: 0; }


/* ═══════════════════════════════════════════════════════════
   6. DESTINATION MOSAIC GRID + CARDS
═══════════════════════════════════════════════════════════ */

.sk-dest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Card size variants */
.sk-dcard--hero { grid-column: span 2; grid-row: span 2; }
.sk-dcard--hero .sk-dcard-img-wrap { aspect-ratio: 4/3; }
.sk-dcard--hero .sk-dcard-title    { font-size: 20px; }
.sk-dcard--wide { grid-column: span 2; }
.sk-dcard--wide .sk-dcard-img-wrap { aspect-ratio: 16/7; }

/* Base card */
.sk-dcard {
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    overflow: hidden; display: flex; flex-direction: column;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.sk-dcard:hover {
    border-color: rgba(245,158,11,0.3);
    transform: translateY(-4px);
    box-shadow: var(--sk-card-shadow);
}

/* Card image */
.sk-dcard-img-wrap {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 4/3; background: var(--sk-bg3);
}
.sk-dcard-img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .45s ease; display: block;
}
.sk-dcard:hover .sk-dcard-img { transform: scale(1.05); }

.sk-dcard-img-overlay {
    position: absolute; inset: 0;
    background: var(--dest-overlay);
}
.sk-dcard-img-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--sk-bg3); font-size: 48px; opacity: .35;
}

/* Badge (category label over image) */
.sk-dcard-badge {
    position: absolute; bottom: 10px; left: 10px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 8px;
    font-size: 11px; font-weight: 700;
    background: var(--dest-badge-bg);
    border: 1px solid var(--dest-badge-bdr);
    /* --badge-color and --badge-color-light set inline via PHP */
    color: var(--badge-color, #f59e0b);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    letter-spacing: .3px;
}
html.sk-light .sk-dcard-badge {
    color: var(--badge-color-light, #b45309);
}

.sk-dcard-rank {
    position: absolute; top: 10px; right: 10px;
    background: var(--sk-gold); color: #07080f;
    font-size: 11px; font-weight: 800;
    padding: 3px 8px; border-radius: 6px;
    font-family: var(--sk-font-h);
}

/* Card body */
.sk-dcard-body {
    padding: 16px; flex: 1;
    display: flex; flex-direction: column; gap: 8px;
}
.sk-dcard-location {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sk-dcard-city-tag {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--sk-gold);
}
.sk-dcard-kr { font-size: 11px; color: var(--sk-muted); }

.sk-dcard-title {
    font-family: var(--sk-font-h);
    font-size: 15px; font-weight: 700; line-height: 1.3;
    color: var(--sk-text); margin: 0;
}
.sk-dcard-title a { text-decoration: none; color: inherit; }
.sk-dcard-title a:hover { color: var(--sk-gold); }

.sk-dcard-excerpt {
    font-size: 13px; line-height: 1.6;
    color: var(--sk-muted); margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Chips */
.sk-dcard-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.sk-dchip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 600;
    padding: 3px 8px; border-radius: 6px;
    background: var(--sk-chip-bg);
    border: 1px solid var(--sk-chip-border);
    color: var(--sk-muted); white-space: nowrap;
}
.sk-dchip--fee    { color: var(--dest-fee-color);    border-color: var(--dest-fee-bdr);  max-width: 100%;  }
.sk-dchip--fee   span { overflow: hidden;   text-overflow: clip;}
.sk-dchip--hours  { color: var(--dest-hours-color);  border-color: var(--dest-hours-bdr);  }
.sk-dchip--season { color: var(--dest-season-color); border-color: var(--dest-season-bdr); }

/* Card CTA link */
.sk-dcard-cta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; color: var(--sk-gold);
    text-decoration: none; margin-top: auto; padding-top: 10px;
    border-top: 1px solid var(--sk-border);
    transition: opacity .15s;
}
.sk-dcard-cta:hover { opacity: .75; }


/* ═══════════════════════════════════════════════════════════
   7. RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 980px) {
    .sk-dest-layout                { grid-template-columns: 1fr; }
    .sk-dest-sidebar               { display: none; }
    .sk-dest-grid                  { grid-template-columns: repeat(2, 1fr); }
    .sk-dcard--hero                { grid-column: 1 / -1; grid-row: span 1; }
    .sk-dcard--wide                { grid-column: 1 / -1; }
    .sk-dest-intro-inner           { flex-direction: column; gap: 8px; }
    .sk-dest-intro-heading         { white-space: normal; }
}
@media (max-width: 640px) {
    .sk-dest-hero                  { padding: 64px 16px 44px; }
    .sk-dest-hero-title            { font-size: 32px; }
    .sk-dest-cat-pills             { justify-content: flex-start; }
    .sk-dcp                        { padding: 6px 12px; font-size: 11px; }
    .sk-dest-grid                  { grid-template-columns: 1fr; }
    .sk-dcard--hero, .sk-dcard--wide { grid-column: 1; }
    .sk-dest-layout                { padding: 20px 16px 48px; }
}