/* =========================================================
   HOTEL CARDS — best-deals-for-hotels.php
   =========================================================
   Dedicated stylesheet for the hotel listing/cards page.
   Kept separate from info-details.css on purpose: this file
   only styles the cards-grid page pattern (hero, grid, card,
   badges, read-more button). info-details.css is still linked
   on this page too, for the shared site chrome (header, nav,
   footer, WhatsApp float) — this file adds to it, not replaces
   it.

   REUSE FOR EXPERIENCES / CRUISES PAGES:
   Everything below is scoped under .hc-page, with generic
   class names (hc-grid, hc-card, hc-card-badge, hc-more-btn,
   etc.) so this exact file can be duplicated as
   experience-cards.css / cruise-cards.css and reused as-is —
   only the --hc-* color tokens at the top need tweaking if you
   want a different accent per page type.
   ========================================================= */

.hc-page{
    --hc-navy:#043575;
    --hc-blue:#0964A9;
    --hc-blue-pale:#EBF5FE;
    --hc-text:#5a6470;
    background:#fff;
}

/* --- Hero / title section --- */
.hc-hero{
    padding:36px 0 28px;
    background:#fff;
}
.hc-breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#8a96a3;
    margin-bottom:16px;
}
.hc-breadcrumb a{ color:#8a96a3; transition:color .2s ease; }
.hc-breadcrumb a:hover{ color:var(--hc-blue); }
.hc-breadcrumb .sep{ color:#c7cfd8; }
.hc-breadcrumb .current{ color:var(--hc-navy); font-weight:bold; }
.hc-title{
    font-size:clamp(24px,3.4vw,38px);
    color:var(--hc-navy);
    font-weight:800;
    margin:0 0 10px;
}
.hc-subtitle{
    font-size:16px;
    color:var(--hc-text);
    max-width:720px;
    line-height:1.5;
    margin:0;
}

/* --- Cards grid --- */
.hc-grid-section{
    padding:8px 0 70px;
    background:#fff;
}
.hc-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

/* --- Card --- */
.hc-card{
    display:block;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    text-decoration:none;
    box-shadow:0 4px 14px rgba(4,53,117,.1);
    transition:transform .2s ease, box-shadow .2s ease;
}
.hc-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 24px rgba(4,53,117,.16);
}
.hc-card-media{
    position:relative;
    aspect-ratio:4 / 3;
    overflow:hidden;
    background:var(--hc-blue-pale);
}
.hc-card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Recommended ribbon — leave uncommented only on the few hotels
   you want to feature; keep it as an HTML comment for the rest
   (see best-deals-for-hotels.php for the toggle pattern). */
.hc-card-badge{
    position:absolute;
    top:12px;
    left:12px;
    background:var(--gold);
    color:var(--hc-navy);
    font-size:11.5px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.4px;
    padding:6px 12px;
    border-radius:20px;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
}

/* Informational badge (e.g. "Near Goa") — distinct from the
   Recommended ribbon; always shown when present, not a toggle. */
.hc-card-badge-info{
    position:absolute;
    top:12px;
    right:12px;
    background:var(--hc-navy);
    color:#fff;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
    padding:6px 11px;
    border-radius:20px;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
}

.hc-card-body{
    padding:18px 20px 22px;
}
.hc-card-name{
    font-size:17px;
    font-weight:800;
    color:var(--hc-navy);
    margin:0 0 6px;
    line-height:1.3;
}
.hc-card-location{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:var(--hc-text);
    margin:0 0 12px;
}
.hc-card-location svg{ width:14px; height:14px; flex-shrink:0; fill:var(--hc-blue); }
.hc-card-bestfor{
    display:inline-block;
    background:var(--hc-blue-pale);
    color:var(--hc-navy);
    font-size:12px;
    font-weight:600;
    padding:5px 12px;
    border-radius:16px;
    margin:0 0 14px;
}
.hc-card-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:13.5px;
    font-weight:800;
    color:var(--hc-blue);
    border-top:1px solid #eef2f6;
    padding-top:12px;
}
.hc-card-cta svg{ width:16px; height:16px; fill:currentColor; transition:transform .2s ease; }
.hc-card:hover .hc-card-cta svg{ transform:translateX(4px); }

/* --- Progressive reveal: desktop shows 9 (3x3) by default,
   mobile shows 6 (2x3) by default --- */
.hc-card-extra-desktop{ display:none; }
.hc-card-more{ display:none; }

@media(min-width:701px){
    .hc-card-extra-desktop{ display:block; }
}

.hc-grid.hc-expanded .hc-card-extra-desktop,
.hc-grid.hc-expanded .hc-card-more{
    display:block;
}

/* --- Read More / Display More button --- */
.hc-more-wrap{
    text-align:center;
    margin-top:40px;
}
.hc-more-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 32px;
    border-radius:30px;
    background:var(--gold);
    color:var(--hc-navy);
    font-weight:800;
    font-size:14.5px;
    border:none;
    cursor:pointer;
    font-family:inherit;
    transition:background .2s ease, transform .2s ease;
}
.hc-more-btn:hover{
    background:var(--gold-dark);
    transform:translateY(-2px);
}
.hc-more-label-mobile{ display:none; }

/* --- Mobile: 2 columns, 6 cards visible by default --- */
@media(max-width:700px){
    .hc-hero{ padding:28px 0 20px; }
    .hc-grid-section{ padding:4px 0 50px; }
    .hc-grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }
    .hc-card-body{ padding:13px 14px 16px; }
    .hc-card-name{ font-size:14.5px; }
    .hc-card-location{ font-size:11.5px; }
    .hc-card-bestfor{ font-size:10.5px; padding:4px 9px; }
    .hc-card-cta{ font-size:12px; }
    .hc-more-label-desktop{ display:none; }
    .hc-more-label-mobile{ display:inline; }
}