/* ==========================================================================
   KASHI RAMYA - components.css
   Buttons, cards, badges, forms, accordions, tabs, pagination, overlays.
   @see docs/design.md §4 Component Library
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kr-s2);
    min-height: 44px;
    padding: var(--kr-s3) var(--kr-s5);
    border: 2px solid transparent;
    border-radius: var(--kr-r-pill);
    font-family: var(--kr-font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform var(--kr-t-fast) var(--kr-ease),
                box-shadow var(--kr-t-fast) var(--kr-ease),
                background-color var(--kr-t-fast) var(--kr-ease),
                color var(--kr-t-fast) var(--kr-ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; }
.btn-block { width: 100%; }

.btn-sm { min-height: 36px; padding: var(--kr-s2) var(--kr-s4); font-size: var(--fs-xs); }
.btn-lg { min-height: 52px; padding: var(--kr-s4) var(--kr-s6); font-size: var(--fs-body); }
.btn-xl { min-height: 64px; padding: var(--kr-s5) var(--kr-s7); font-size: var(--fs-body); }

.btn-primary {
    background: var(--kr-grad-fire);
    color: #fff;
    box-shadow: var(--kr-sh-brand);
}
.btn-primary:hover { color: #fff; box-shadow: var(--kr-sh-lg); }

.btn-secondary {
    background: transparent;
    border-color: var(--kr-maroon);
    color: var(--kr-maroon);
}
.btn-secondary:hover { background: var(--kr-maroon); color: #fff; }

.btn-ghost {
    background: transparent;
    border-color: var(--kr-line);
    color: var(--kr-body);
}
.btn-ghost:hover { border-color: var(--kr-maroon); color: var(--kr-maroon); }

.btn-gold {
    background: var(--kr-grad-gold);
    color: var(--kr-ink);
    box-shadow: var(--kr-sh-gold);
}
.btn-gold:hover { color: var(--kr-ink); }

.btn-whatsapp { background: var(--kr-whatsapp); color: #fff; }
.btn-whatsapp:hover { color: #fff; box-shadow: var(--kr-sh-md); }

.btn-outline-light {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}
.btn-outline-light:hover { background: #fff; color: var(--kr-maroon); }

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: var(--kr-s2);
    color: var(--kr-orange-600);
    font-weight: 600;
    font-size: var(--fs-sm);
    border-radius: var(--kr-r-xs);
}

.btn-link:hover { color: var(--kr-maroon); gap: var(--kr-s3); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--kr-s3); }
.btn-row-center { justify-content: center; }

/* --------------------------------------------------------------------------
   Badges & chips
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--kr-r-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .03em;
    white-space: nowrap;
}

.badge-trending { background: var(--kr-red); color: #fff; }
.badge-bestseller { background: var(--kr-maroon); color: var(--kr-gold); }
.badge-new { background: var(--kr-green); color: #fff; }
.badge-sale { background: var(--kr-red); color: #fff; }
.badge-wholesale { background: var(--kr-gold-100); color: var(--kr-maroon); border: 1px solid var(--kr-gold); }
.badge-difficulty-easy { background: #E7F4EC; color: var(--kr-green); }
.badge-difficulty-moderate { background: var(--kr-orange-50); color: var(--kr-orange-600); }
.badge-difficulty-challenging { background: #FBEAEA; color: var(--kr-red-600); }
.badge-mode { background: var(--kr-sand); color: var(--kr-body); border: 1px solid var(--kr-line); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--kr-s2);
    padding: 4px var(--kr-s3);
    background: var(--kr-sand);
    border: 1px solid var(--kr-line);
    border-radius: var(--kr-r-pill);
    font-size: var(--fs-xs);
    color: var(--kr-body);
}

.chip-remove { border: 0; background: none; cursor: pointer; color: var(--kr-muted); line-height: 1; }
.chip-remove:hover { color: var(--kr-red-600); }

.chip.is-active {
    background: var(--kr-maroon);
    border-color: var(--kr-maroon);
    color: #fff;
    font-weight: 600;
}

a.chip:hover { border-color: var(--kr-orange); color: var(--kr-orange-600); }
a.chip.is-active:hover { color: #fff; }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--kr-s2); margin-bottom: var(--kr-s5); }

/* --------------------------------------------------------------------------
   Base card
   -------------------------------------------------------------------------- */
.card {
    background: var(--kr-ivory);
    border: 1px solid var(--kr-line);
    border-radius: var(--kr-r-md);
    box-shadow: var(--kr-sh-sm);
    overflow: hidden;
    transition: transform var(--kr-t) var(--kr-ease), box-shadow var(--kr-t) var(--kr-ease);
}

.card:hover { transform: translateY(-3px); box-shadow: var(--kr-sh-md); }
.card-media { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--kr-t-slow) var(--kr-ease); }
.card:hover .card-media img { transform: scale(1.04); }
.card-badge { position: absolute; top: var(--kr-s3); left: var(--kr-s3); }
.card-body { padding: var(--kr-s4); display: grid; gap: var(--kr-s3); }

.card-title { margin: 0; font-size: var(--fs-h4); line-height: 1.35; }
.card-title a { color: var(--kr-ink); }
.card-title a:hover { color: var(--kr-orange-600); }

.card-rating { display: flex; align-items: center; gap: var(--kr-s2); margin: 0; }
.card-rating-count { color: var(--kr-muted); font-size: var(--fs-xs); }

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kr-s4);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--kr-muted);
    font-size: var(--fs-xs);
}

.card-meta li { display: inline-flex; align-items: center; gap: 4px; margin: 0; }

.card-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.card-highlights li {
    margin: 0;
    padding: 2px var(--kr-s2);
    background: var(--kr-orange-50);
    border-radius: var(--kr-r-xs);
    color: var(--kr-body);
    font-size: 11.5px;
}

.card-highlights-more { background: var(--kr-sand) !important; color: var(--kr-muted) !important; }
.card-actions { display: flex; gap: var(--kr-s2); }
.card-actions .btn { flex: 1 1 0; }

/* Package card price */
.card-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--kr-s2); }
.price-strike { color: var(--kr-muted); font-size: var(--fs-sm); text-decoration: line-through; }
.price-now { color: var(--kr-red); font-size: var(--fs-h3); font-weight: 700; font-family: var(--kr-font-body); }
.price-unit { color: var(--kr-muted); font-size: var(--fs-xs); }

.card-duration-chip {
    position: absolute;
    right: var(--kr-s3);
    bottom: var(--kr-s3);
    padding: 3px var(--kr-s3);
    background: rgba(28, 21, 18, .78);
    color: #fff;
    border-radius: var(--kr-r-pill);
    font-size: var(--fs-xs);
    backdrop-filter: blur(4px);
}

/* Destination card */
.card-destination { position: relative; display: block; aspect-ratio: 4 / 5; color: #fff; }
.card-destination .card-media { position: absolute; inset: 0; aspect-ratio: auto; }
.card-destination .card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28, 21, 18, .05) 30%, rgba(74, 0, 0, .82) 100%);
}
.card-destination .card-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: var(--kr-s5);
    display: grid;
    gap: 4px;
}
.card-destination .card-title { color: #fff; font-size: var(--fs-h3); }
.card-destination .card-meta { color: rgba(255, 255, 255, .88); }
.card-destination .card-from { color: var(--kr-gold); font-weight: 700; }
.card-destination:hover { color: #fff; }

/* Circuit card */
.card-circuit-link {
    display: flex;
    align-items: center;
    gap: var(--kr-s4);
    padding: var(--kr-s3);
    color: var(--kr-ink);
}
.card-circuit-media { flex: 0 0 76px; width: 76px; height: 76px; border-radius: var(--kr-r-sm); overflow: hidden; }
.card-circuit-media img { width: 100%; height: 100%; object-fit: cover; }
.card-circuit-body { display: grid; gap: 4px; flex: 1 1 auto; }
.card-circuit-title { font-size: var(--fs-body); font-weight: 600; color: var(--kr-ink); }
.card-circuit-meta { display: flex; flex-wrap: wrap; gap: var(--kr-s3); color: var(--kr-muted); font-size: var(--fs-xs); }
.card-circuit-meta span { display: inline-flex; align-items: center; gap: 4px; }
.card-circuit-arrow { color: var(--kr-orange); }
.card-circuit:hover .card-circuit-arrow { transform: translateX(3px); }

/* Service card */
.card-service { padding: var(--kr-s5); display: grid; gap: var(--kr-s3); height: 100%; }

.card-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--kr-r-md);
    background: var(--kr-orange-50);
    color: var(--kr-orange-600);
}

.card-service-title { margin: 0; font-size: var(--fs-h4); }
.card-service-title a { color: var(--kr-ink); }
.card-service-text { margin: 0; color: var(--kr-muted); font-size: var(--fs-sm); }
.card-service-link { align-self: end; }

.card-service-media {
    margin: calc(-1 * var(--kr-s5)) calc(-1 * var(--kr-s5)) 0;
    border-radius: var(--kr-r-lg) var(--kr-r-lg) 0 0;
}

.card-service-icon-chip {
    position: absolute;
    left: 12px;
    bottom: 12px;
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
}

/* Hotel card */
.card-hotel { display: grid; gap: 0; }
@media (min-width: 640px) { .card-hotel { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); } }
.card-hotel .card-media { aspect-ratio: auto; height: 100%; min-height: 220px; }

/* Team member card (About page) — circular portrait, contact rows.
   Colours come from the theme tokens, so it tracks the brand. */
.card-team {
    padding: var(--kr-s6) var(--kr-s5) var(--kr-s5);
    display: grid;
    justify-items: center;
    gap: var(--kr-s3);
    text-align: center;
    height: 100%;
}

.card-team-avatar {
    position: relative;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(135deg, var(--kr-gold), var(--kr-orange));
}

.card-team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--kr-ivory);
    background: var(--kr-sand);
    display: block;
}

.card-team-name { margin: var(--kr-s2) 0 0; font-size: var(--fs-h4); }
.card-team-role {
    margin: 0;
    color: var(--kr-orange-600);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .02em;
}

.card-team-contacts {
    margin: var(--kr-s2) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--kr-s2);
    justify-items: center;
}

.card-team-contacts a {
    display: inline-flex;
    align-items: center;
    gap: var(--kr-s2);
    color: var(--kr-body);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: color .18s ease;
}

.card-team-contacts a:hover { color: var(--kr-maroon); }

.card-team-contacts .icon { color: var(--kr-orange-600); }

/* Founder keeps a maroon ring — they are shown on the home page too. */
.card-team.is-founder .card-team-avatar {
    background: linear-gradient(135deg, var(--kr-maroon), var(--kr-red));
}

/* Testimonial */
.card-testimonial { padding: var(--kr-s5); display: grid; gap: var(--kr-s3); position: relative; height: 100%; }
.card-testimonial-quote { color: var(--kr-gold); width: 30px; height: 30px; }
.card-testimonial-text { margin: 0; color: var(--kr-body); font-style: italic; }
.card-testimonial-text p { margin: 0; }
.card-testimonial-author { display: flex; align-items: center; gap: var(--kr-s3); }

.card-testimonial-avatar {
    width: 44px; height: 44px;
    border-radius: var(--kr-r-pill);
    object-fit: cover;
    flex: 0 0 44px;
}

.card-testimonial-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kr-maroon);
    color: var(--kr-gold);
    font-weight: 700;
    font-size: var(--fs-sm);
}

.card-testimonial-meta { display: grid; flex: 1 1 auto; }
.card-testimonial-name { color: var(--kr-ink); font-size: var(--fs-sm); }
.card-testimonial-city { color: var(--kr-muted); font-size: var(--fs-xs); }
.card-testimonial-badge { background: var(--kr-sand); color: var(--kr-muted); }

/* Stars */
.stars { display: inline-flex; align-items: center; gap: 1px; }
.star { width: 15px; height: 15px; fill: var(--kr-gold); stroke: var(--kr-gold); stroke-width: 1; }
.star-empty { fill: none; stroke: #D8CCC3; }
.stars-value { margin-left: var(--kr-s2); font-size: var(--fs-xs); font-weight: 700; color: var(--kr-ink); }
.star-half { fill: url(#krHalfStar); }

/* --------------------------------------------------------------------------
   Trust strip & counters
   -------------------------------------------------------------------------- */
.trust-strip {
    background: var(--kr-ivory);
    border-block: 2px solid var(--kr-gold);
    padding-block: var(--kr-s5);
}

.trust-strip-inner {
    display: grid;
    gap: var(--kr-s4);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) { .trust-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .trust-strip-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.trust-item { display: flex; align-items: center; gap: var(--kr-s3); margin: 0; color: var(--kr-muted); font-size: var(--fs-sm); }
.trust-item .icon { color: var(--kr-orange); }
.trust-item-text strong { color: var(--kr-maroon); }

.counter-band { background: var(--kr-grad-dusk); color: #fff; padding-block: var(--kr-s8); }

.counter-grid {
    display: grid;
    gap: var(--kr-s6) var(--kr-s4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: center;
}

@media (min-width: 900px) { .counter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.counter-item { display: grid; gap: var(--kr-s2); justify-items: center; }
.counter-icon { color: var(--kr-gold); }

.counter-value {
    margin: 0;
    font-family: var(--kr-font-body);
    font-size: var(--fs-mega);
    font-weight: 700;
    line-height: 1;
    color: var(--kr-gold);
    font-variant-numeric: tabular-nums;
}

.counter-label {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--kr-s4); }
.form-card { background: var(--kr-ivory); border: 1px solid var(--kr-line); border-radius: var(--kr-r-md); padding: var(--kr-s5); box-shadow: var(--kr-sh-sm); }
.form-row { display: grid; gap: var(--kr-s4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.field { display: grid; gap: var(--kr-s2); }
.field-label { color: var(--kr-ink); font-size: var(--fs-sm); font-weight: 600; }
.field-required { color: var(--kr-maroon); }
.field-hint { color: var(--kr-muted); font-size: var(--fs-xs); margin: 0; }

.input, .select, .textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--kr-s3) var(--kr-s4);
    border: 1px solid var(--kr-line);
    border-radius: var(--kr-r-sm);
    background: var(--kr-ivory);
    color: var(--kr-body);
    font-family: var(--kr-font-body);
    font-size: var(--fs-body);
    transition: border-color var(--kr-t-fast) var(--kr-ease), box-shadow var(--kr-t-fast) var(--kr-ease);
}

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--kr-orange);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, .16);
}

.textarea { min-height: 128px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--kr-muted) 50%), linear-gradient(135deg, var(--kr-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--kr-s7); }

.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--kr-red-600); background: #FFF8F8; }
.field-error { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--kr-red-600); font-size: var(--fs-xs); font-weight: 500; }

.checkbox { display: flex; align-items: flex-start; gap: var(--kr-s3); font-size: var(--fs-sm); color: var(--kr-body); }
.checkbox input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--kr-maroon); flex: 0 0 20px; }
.checkbox a { text-decoration: underline; }

.form-note { margin: 0; color: var(--kr-muted); font-size: var(--fs-xs); }
.form-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kr-s4); }
.form-trust { display: flex; flex-wrap: wrap; gap: var(--kr-s3); margin: 0; padding: 0; list-style: none; color: var(--kr-muted); font-size: var(--fs-xs); }
.form-trust li { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.form-trust .icon { color: var(--kr-green); }

/* --------------------------------------------------------------------------
   Accordion (FAQ + itinerary)
   -------------------------------------------------------------------------- */
.faq-list { display: grid; gap: var(--kr-s3); }

.faq-item {
    background: var(--kr-ivory);
    border: 1px solid var(--kr-line);
    border-radius: var(--kr-r-sm);
    overflow: hidden;
}

.faq-item[open] { border-color: var(--kr-gold); box-shadow: var(--kr-sh-xs); }

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kr-s4);
    padding: var(--kr-s4) var(--kr-s5);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--kr-ink);
    font-size: var(--fs-sm);
}

.faq-question::-webkit-details-marker { display: none; }
.faq-chevron { color: var(--kr-orange); transition: transform var(--kr-t) var(--kr-ease); }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer { padding: 0 var(--kr-s5) var(--kr-s5); color: var(--kr-body); font-size: var(--fs-sm); }
.faq-answer p { margin-bottom: var(--kr-s3); }

/* --------------------------------------------------------------------------
   Timeline (day-wise itinerary / circuit sites)
   -------------------------------------------------------------------------- */
.timeline { position: relative; padding-left: var(--kr-s6); }
.timeline::before { content: ''; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--kr-line); }

.timeline-item { position: relative; padding-bottom: var(--kr-s5); }

.timeline-node {
    position: absolute;
    left: calc(-1 * var(--kr-s6) + 4px);
    top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--kr-r-pill);
    background: var(--kr-maroon);
    color: var(--kr-gold);
    font-size: 11px;
    font-weight: 700;
}

.timeline-day { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--kr-s3); margin-bottom: var(--kr-s2); }

.timeline-day-chip {
    padding: 2px var(--kr-s3);
    background: var(--kr-orange-50);
    color: var(--kr-orange-600);
    border-radius: var(--kr-r-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.timeline-title { margin: 0; font-size: var(--fs-h4); }
.timeline-body { color: var(--kr-body); font-size: var(--fs-sm); }
.timeline-body p { margin-bottom: var(--kr-s2); }

.timeline-meta { display: flex; flex-wrap: wrap; gap: var(--kr-s4); margin: var(--kr-s2) 0 0; color: var(--kr-muted); font-size: var(--fs-xs); }
.timeline-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
.tabs { border-bottom: 1px solid var(--kr-line); margin-bottom: var(--kr-s5); }
.tab-list { display: flex; flex-wrap: wrap; gap: var(--kr-s2); margin: 0; padding: 0; list-style: none; }

.tab-btn {
    padding: var(--kr-s3) var(--kr-s4);
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--kr-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.tab-btn:hover { color: var(--kr-orange-600); }
.tab-btn[aria-selected="true"] { color: var(--kr-maroon); border-bottom-color: var(--kr-orange); }

/* --------------------------------------------------------------------------
   Price block & spec grid
   -------------------------------------------------------------------------- */
.price-block {
    display: grid;
    gap: var(--kr-s2);
    padding: var(--kr-s5);
    background: var(--kr-ivory);
    border: 1px solid var(--kr-line);
    border-left: 4px solid var(--kr-orange);
    border-radius: var(--kr-r-md);
}

.price-block-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--kr-s3); }
.price-block-now { font-size: var(--fs-h2); font-weight: 700; color: var(--kr-red); font-family: var(--kr-font-body); line-height: 1; }
.price-block-strike { color: var(--kr-muted); text-decoration: line-through; }
.price-block-booking { color: var(--kr-maroon); font-size: var(--fs-sm); font-weight: 600; }
.price-block-note { margin: 0; display: flex; align-items: flex-start; gap: var(--kr-s2); color: var(--kr-green); font-size: var(--fs-xs); }

.spec-grid {
    display: grid;
    gap: var(--kr-s4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--kr-s5);
    background: var(--kr-sand);
    border-radius: var(--kr-r-md);
}

@media (min-width: 768px) { .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.spec-item { display: flex; align-items: flex-start; gap: var(--kr-s3); }
.spec-item .icon { color: var(--kr-orange); margin-top: 2px; }
.spec-item-label { display: block; color: var(--kr-muted); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; }
.spec-item-value { display: block; color: var(--kr-ink); font-weight: 600; font-size: var(--fs-sm); }

/* Inclusions / exclusions */
.inclusion-grid { display: grid; gap: var(--kr-s6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .inclusion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kr-s2); }
.check-list li { display: flex; align-items: flex-start; gap: var(--kr-s3); margin: 0; font-size: var(--fs-sm); }
.check-list .icon { margin-top: 4px; }
.check-list-include .icon { color: var(--kr-green); }
.check-list-exclude .icon { color: var(--kr-red-600); }

/* --------------------------------------------------------------------------
   Hero slider
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--kr-maroon-900);
}

.hero-slides { position: relative; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--kr-t-slow) var(--kr-ease); }
.hero-slide:first-child { position: relative; }
.hero-slide.is-active { opacity: 1; z-index: 1; }

.hero-tagline {
    position: absolute;
    inset-inline: 0;
    bottom: var(--kr-s5);
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(.75rem, 1vw, .9375rem);
    font-weight: 400;
    letter-spacing: .06em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .65);
    pointer-events: none;
}

.hero-slide-media { position: absolute; inset: 0; }
.hero-slide-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Light-handed scrim: only the copy column and the bottom control rail get any
   real darkening, so the photograph stays bright and the type stays legible.
   The header is an opaque bar, so the top of the frame needs nothing. */
.hero-slide-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(20, 8, 6, .66) 0%, rgba(20, 8, 6, .56) 28%, rgba(20, 8, 6, .34) 55%, rgba(20, 8, 6, .12) 78%, rgba(20, 8, 6, .02) 100%),
        linear-gradient(180deg, rgba(20, 8, 6, .12) 0%, rgba(20, 8, 6, 0) 20%, rgba(20, 8, 6, 0) 54%, rgba(20, 8, 6, .48) 100%);
}

/* Width comes from .container so the copy lines up with the rest of the page;
   each text block caps its own measure instead. */
.hero-content {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
    gap: var(--kr-s5);
    min-height: 86vh;
    padding-block: var(--kr-s8) var(--kr-s9);
    color: #fff;
}

@media (min-width: 768px) { .hero-content { min-height: 92vh; } }
@media (max-width: 479px) { .hero-content { min-height: 74vh; } }

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--kr-s2);
    margin: 0;
    padding: 6px var(--kr-s4);
    background: rgba(20, 8, 6, .55);
    border: 1px solid rgba(255, 215, 0, .6);
    border-radius: var(--kr-r-pill);
    color: var(--kr-gold);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    justify-self: start;
}

.hero-title {
    margin: 0;
    color: #fff;
    font-size: clamp(2.6rem, 6.2vw, 5.25rem);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -.02em;
    text-wrap: balance;
    /* Crisp edge for contrast plus a soft glow so the type holds on any frame. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .38), 0 10px 34px rgba(0, 0, 0, .50);
}

.hero-title-accent { display: block; color: var(--kr-gold); }

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .hero-title-accent {
        background: var(--kr-grad-gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        /* A text-shadow would paint over the fill and dull the gradient, and a
           filter on this element risks blank glyphs in older Safari, so the
           gold line takes no halo — the scrim carries its contrast instead. */
        text-shadow: none;
    }
}

.hero-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, .95);
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
    line-height: 1.65;
    max-width: 54ch;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 20px rgba(0, 0, 0, .50);
}
.hero-subtitle strong { font-weight: 800; color: #fff; }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--kr-s4); margin-top: var(--kr-s2); }

/* With a light scrim the secondary CTA needs its own backing to stay readable.
   Both rules are re-stated here: this block outranks the base button styles, so
   the hover fill has to be declared again or it would never show. */
.hero-actions .btn-outline-light {
    background: rgba(20, 8, 6, .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.hero-actions .btn-outline-light:hover { background: #fff; color: var(--kr-maroon); }

.hero-points {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kr-s3) var(--kr-s5);
    margin: var(--kr-s4) 0 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, .9);
    font-size: var(--fs-sm);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .45);
}
.hero-points li { display: inline-flex; align-items: center; gap: var(--kr-s2); margin: 0; }
.hero-points .icon { color: var(--kr-gold); }

/* Slide controls: the counter and the arrows share the right end of the rail,
   so they never sit on top of the headline at any width. */
.hero-controls { display: inline-flex; align-items: center; gap: var(--kr-s3); }

.hero-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: var(--kr-r-pill);
    background: rgba(20, 8, 6, .42);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background var(--kr-t-fast) var(--kr-ease),
                border-color var(--kr-t-fast) var(--kr-ease),
                color var(--kr-t-fast) var(--kr-ease);
}

.hero-nav:hover {
    background: var(--kr-gold);
    border-color: var(--kr-gold);
    color: var(--kr-ink);
}

.hero-nav .icon { width: 20px; height: 20px; }
.hero-nav-prev .icon { transform: rotate(180deg); }

/* Bottom rail: dots on the left, counter and arrows on the right */
.hero-rail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--kr-s6);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kr-s5);
    pointer-events: none;
}

.hero-rail > * { pointer-events: auto; }

.hero-dots { display: flex; align-items: center; gap: var(--kr-s2); }

.hero-dot {
    width: 34px;
    height: 6px;
    border: 0;
    padding: 0;
    border-radius: var(--kr-r-pill);
    background: rgba(255, 255, 255, .5);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .4);
    cursor: pointer;
    transition: background var(--kr-t-fast) var(--kr-ease), width var(--kr-t-fast) var(--kr-ease);
}

.hero-dot:hover { background: rgba(255, 255, 255, .85); }
.hero-dot[aria-selected="true"] { background: var(--kr-gold); width: 56px; }

.hero-count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .18em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.hero-count-current { color: var(--kr-gold); font-size: var(--fs-sm); }
.hero-count-sep { color: rgba(255, 255, 255, .5); }

/* Autoplay progress: the scale is driven from slider.js */
.hero-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    height: 3px;
    background: rgba(255, 255, 255, .16);
}

.hero-progress-bar {
    display: block;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--kr-grad-gold);
}

.hero-scroll-cue { position: absolute; left: 50%; bottom: var(--kr-s4); transform: translateX(-50%); z-index: 3; color: rgba(255, 255, 255, .5); font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.empty-state { text-align: center; padding: var(--kr-s8) var(--kr-s5); display: grid; gap: var(--kr-s3); justify-items: center; }
.empty-state-icon { color: var(--kr-gold); }
.empty-state-title { margin: 0; font-size: var(--fs-h3); }
.empty-state-text { margin: 0; color: var(--kr-muted); max-width: 48ch; }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--kr-s3);
    padding: var(--kr-s3) var(--kr-s4);
    border-radius: var(--kr-r-sm);
    border-left: 4px solid var(--kr-muted);
    background: var(--kr-sand);
    color: var(--kr-body);
    font-size: var(--fs-sm);
}

.alert-message { margin: 0; flex: 1 1 auto; }
.alert-info { background: #EEF4FB; border-left-color: #2C6CB0; }
.alert-success { background: #E9F5EE; border-left-color: var(--kr-green); }
.alert-warning { background: var(--kr-gold-100); border-left-color: var(--kr-marigold); }
.alert-error { background: #FBEAEA; border-left-color: var(--kr-red-600); }
.alert-close { margin-left: auto; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination { display: grid; gap: var(--kr-s3); justify-items: center; margin-top: var(--kr-s7); }
.pagination-summary { margin: 0; color: var(--kr-muted); font-size: var(--fs-sm); }
.pagination-list { display: flex; flex-wrap: wrap; gap: var(--kr-s2); margin: 0; padding: 0; list-style: none; justify-content: center; }
.pagination-list li { margin: 0; }

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 var(--kr-s3);
    border: 1px solid var(--kr-line);
    border-radius: var(--kr-r-sm);
    background: var(--kr-ivory);
    color: var(--kr-body);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.pagination-link:hover { border-color: var(--kr-orange); color: var(--kr-orange-600); }
.pagination-link.is-active { background: var(--kr-maroon); border-color: var(--kr-maroon); color: #fff; }
.pagination-ellipsis { display: inline-flex; align-items: center; padding: 0 var(--kr-s2); color: var(--kr-muted); }
.pagination-prev, .pagination-next { padding: 0 var(--kr-s4); }

/* --------------------------------------------------------------------------
   Newsletter band
   -------------------------------------------------------------------------- */
.newsletter-band { background: var(--kr-grad-gold); padding-block: var(--kr-s7); }

.newsletter-inner {
    display: grid;
    gap: var(--kr-s5);
    align-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) { .newsletter-inner { grid-template-columns: 1.2fr 1fr; } }

.newsletter-title { margin: 0 0 var(--kr-s2); color: var(--kr-maroon-900); font-size: var(--fs-h3); }
.newsletter-text { margin: 0; color: var(--kr-maroon-900); opacity: .85; font-size: var(--fs-sm); }

.newsletter-form { display: flex; gap: var(--kr-s2); flex-wrap: wrap; }
.newsletter-form .input { flex: 1 1 220px; background: #fff; border-color: rgba(74, 0, 0, .2); }
.newsletter-form .btn { background: var(--kr-maroon); color: #fff; }

/* --------------------------------------------------------------------------
   Modal / lightbox / toast
   -------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: var(--kr-s4); }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(28, 21, 18, .62); backdrop-filter: blur(4px); }

.modal-panel {
    position: relative;
    width: min(560px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    background: var(--kr-ivory);
    border-radius: var(--kr-r-lg);
    box-shadow: var(--kr-sh-lg);
    padding: var(--kr-s6);
    transform: translateY(10px);
    opacity: 0;
    transition: opacity var(--kr-t) var(--kr-ease), transform var(--kr-t) var(--kr-ease);
}

.modal.is-open .modal-panel { opacity: 1; transform: translateY(0); }
.modal-wide .modal-panel { width: min(760px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kr-s4); margin-bottom: var(--kr-s5); }
.modal-title { margin: 0; font-size: var(--fs-h3); }
.modal-sub { margin: var(--kr-s2) 0 0; color: var(--kr-muted); font-size: var(--fs-sm); }
.modal-context { padding: var(--kr-s3); background: var(--kr-sand); border-radius: var(--kr-r-sm); margin-bottom: var(--kr-s4); font-size: var(--fs-sm); }

.lightbox { position: fixed; inset: 0; z-index: 150; background: rgba(20, 15, 13, .94); display: grid; grid-template-rows: auto 1fr auto; }
.lightbox[hidden] { display: none; }
.lightbox-head { display: flex; align-items: center; justify-content: space-between; padding: var(--kr-s4) var(--kr-s5); color: #fff; }
.lightbox-stage { display: grid; place-items: center; padding: var(--kr-s4); overflow: hidden; }
.lightbox-image { max-height: 100%; object-fit: contain; border-radius: var(--kr-r-sm); }
.lightbox-foot { padding: var(--kr-s4) var(--kr-s5) var(--kr-s6); color: rgba(255, 255, 255, .82); text-align: center; font-size: var(--fs-sm); }
.lightbox-nav { display: flex; gap: var(--kr-s2); }
.lightbox-btn { background: rgba(255, 255, 255, .12); color: #fff; }
.lightbox-btn:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.toast-stack { position: fixed; top: var(--kr-s5); right: var(--kr-s5); z-index: 160; display: grid; gap: var(--kr-s2); max-width: 340px; }

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--kr-s3);
    padding: var(--kr-s3) var(--kr-s4);
    background: var(--kr-ink);
    color: #fff;
    border-radius: var(--kr-r-sm);
    box-shadow: var(--kr-sh-md);
    font-size: var(--fs-sm);
}

.toast-success { background: var(--kr-green); }
.toast-error { background: var(--kr-red-600); }

/* --------------------------------------------------------------------------
   Sticky enquiry panel
   -------------------------------------------------------------------------- */
.sticky-enquiry { display: grid; gap: var(--kr-s3); padding: var(--kr-s5); background: var(--kr-ivory); border: 1px solid var(--kr-line); border-radius: var(--kr-r-md); box-shadow: var(--kr-sh-sm); }
.sticky-enquiry-title { margin: 0; font-size: var(--fs-h4); }
.sticky-enquiry-price { margin: 0; color: var(--kr-red); font-size: var(--fs-h3); font-weight: 700; }

.trust-ticks { display: grid; gap: var(--kr-s2); margin: var(--kr-s3) 0 0; padding: 0; list-style: none; }
.trust-ticks li { display: flex; align-items: flex-start; gap: var(--kr-s2); margin: 0; color: var(--kr-muted); font-size: var(--fs-xs); }
.trust-ticks .icon { color: var(--kr-green); flex: 0 0 14px; margin-top: 3px; }

/* --------------------------------------------------------------------------
   Filters
   -------------------------------------------------------------------------- */
.listing-layout { display: grid; gap: var(--kr-s6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .listing-layout { grid-template-columns: 280px minmax(0, 1fr); } }

.filters-sidebar { display: none; }
@media (min-width: 1024px) {
    .filters-sidebar { display: block; position: sticky; top: calc(var(--kr-header-kr, 0px) + 84px); }
}

.filters-panel { background: var(--kr-ivory); border: 1px solid var(--kr-line); border-radius: var(--kr-r-md); padding: var(--kr-s5); }
.filter-group { padding-block: var(--kr-s4); border-bottom: 1px solid var(--kr-line); }
.filter-group:first-child { padding-top: 0; }
.filter-group:last-child { border-bottom: 0; padding-bottom: 0; }

.filter-heading { margin: 0 0 var(--kr-s3); font-family: var(--kr-font-body); font-size: var(--fs-sm); font-weight: 700; color: var(--kr-ink); }
.filter-options { display: grid; gap: var(--kr-s2); margin: 0; padding: 0; list-style: none; }
.filter-option { display: flex; align-items: center; gap: var(--kr-s3); margin: 0; font-size: var(--fs-sm); color: var(--kr-body); cursor: pointer; }
.filter-option input { width: 18px; height: 18px; accent-color: var(--kr-maroon); flex: 0 0 18px; }
.filter-option-count { margin-left: auto; color: var(--kr-muted); font-size: var(--fs-xs); }

.listing-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kr-s4);
    margin-bottom: var(--kr-s5);
    padding-bottom: var(--kr-s4);
    border-bottom: 1px solid var(--kr-line);
}

.listing-count { margin: 0; color: var(--kr-muted); font-size: var(--fs-sm); }
.listing-count strong { color: var(--kr-ink); }
.sort-control { display: flex; align-items: center; gap: var(--kr-s2); font-size: var(--fs-sm); }
.sort-control .select { min-height: 42px; min-width: 200px; }

.filters-toggle { display: inline-flex; }
@media (min-width: 1024px) { .filters-toggle { display: none; } }

.filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kr-s3);
    margin-bottom: var(--kr-s3);
}

.filter-grid { display: grid; gap: var(--kr-s4); }

.filter-group {
    margin: 0 0 var(--kr-s4);
    padding: 0 0 var(--kr-s4);
    border: 0;
    border-bottom: 1px solid var(--kr-line);
}

.filter-group:last-of-type { border-bottom: 0; margin-bottom: 0; }

.filter-group legend,
.filter-heading {
    padding: 0;
    font-family: var(--kr-font-body);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--kr-ink);
}

.filter-range { display: flex; align-items: center; gap: var(--kr-s2); }
.filter-range .input { min-height: 42px; padding: var(--kr-s2) var(--kr-s3); font-size: var(--fs-sm); }
.filter-range-sep { color: var(--kr-muted); }

.filter-actions { display: grid; gap: var(--kr-s2); margin-top: var(--kr-s4); }

/* Mobile: the same panel becomes a slide-up sheet, so the form is never
   duplicated and element ids stay unique. */
@media (max-width: 1023px) {
    .filters-sidebar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 130;
        max-height: 86vh;
        overflow-y: auto;
        padding: var(--kr-s4);
        background: var(--kr-cream);
        border-radius: var(--kr-r-lg) var(--kr-r-lg) 0 0;
        box-shadow: var(--kr-sh-lg);
        transform: translateY(102%);
        transition: transform var(--kr-t) var(--kr-ease);
    }

    .filters-sidebar.is-open { transform: translateY(0); }

    .filters-sidebar::before {
        content: '';
        display: block;
        width: 44px;
        height: 4px;
        margin: 0 auto var(--kr-s4);
        border-radius: var(--kr-r-pill);
        background: var(--kr-line);
    }
}

/* Gallery hero */
.gallery-hero {
    display: grid;
    gap: var(--kr-s3);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .gallery-hero { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
}

.gallery-hero-main { display: block; border-radius: var(--kr-r-md); overflow: hidden; background: var(--kr-sand); }
.gallery-hero-main img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.gallery-hero-thumbs { display: grid; gap: var(--kr-s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .gallery-hero-thumbs { grid-template-columns: 1fr; grid-auto-rows: 1fr; } }

.gallery-hero-thumb { display: block; border-radius: var(--kr-r-sm); overflow: hidden; background: var(--kr-sand); }
.gallery-hero-thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform var(--kr-t) var(--kr-ease); }
.gallery-hero-thumb:hover img { transform: scale(1.05); }

.gallery-hero-more {
    margin: 0;
    grid-column: 1 / -1;
    color: var(--kr-muted);
    font-size: var(--fs-xs);
    text-align: center;
}

.sticky-enquiry-share { display: flex; gap: var(--kr-s2); margin-top: var(--kr-s3); }
.sticky-enquiry-share .btn { flex: 1 1 0; }

/* --------------------------------------------------------------------------
   Vehicle & route cards, fare tables
   -------------------------------------------------------------------------- */
.card-vehicle .card-body { gap: var(--kr-s2); }

.vehicle-rate { margin: 0; display: flex; align-items: baseline; gap: var(--kr-s2); }
.vehicle-rate strong { color: var(--kr-maroon); font-size: var(--fs-h4); }

.card-route {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kr-s4);
    padding: var(--kr-s4) var(--kr-s5);
    color: var(--kr-ink);
}

.card-route:hover { color: var(--kr-ink); }
.route-card-body { display: grid; gap: var(--kr-s2); }

.route-line { display: flex; align-items: center; gap: var(--kr-s3); flex-wrap: wrap; }
.route-city { font-weight: 600; color: var(--kr-ink); }
.route-dots { color: var(--kr-gold); letter-spacing: 2px; }
.route-price { color: var(--kr-red); font-weight: 700; }
.route-price strong { color: var(--kr-red); }

.route-group { margin-bottom: var(--kr-s8); }
.route-group:last-child { margin-bottom: 0; }

.route-group-title {
    display: flex;
    align-items: center;
    gap: var(--kr-s2);
    margin: 0 0 var(--kr-s5);
    padding-bottom: var(--kr-s3);
    border-bottom: 2px solid var(--kr-gold);
    font-size: var(--fs-h3);
}

.route-group-title .icon { color: var(--kr-orange); }

.table-wrap { overflow-x: auto; border: 1px solid var(--kr-line); border-radius: var(--kr-r-md); }

.fare-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--kr-ivory); }
.fare-table th, .fare-table td { padding: var(--kr-s3) var(--kr-s4); text-align: left; border-bottom: 1px solid var(--kr-line); }
.fare-table thead th { background: var(--kr-sand); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--kr-muted); }
.fare-table tbody tr:last-child th, .fare-table tbody tr:last-child td { border-bottom: 0; }
.fare-table tfoot td { background: var(--kr-cream); font-weight: 600; }
.fare-table .fare-amount { text-align: right; white-space: nowrap; }
.fare-table .fare-total td { background: var(--kr-gold-100); font-size: var(--fs-body); color: var(--kr-maroon-900); }
.fare-detail { display: block; color: var(--kr-muted); font-size: var(--fs-xs); font-weight: 400; }

.fare-result { margin-top: var(--kr-s5); }
.fare-placeholder { margin: 0; color: var(--kr-muted); font-size: var(--fs-sm); }
.fare-calculator .fare-result .fare-table { border: 1px solid var(--kr-line); border-radius: var(--kr-r-md); }

/* --------------------------------------------------------------------------
   Gallery grid, video play affordance, plan-my-tour cascade
   -------------------------------------------------------------------------- */
.gallery-grid {
    display: grid;
    gap: var(--kr-s3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gallery-grid-item {
    display: block;
    border-radius: var(--kr-r-sm);
    overflow: hidden;
    background: var(--kr-sand);
    aspect-ratio: 4 / 3;
}

.gallery-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--kr-t) var(--kr-ease);
}

.gallery-grid-item:hover img { transform: scale(1.05); }

.video-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(28, 21, 18, .28);
    transition: background var(--kr-t) var(--kr-ease);
}

.video-play .icon {
    width: 54px;
    height: 54px;
    padding: 15px;
    border: 2px solid var(--kr-gold);
    border-radius: var(--kr-r-pill);
    background: rgba(28, 21, 18, .45);
}

.card:hover .video-play { background: rgba(28, 21, 18, .42); }

.card-blog-featured { display: grid; gap: 0; }
@media (min-width: 768px) { .card-blog-featured { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.card-blog-featured .card-media { aspect-ratio: auto; height: 100%; min-height: 260px; }

/* Reduced motion: no scaling, no autoplay progress */
@media (prefers-reduced-motion: reduce) {
    .gallery-grid-item:hover img { transform: none; }
    .hero-progress { display: none; }
    .hero-slide-media img { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
    .topbar, .site-header, .site-footer, .float-actions, .mobile-bar,
    .sticky-enquiry, .breadcrumbs, .btn, .newsletter-band, .hero-dots,
    .hero-nav, .hero-rail, .hero-progress,
    .listing-toolbar, .filters-sidebar, .search-overlay, .drawer { display: none !important; }

    body { background: #fff; color: #000; font-size: 11pt; }
    .container { max-width: 100%; padding: 0; }
    a { color: #000; text-decoration: none; }
    .card, .price-block, .spec-grid, .timeline { box-shadow: none; border-color: #999; }
    .timeline-item, .faq-item, .card { break-inside: avoid; page-break-inside: avoid; }
    .faq-answer, .hero-slide { display: block !important; opacity: 1 !important; }
    .hero { background: none; }
    .hero-content { min-height: auto; color: #000; }
    h1, h2, h3 { color: #000; }
}