/**
 * Kashi of North — kon-cards-v2.css
 * Enhanced card UI: better visual hierarchy, Quick View, conversion-focused
 * booking buttons, hover overlays, urgency signals, and price prominence.
 *
 * Loaded AFTER kon-enhance.css so all overrides win cleanly.
 * Enqueue via functions.php: wp_enqueue_style('kon-cards-v2', ..., ['kon-enhance'], KON_VER);
 */

/* =============================================================
   1. CARD STRUCTURAL RESET — tighter radius, deeper shadow,
      position:relative so the Quick View overlay can anchor to it
   ============================================================= */
.kon-card.kon-card {
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(16, 41, 31, .07), 0 12px 32px -12px rgba(16, 41, 31, .18);
    border: 1px solid var(--kon-border);
    transition: transform .32s cubic-bezier(.16,1,.3,1),
                box-shadow .32s cubic-bezier(.16,1,.3,1),
                border-color .2s ease;
    position: relative;
    overflow: visible; /* allow the quick-view pill to peek above the card */
    isolation: isolate;
}
.kon-card.kon-card:hover {
    transform: translateY(-8px) scale(1.008);
    box-shadow: 0 8px 16px rgba(16, 41, 31, .08), 0 28px 56px -20px rgba(16, 41, 31, .28);
    border-color: var(--kon-border-strong);
    z-index: 2;
}

/* Clip the thumb (has its own border-radius) */
.kon-card__inner-clip {
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--kon-white);
}

/* =============================================================
   2. THUMB — gradient scrim for legibility, aspect ratio tweak
   ============================================================= */
.kon-card__thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--kon-pine-light);
    border-radius: 18px 18px 0 0;
    flex-shrink: 0;
}

/* Bottom-to-top dark scrim so title/price overlaid on image reads */
.kon-card__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(16, 41, 31, .52) 0%,
        rgba(16, 41, 31, .18) 42%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity .3s ease;
}
.kon-card:hover .kon-card__thumb::after {
    opacity: 1;
}

/* =============================================================
   3. QUICK VIEW OVERLAY — appears on hover, anchored to thumb
   ============================================================= */
.kon-card__quick-view {
    position: absolute;
    bottom: .85rem;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
    white-space: nowrap;
}
.kon-card:hover .kon-card__quick-view {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.kon-btn--quickview {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .55em 1.25em;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--kon-pine);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .01em;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, .7);
    box-shadow: 0 4px 16px rgba(16, 41, 31, .18);
    cursor: pointer;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.kon-btn--quickview:hover {
    background: #fff;
    color: var(--kon-pine-dk);
    box-shadow: 0 6px 24px rgba(16, 41, 31, .24);
}
.kon-btn--quickview svg,
.kon-btn--quickview .kon-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* =============================================================
   4. BADGE ROW — top-left price badge + top-right availability
   ============================================================= */
.kon-card__badge-row {
    position: absolute;
    top: .75rem;
    left: .75rem;
    right: .75rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .4rem;
    z-index: 3;
}

/* Price badge — now orange pill, prominent */
.kon-badge--price {
    display: inline-flex;
    align-items: baseline;
    gap: .2em;
    background: var(--kon-orange);
    color: #fff;
    font-weight: 800;
    font-size: .82rem;
    padding: .38em .9em;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(228, 100, 42, .45);
    letter-spacing: -.01em;
    line-height: 1;
}
.kon-badge--price .kon-badge__unit {
    font-size: .68em;
    font-weight: 600;
    opacity: .88;
}

/* Available badge */
.kon-badge--avail {
    background: rgba(37, 211, 102, .15);
    color: #1A7A40;
    font-size: .7rem;
    font-weight: 700;
    padding: .32em .75em;
    border-radius: 999px;
    border: 1px solid rgba(37, 211, 102, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Verified badge */
.kon-badge--verified-v2 {
    background: rgba(255, 255, 255, .85);
    color: var(--kon-pine);
    font-size: .68rem;
    font-weight: 700;
    padding: .3em .7em;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: inline-flex;
    align-items: center;
    gap: .25em;
}

/* =============================================================
   5. CARD BODY — cleaner spacing, price line prominent
   ============================================================= */
.kon-card__body {
    padding: var(--kon-space-md) var(--kon-space-md) .6rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1;
}

/* Location meta — subtle but scannable */
.kon-card__meta {
    font-size: .74rem;
    color: var(--kon-ink-soft);
    display: flex;
    align-items: center;
    gap: .3em;
    margin: 0;
}

/* Title — slightly bigger, tight leading */
.kon-card__title {
    font-family: var(--kon-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--kon-ink);
    margin: 0;
    line-height: 1.25;
}
.kon-card__title a {
    color: inherit;
    text-decoration: none;
}
.kon-card__title a:hover { color: var(--kon-pine-mid); }

/* Rating row */
.kon-card__rating-row {
    display: flex;
    align-items: center;
    gap: .45rem;
}
.kon-rating__stars-v2 {
    color: #F59E0B;
    font-size: .78rem;
    letter-spacing: 1px;
}
.kon-rating__score {
    font-weight: 700;
    font-size: .8rem;
    color: var(--kon-ink);
}
.kon-rating__count {
    font-size: .74rem;
    color: var(--kon-ink-soft);
}

/* Excerpt */
.kon-card__excerpt {
    font-size: .85rem;
    color: var(--kon-ink-mid);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* Tags row */
.kon-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .1rem;
}
.kon-card-tag {
    font-size: .71rem;
    font-weight: 600;
    color: var(--kon-pine-mid);
    background: var(--kon-pine-light);
    padding: .25em .65em;
    border-radius: 999px;
    border: 1px solid rgba(45, 106, 79, .15);
}

/* =============================================================
   6. FOOTER — full-width primary CTA + secondary icon button row
   ============================================================= */
.kon-card__footer {
    padding: .75rem var(--kon-space-md) var(--kon-space-md);
    display: flex;
    flex-direction: column;
    gap: .55rem;
    border-top: 1px solid var(--kon-border);
    margin-top: auto;
    background: linear-gradient(to bottom, transparent, rgba(250, 247, 241, .45));
}

/* Full-width primary CTA row */
.kon-card__cta-primary {
    display: flex;
    gap: .5rem;
}
.kon-card__cta-primary .kon-btn--book {
    flex: 1;
}

/* Secondary actions row (View + Call/WhatsApp) */
.kon-card__cta-secondary {
    display: flex;
    gap: .45rem;
    align-items: center;
}
.kon-card__cta-secondary .kon-btn--view {
    flex: 1;
}
.kon-card__cta-secondary .kon-btn--contact {
    flex-shrink: 0;
}

/* Book button — high-contrast orange, conversion-first */
.kon-btn--book {
    background: linear-gradient(135deg, var(--kon-orange) 0%, var(--kon-orange-dk) 100%);
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    padding: .72rem 1.25rem;
    border-radius: var(--kon-radius-pill);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(228, 100, 42, .38);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: .01em;
}
.kon-btn--book:hover {
    background: linear-gradient(135deg, #F07030 0%, #B84018 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(228, 100, 42, .5);
    color: #fff;
}
.kon-btn--book:active {
    transform: translateY(0) scale(.98);
}

/* View Details button — clean outline */
.kon-btn--view {
    background: var(--kon-white);
    color: var(--kon-pine);
    border: 1.5px solid var(--kon-border-strong);
    font-weight: 600;
    font-size: .83rem;
    padding: .65rem 1rem;
    border-radius: var(--kon-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35em;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
    cursor: pointer;
    white-space: nowrap;
}
.kon-btn--view:hover {
    border-color: var(--kon-pine);
    background: var(--kon-pine-light);
    color: var(--kon-pine-dk);
    transform: translateY(-1px);
}

/* WhatsApp contact icon button */
.kon-btn--contact-wa {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kon-wa-green);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(37, 211, 102, .35);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
}
.kon-btn--contact-wa:hover {
    background: var(--kon-wa-green-dk);
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(37, 211, 102, .45);
    color: #fff;
}

/* Phone icon button */
.kon-btn--contact-call {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kon-blue);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: .9rem;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(44, 110, 145, .3);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
}
.kon-btn--contact-call:hover {
    background: var(--kon-blue-dk);
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(44, 110, 145, .4);
    color: #fff;
}

/* =============================================================
   7. URGENCY SIGNAL — "Only X rooms left" strip above footer
   ============================================================= */
.kon-card__urgency {
    display: flex;
    align-items: center;
    gap: .4em;
    font-size: .72rem;
    font-weight: 600;
    color: #C0392B;
    background: #FEF0EE;
    border: 1px solid rgba(192, 57, 43, .18);
    border-radius: var(--kon-radius-pill);
    padding: .3em .75em;
    margin: .25rem var(--kon-space-md) 0;
    width: fit-content;
}
.kon-card__urgency::before {
    content: '●';
    font-size: .55em;
    animation: kon-pulse-dot 1.4s ease-in-out infinite;
}
@keyframes kon-pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* =============================================================
   8. QUICK VIEW MODAL
   ============================================================= */
.kon-modal--qv {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.kon-modal--qv.is-open {
    opacity: 1;
    pointer-events: auto;
}

.kon-modal--qv__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 41, 31, .58);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

.kon-modal--qv__panel {
    position: relative;
    background: var(--kon-white);
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 32px 96px -24px rgba(16, 41, 31, .42);
    transform: translateY(16px) scale(.97);
    transition: transform .3s cubic-bezier(.16,1,.3,1);
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.kon-modal--qv.is-open .kon-modal--qv__panel {
    transform: translateY(0) scale(1);
}

.kon-modal--qv__img {
    position: relative;
    min-height: 280px;
    background: var(--kon-pine-light);
    overflow: hidden;
}
.kon-modal--qv__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}
.kon-modal--qv__img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    width: 100%;
    height: 100%;
    min-height: 280px;
    background: linear-gradient(135deg, var(--kon-pine-light), var(--kon-blue-light));
}

.kon-modal--qv__body {
    padding: 1.75rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    overflow-y: auto;
}

.kon-modal--qv__close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 10;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--kon-ink);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: background .2s ease, transform .2s ease;
}
.kon-modal--qv__close:hover {
    background: #fff;
    transform: scale(1.1);
}

.kon-modal--qv__eyebrow {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--kon-pine-mid);
    margin: 0;
}

.kon-modal--qv__title {
    font-family: var(--kon-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--kon-ink);
    margin: 0;
    line-height: 1.2;
}

.kon-modal--qv__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .85rem;
    font-size: .8rem;
    color: var(--kon-ink-soft);
}
.kon-modal--qv__meta-item {
    display: flex;
    align-items: center;
    gap: .3em;
}

.kon-modal--qv__excerpt {
    font-size: .9rem;
    color: var(--kon-ink-mid);
    line-height: 1.6;
    margin: 0;
}

.kon-modal--qv__price-row {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}
.kon-modal--qv__price {
    font-family: var(--kon-font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--kon-pine);
    line-height: 1;
}
.kon-modal--qv__price-unit {
    font-size: .82rem;
    color: var(--kon-ink-soft);
    font-weight: 500;
}

.kon-modal--qv__actions {
    display: flex;
    gap: .6rem;
    flex-direction: column;
    margin-top: auto;
    padding-top: .5rem;
}
.kon-modal--qv__actions .kon-btn--book {
    width: 100%;
    padding: .85rem;
    font-size: .95rem;
}
.kon-modal--qv__actions .kon-btn--view {
    width: 100%;
    padding: .72rem;
}
.kon-modal--qv__actions .kon-secondary-row {
    display: flex;
    gap: .5rem;
}
.kon-modal--qv__actions .kon-secondary-row .kon-btn--contact-wa,
.kon-modal--qv__actions .kon-secondary-row .kon-btn--contact-call {
    width: auto;
    padding: .72rem 1rem;
    border-radius: var(--kon-radius-pill);
    flex: 1;
    height: auto;
    font-size: .83rem;
    font-weight: 700;
    gap: .4em;
}

/* =============================================================
   9. MOBILE — stack quick view modal + single-column cards
   ============================================================= */
@media (max-width: 680px) {
    .kon-modal--qv__panel {
        grid-template-columns: 1fr;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
        align-self: flex-end;
        margin: 0 -1rem -1rem;
        max-width: calc(100% + 2rem);
        width: calc(100% + 2rem);
    }
    .kon-modal--qv {
        align-items: flex-end;
        padding: 0;
    }
    .kon-modal--qv__img {
        min-height: 200px;
        aspect-ratio: 16 / 9;
    }
    .kon-modal--qv__img img {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .kon-modal--qv__body {
        padding: 1.25rem 1.25rem 2rem;
    }
    .kon-modal--qv__title { font-size: 1.15rem; }
    .kon-modal--qv__price { font-size: 1.4rem; }

    /* Card footer adapts to smaller screens */
    .kon-card__cta-primary .kon-btn--book { font-size: .82rem; padding: .68rem 1rem; }
    .kon-card__cta-secondary .kon-btn--view { font-size: .78rem; padding: .6rem .85rem; }
}

@media (max-width: 400px) {
    .kon-card__cta-secondary {
        flex-wrap: wrap;
    }
    .kon-card__cta-secondary .kon-btn--view {
        flex: 1 1 100%;
    }
}

/* =============================================================
   10. LIST VIEW — override for the new two-row footer in list mode
   ============================================================= */
.kon-cards-grid.is-list .kon-card__footer {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    border-left: 1px solid var(--kon-border);
    border-top: none;
    width: 190px;
    flex-shrink: 0;
    padding: var(--kon-space-md);
    gap: .5rem;
    background: linear-gradient(to right, var(--kon-bg), var(--kon-white));
}
.kon-cards-grid.is-list .kon-card__cta-primary,
.kon-cards-grid.is-list .kon-card__cta-secondary {
    flex-direction: column;
}
.kon-cards-grid.is-list .kon-card__urgency {
    margin: 0;
}
@media (max-width: 720px) {
    .kon-cards-grid.is-list .kon-card__footer {
        flex-direction: row;
        width: auto;
        border-left: none;
        border-top: 1px solid var(--kon-border);
        flex-wrap: wrap;
        background: none;
    }
    .kon-cards-grid.is-list .kon-card__cta-primary,
    .kon-cards-grid.is-list .kon-card__cta-secondary {
        flex-direction: row;
    }
}

/* =============================================================
   11. GRID — slightly tighter gap on mobile, bigger on desktop
   ============================================================= */
.kon-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(1rem, 2.2vw, 1.8rem);
}
@media (min-width: 1500px) {
    .kon-cards-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) and (max-width: 1180px) {
    .kon-cards-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .kon-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .85rem;
    }
}
@media (max-width: 400px) {
    .kon-cards-grid { grid-template-columns: 1fr; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .kon-card.kon-card,
    .kon-card__quick-view,
    .kon-modal--qv__panel,
    .kon-btn--book,
    .kon-btn--view,
    .kon-btn--quickview {
        transition: none !important;
        animation: none !important;
    }
    .kon-card__urgency::before { animation: none; }
}

/* =============================================================
   12. TAXI DRIVER CARD — action row uses the same v2 buttons
   ============================================================= */
.kon-dca__actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: var(--kon-space-md);
    border-top: 1px solid var(--kon-border);
    background: linear-gradient(to bottom, transparent, rgba(250, 247, 241, .45));
}
.kon-driver-card-archive.kon-driver-card-archive {
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(16, 41, 31, .07), 0 12px 32px -12px rgba(16, 41, 31, .18);
    transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s cubic-bezier(.16,1,.3,1);
    overflow: hidden;
}
.kon-driver-card-archive.kon-driver-card-archive:hover {
    transform: translateY(-8px) scale(1.008);
    box-shadow: 0 8px 16px rgba(16, 41, 31, .08), 0 28px 56px -20px rgba(16, 41, 31, .28);
}