/**
 * Kashi of North — kon-cards-glass.css
 * Glassmorphism enhancement layer for the HOME PAGE and ARCHIVE PAGE
 * card families: frosted-glass panels, translucent chips/buttons,
 * ambient colour-wash backdrops so the blur has something to catch,
 * and light-catching hover states.
 *
 * Scope: .kon-card (home + archive), .kon-category-card,
 * .kon-home-news-card, .kon-home-biz-card, .kon-testimonial-card,
 * .kon-home-region-card, .kon-dest-strip__card, the archive Quick
 * View modal, and the taxi driver card.
 *
 * Load order: LAST.
 *  - Home page:    kon-child-style → kon-enhance → [this file]
 *  - Archive pages: kon-enhance → kon-archive → kon-cards-v2 →
 *                    kon-filter-sidebar → [this file]
 * Enqueued in functions.php only on is_front_page() / archive+tax,
 * so every selector below is safe to declare broadly.
 */

/* =============================================================
   0. GLASS DESIGN TOKENS
   ============================================================= */
:root {
    --kon-glass-bg:          rgba(255, 255, 255, .52);
    --kon-glass-bg-strong:   rgba(255, 255, 255, .72);
    --kon-glass-bg-deep:     rgba(255, 255, 255, .88);
    --kon-glass-bg-dark:     rgba(16, 41, 31, .38);
    --kon-glass-border:      rgba(255, 255, 255, .55);
    --kon-glass-border-soft: rgba(255, 255, 255, .34);
    --kon-glass-highlight:   rgba(255, 255, 255, .85);
    --kon-glass-blur:        blur(14px) saturate(160%);
    --kon-glass-blur-lg:     blur(22px) saturate(170%);
    --kon-glass-blur-sm:     blur(8px) saturate(140%);
    --kon-glass-shadow:      0 1px 1px rgba(16, 41, 31, .05), 0 12px 32px -14px rgba(16, 41, 31, .28);
    --kon-glass-shadow-hover:0 4px 10px rgba(16, 41, 31, .08), 0 26px 56px -18px rgba(16, 41, 31, .34);
}

/* =============================================================
   1. AMBIENT COLOUR WASH
   Soft, low-opacity mountain-light blobs behind the card grids so
   the frosted-glass panels have colour to catch. Pure gradients —
   no filter:blur used here, so there is nothing to clip or that
   can leak past a container edge.
   ============================================================= */
body.home,
body.archive {
    background-image:
        radial-gradient(560px 420px at 8% 0%,   rgba(45, 106, 79, .07), transparent 65%),
        radial-gradient(620px 460px at 96% 18%, rgba(228, 100, 42, .06), transparent 65%),
        radial-gradient(520px 520px at 50% 100%, rgba(44, 110, 145, .06), transparent 65%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
@media (max-width: 782px) {
    /* background-attachment:fixed is expensive/janky on mobile browsers */
    body.home,
    body.archive {
        background-attachment: scroll;
    }
}

/* =============================================================
   2. .kon-card — GLASS UPGRADE
   Applies to plain homepage cards AND the enhanced archive (v2)
   cards, since both share the same markup/classes.
   ============================================================= */
.kon-card.kon-card {
    background: transparent;
    border-color: var(--kon-glass-border-soft);
    box-shadow: var(--kon-glass-shadow);
    isolation: isolate;
}
.kon-card.kon-card:hover {
    box-shadow: var(--kon-glass-shadow-hover);
    border-color: var(--kon-glass-border);
}

/* Homepage cards clip on .kon-card itself; archive (v2) cards clip
   on .kon-card__inner-clip. Neutralise both to transparent so the
   ambient wash + thumbnail colour bleed through the glass panels. */
.kon-card.kon-card,
.kon-card__inner-clip {
    background: transparent;
}

.kon-card__body {
    position: relative;
    background: var(--kon-glass-bg);
    -webkit-backdrop-filter: var(--kon-glass-blur);
    backdrop-filter: var(--kon-glass-blur);
    box-shadow: inset 0 1px 0 var(--kon-glass-highlight);
}
.kon-card__footer {
    position: relative;
    background: var(--kon-glass-bg-strong);
    -webkit-backdrop-filter: var(--kon-glass-blur);
    backdrop-filter: var(--kon-glass-blur);
    border-top-color: var(--kon-glass-border-soft);
}
.kon-cards-grid.is-list .kon-card__footer {
    background: var(--kon-glass-bg-strong);
    border-left-color: var(--kon-glass-border-soft);
}

/* Diagonal light-sweep on hover — a small glass "tell" */
.kon-card.kon-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.30) 48%, transparent 58%);
    background-size: 220% 220%;
    background-position: 120% 0%;
    opacity: 0;
    transition: opacity .25s ease, background-position .7s ease;
    border-radius: inherit;
}
.kon-card.kon-card:hover::after {
    opacity: 1;
    background-position: -20% 0%;
}
@media (max-width: 782px) {
    .kon-card.kon-card::after { display: none; } /* skip on touch — no hover state to trigger it */
}

/* Badges keep the pill/blur look but align to the shared tokens */
.kon-badge--avail,
.kon-badge--verified-v2 {
    background: var(--kon-glass-bg-deep);
    -webkit-backdrop-filter: var(--kon-glass-blur-sm);
    backdrop-filter: var(--kon-glass-blur-sm);
    border-color: var(--kon-glass-border);
}

/* "View Details" is now an intentionally plain text link (see
   kon-cards-v2.css §6 — de-emphasised on purpose so the orange Book
   CTA reads as the one obvious action per card). Leave it transparent
   here too; giving it a glass chip would recreate the two-competing-
   buttons problem the redesign removed. */

/* Quick View pill — align to shared tokens */
.kon-btn--quickview {
    background: var(--kon-glass-bg-deep);
    -webkit-backdrop-filter: var(--kon-glass-blur);
    backdrop-filter: var(--kon-glass-blur);
    border-color: var(--kon-glass-border);
}

/* Taxi driver card + generic biz-card share the same clip pattern */
.kon-driver-card-archive.kon-driver-card-archive,
.kon-biz-card.kon-biz-card {
    background: transparent;
    box-shadow: var(--kon-glass-shadow);
}
.kon-dca__actions {
    background: var(--kon-glass-bg-strong);
    -webkit-backdrop-filter: var(--kon-glass-blur);
    backdrop-filter: var(--kon-glass-blur);
}

/* =============================================================
   3. QUICK VIEW MODAL — glass panel over the blurred backdrop
   ============================================================= */
.kon-modal--qv__panel {
    background: var(--kon-glass-bg-deep);
    -webkit-backdrop-filter: var(--kon-glass-blur-lg);
    backdrop-filter: var(--kon-glass-blur-lg);
    border: 1px solid var(--kon-glass-border);
}
.kon-modal--qv__close {
    background: var(--kon-glass-bg-deep);
    -webkit-backdrop-filter: var(--kon-glass-blur-sm);
    backdrop-filter: var(--kon-glass-blur-sm);
}

/* =============================================================
   4. .kon-category-card — frosted explore tile
   ============================================================= */
.kon-category-card {
    background: var(--kon-glass-bg-strong);
    border-color: var(--kon-glass-border);
    -webkit-backdrop-filter: var(--kon-glass-blur);
    backdrop-filter: var(--kon-glass-blur);
    box-shadow: var(--kon-glass-shadow);
    position: relative;
    overflow: hidden;
}
.kon-category-card:hover {
    border-color: var(--kon-glass-highlight);
    box-shadow: var(--kon-glass-shadow-hover);
}
.kon-category-card__icon {
    -webkit-backdrop-filter: var(--kon-glass-blur-sm);
    backdrop-filter: var(--kon-glass-blur-sm);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
    transition: transform var(--kon-transition-slow, .35s ease);
}
.kon-category-card:hover .kon-category-card__icon {
    transform: scale(1.08);
}
/* per-category glass tints (swap solid pastel fills for translucent) */
.kon-category-card--hotels .kon-category-card__icon  { background: rgba(255, 179, 71, .28); }
.kon-category-card--places .kon-category-card__icon  { background: rgba(45, 106, 79, .18); }
.kon-category-card--taxi .kon-category-card__icon    { background: rgba(44, 110, 145, .20); }
.kon-category-card--biz .kon-category-card__icon     { background: rgba(155, 89, 182, .20); }
.kon-category-card--temples .kon-category-card__icon { background: rgba(245, 197, 24, .26); }

/* =============================================================
   5. .kon-home-news-card — glass body panel
   ============================================================= */
.kon-home-news-card {
    background: var(--kon-glass-bg);
    border-color: var(--kon-glass-border-soft);
    box-shadow: var(--kon-glass-shadow);
}
.kon-home-news-card:hover {
    box-shadow: var(--kon-glass-shadow-hover);
    transform: translateY(-4px);
}
.kon-home-news-card__body {
    position: relative;
    background: var(--kon-glass-bg-strong);
    -webkit-backdrop-filter: var(--kon-glass-blur);
    backdrop-filter: var(--kon-glass-blur);
}
.kon-home-news-card__cat {
    display: inline-block;
    background: var(--kon-pine-light);
    padding: .2em .65em;
    border-radius: 999px;
}

/* =============================================================
   6. .kon-home-biz-card — reveal-on-hover glass backing
   No markup change available here (caption sits below the photo,
   not overlaid), so the glass state is a soft panel that fades in
   behind the whole card on hover/focus instead of a static one.
   ============================================================= */
.kon-home-biz-card {
    position: relative;
    isolation: isolate;
    border-radius: var(--kon-radius-lg);
    padding: .6rem .5rem .7rem;
    margin: -.6rem -.5rem -.7rem;
}
.kon-home-biz-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--kon-glass-bg);
    border: 1px solid var(--kon-glass-border-soft);
    -webkit-backdrop-filter: var(--kon-glass-blur);
    backdrop-filter: var(--kon-glass-blur);
    opacity: 0;
    transform: scale(.96);
    transition: opacity .25s ease, transform .25s ease;
}
.kon-home-biz-card:hover::before,
.kon-home-biz-card:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}
.kon-home-biz-card__img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16,41,31,.32), transparent 45%);
    pointer-events: none;
}
.kon-home-biz-card__verified {
    background: var(--kon-glass-bg-deep);
    color: var(--kon-pine-dk);
    -webkit-backdrop-filter: var(--kon-glass-blur-sm);
    backdrop-filter: var(--kon-glass-blur-sm);
    box-shadow: 0 2px 8px rgba(16,41,31,.25);
}

/* =============================================================
   7. .kon-testimonial-card — frosted quote panel
   ============================================================= */
.kon-testimonial-card {
    position: relative;
    background: var(--kon-glass-bg);
    border-color: var(--kon-glass-border-soft);
    -webkit-backdrop-filter: var(--kon-glass-blur);
    backdrop-filter: var(--kon-glass-blur);
    box-shadow: var(--kon-glass-shadow);
    overflow: hidden;
}
.kon-testimonial-card:hover {
    box-shadow: var(--kon-glass-shadow-hover);
    border-color: var(--kon-glass-border);
}
.kon-testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: -.3rem;
    right: .6rem;
    font-family: var(--kon-font-display);
    font-size: 5rem;
    line-height: 1;
    color: var(--kon-pine);
    opacity: .07;
    pointer-events: none;
}

/* =============================================================
   8. .kon-home-region-card — glass pill
   ============================================================= */
.kon-home-region-card {
    background: var(--kon-glass-bg-strong);
    border: 1px solid var(--kon-glass-border-soft);
    -webkit-backdrop-filter: var(--kon-glass-blur);
    backdrop-filter: var(--kon-glass-blur);
    box-shadow: var(--kon-glass-shadow);
}
.kon-home-region-card:hover {
    box-shadow: var(--kon-glass-shadow-hover);
    border-color: var(--kon-glass-border);
}
.kon-home-region-card__icon {
    filter: drop-shadow(0 2px 6px rgba(27,67,50,.25));
}

/* =============================================================
   9. .kon-dest-strip__card — frosted caption bar over the photo
   Textbook glassmorphism: the gradient scrim stays for contrast,
   the caption block itself gets its own blur so it reads as a
   pane of glass laid over the image, not just a dark fade.
   ============================================================= */
.kon-dest-strip__body {
    background: linear-gradient(to top, rgba(10, 20, 5, .48) 0%, rgba(10, 20, 5, .12) 78%, transparent 100%);
    -webkit-backdrop-filter: var(--kon-glass-blur-sm);
    backdrop-filter: var(--kon-glass-blur-sm);
    border-top: 1px solid rgba(255, 255, 255, .18);
}

/* =============================================================
   10. REDUCED TRANSPARENCY / MOTION / FALLBACKS
   ============================================================= */
@media (prefers-reduced-transparency: reduce) {
    .kon-card__body,
    .kon-card__footer,
    .kon-category-card,
    .kon-home-news-card__body,
    .kon-testimonial-card,
    .kon-home-region-card,
    .kon-home-biz-card::before,
    .kon-modal--qv__panel {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--kon-white);
    }
}
@media (prefers-reduced-motion: reduce) {
    .kon-card.kon-card::after,
    .kon-category-card__icon,
    .kon-home-biz-card::before {
        transition: none;
    }
}

/* Browsers without backdrop-filter support: fall back to a more
   opaque (but still tinted) surface so text stays legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .kon-card__body,
    .kon-card__footer,
    .kon-category-card,
    .kon-home-news-card__body,
    .kon-testimonial-card,
    .kon-home-region-card,
    .kon-home-biz-card::before,
    .kon-modal--qv__panel {
        background: var(--kon-glass-bg-deep);
    }
}

/* =============================================================
   11. MOBILE — lighter blur radius; GPU cost adds up with many
   cards on screen at once on lower-powered devices.
   ============================================================= */
@media (max-width: 640px) {
    :root {
        --kon-glass-blur:    blur(9px) saturate(150%);
        --kon-glass-blur-lg: blur(14px) saturate(160%);
        --kon-glass-blur-sm: blur(6px) saturate(130%);
    }
}