/* page styles: hot-deals-destinations.html */
/* ==========================================================================
       Hot Deals for Locals — bespoke layer on top of agile.css.
       One landing page covers both Honeymooners and Destinations
       instead of splitting them into sub-pages: a browse-by-category
       switcher (borrowed from religious.html's Best Offers / Hajj / Umrah)
       swaps between the two, each showing the same pkgCard deal-card
       pattern with a real price up front — the thing every "hot deal"
       page needs above the fold, per how the honeymoon/deal-page pattern
       actually works elsewhere.
       ========================================================================== */

    /* dealsHero — the page's own hero in place of the shared .mast banner:
       a dark title band ("Two ways to go" made literal before you've even
       scrolled) sitting on top of two full-bleed photo halves, one per
       path. A thin gold seam (the grid gap, showing the gold background
       through it) splits them, with a small "or" medallion floating right
       on the seam — the same idea as the "or" between the two nav routes,
       just built instead of said. Each half is its own link straight into
       the matching offerTabs tab below, with a slow hover-zoom and a
       reveal-on-hover arrow so it reads as clickable, not just decorative. */
    .dealsHero{position:relative;background:var(--ink);padding-top:var(--navh)}
    .head--center{flex-direction:column;align-items:center;text-align:center;gap:14px}
    .head--center .head__side{max-width:56ch}
    .sec--tightBottom{padding-bottom:clamp(20px,3vh,32px)}
    .sec--afterHead{padding-top:0}

    /* honeymoonStory — the "Honeymoons" copy block, dropped in after the
       package grid. The source paragraph about swim-up rooms/yachts/etc.
       is a comma-run list dressed as prose, so it's pulled out into its
       own row of chips instead of staying one more dense paragraph — the
       one structural liberty taken with an otherwise line-for-line text.
       The closing line gets a Georgia italic treatment, echoing the
       serif already used for the site's other one-off numerals/badges,
       to give it a warmer, handwritten-note weight than the rest of the
       page's bold uppercase Montserrat. */
    .honeymoonStory .wrap{max-width:720px}
    .honeymoonStory__head{text-align:center;margin-bottom:clamp(18px,2.6vw,28px)}
    .honeymoonStory__head .label{margin:0 0 10px}
    .honeymoonStory__head .dsp{margin:0}
    .honeymoonStory__copy{display:flex;flex-direction:column;gap:18px}
    .honeymoonStory__copy .lead,.honeymoonStory__copy .body{max-width:none}
    .honeymoonStory__chips{margin:clamp(30px,4.4vw,44px) 0;display:flex;flex-direction:column;gap:14px;align-items:center}
    .honeymoonStory__chipsCap{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
    .honeymoonStory__chipRow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:620px}
    .honeymoonStory__chip{
      padding:9px 18px;border-radius:999px;background:var(--tile);color:var(--ink);
      font-size:13px;font-weight:600;border:1px solid rgb(var(--deep-rgb) / .14);
    }
    .honeymoonStory__chip--wild{
      border:1px dashed var(--accent);color:var(--accent-text);background:transparent;font-style:italic;
    }
    .honeymoonStory__note{text-align:center;margin:0 auto clamp(30px,4.4vw,44px);max-width:56ch}
    .honeymoonStory__vow{
      text-align:center;font-family:var(--f-serif);font-style:italic;
      font-size:clamp(20px,2.4vw,28px);line-height:1.42;margin:0;color:var(--ink);
    }
    .honeymoonStory__vow b{display:block;color:var(--accent-text);font-weight:700;margin-top:6px;font-style:normal}
    .dealsHero__ribbon{
      position:relative;z-index:1;margin:0 auto;width:fit-content;
      background:var(--gold);color:var(--ink);padding:10px 30px 12px;
      border-radius:12px 12px 0px 0px;font-weight:700;font-size:13px;
      letter-spacing:.16em;text-transform:uppercase;
      box-shadow:0 6px 16px rgba(0,0,0,.25);
    }
    .dealsHero__top{
      position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
      padding:calc(var(--navh) + clamp(24px,3.6vh,40px)) var(--pad) clamp(20px,2.6vh,28px);
      display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
    }
    .dealsHero__kicker{margin:0;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
    .dealsHero__title{
      margin:0;color:var(--paper);font-weight:700;text-transform:uppercase;letter-spacing:-.008em;
      font-size:clamp(22px,3.2vw,38px);line-height:1.04;text-wrap:balance;
    }
    .dealsHero__rule{width:44px;height:1px;background:var(--gold);margin-top:4px}
    .dealsHero__split{
      position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3px;
      background:var(--gold);height:min(58vh,560px);min-height:320px;
    }
    .dealsHero__half{position:relative;display:block;overflow:hidden;text-decoration:none;outline-offset:-3px}
    .dealsHero__half img{
      width:100%;height:100%;object-fit:cover;display:block;
      transform:scale(1.04);transition:transform 1.2s var(--ease);
    }
    .dealsHero__half:hover img{transform:scale(1.14)}
    .dealsHero__veil{
      position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(5,15,17,0) 42%,rgba(5,15,17,.85) 100%);
      transition:background .4s var(--ease);
    }
    .dealsHero__half:hover .dealsHero__veil{background:linear-gradient(180deg,rgba(5,15,17,.1) 25%,rgba(5,15,17,.9) 100%)}
    .dealsHero__tag{
      position:absolute;top:18px;left:18px;z-index:2;
      background:rgba(5,15,17,.55);backdrop-filter:blur(6px);color:var(--gold);
      font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
      padding:7px 13px;border-radius:999px;
    }
    .dealsHero__label{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;display:flex;flex-direction:column;gap:2px}
    .dealsHero__labelEyebrow{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
    .dealsHero__labelName{font-size:clamp(22px,2.8vw,34px);font-weight:800;letter-spacing:-.01em;color:var(--paper)}
    .dealsHero__go{
      position:absolute;right:20px;bottom:22px;z-index:2;width:40px;height:40px;border-radius:999px;
      background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
      display:flex;align-items:center;justify-content:center;color:var(--paper);
      opacity:0;transform:translate3d(0,8px,0);
      transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s var(--ease),color .3s var(--ease);
    }
    .dealsHero__go svg{width:17px;height:17px}
    .dealsHero__half:hover .dealsHero__go{opacity:1;transform:none;background:var(--gold);color:var(--ink)}
    .dealsHero__badge{
      position:absolute;top:50%;left:50%;z-index:3;transform:translate(-50%,-50%);
      width:50px;height:50px;border-radius:50%;background:var(--gold);color:var(--ink);
      display:flex;align-items:center;justify-content:center;
      font-family:var(--f-serif);font-style:italic;font-weight:700;font-size:14px;
      box-shadow:0 10px 26px rgba(0,0,0,.4);pointer-events:none;
    }

    @media (max-width:720px){
      .dealsHero__split{grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:auto}
      .dealsHero__half{height:42vh;min-height:260px}
      .dealsHero__labelName{font-size:24px}
    }

    /* pkgCard — one consistent card pattern reused for both the Best
       Offers teasers and the Honeymooners/Destinations grids: photo,
       category tag, title, a short description and a starting price. */
    .pkgGrid{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;margin:0 auto}
    @media (max-width:820px){.pkgGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media (max-width:480px){.pkgGrid{grid-template-columns:1fr}}

    .pkgCard{
      position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
      background:var(--ink-lift);border-radius:16px;overflow:hidden;
      box-shadow:0 1px 2px rgba(0,0,0,.16),0 14px 30px rgba(0,0,0,.22);
      transition:transform .4s var(--ease),box-shadow .4s var(--ease);
    }
    .pkgCard:hover{transform:translateY(-3px)}
    .pkgCard--featured{box-shadow:0 0 0 2px var(--gold),0 18px 36px rgba(0,0,0,.26)}
    .pkgCard__badge{
      position:absolute;top:14px;right:14px;z-index:2;
      background:var(--gold);color:var(--ink);font-size:10px;font-weight:700;
      letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
    }
    .pkgCard__photo{height:128px;background-size:cover;background-position:center;flex:none}
    .pkgCard__body{padding:15px 15px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
    .pkgCard__tag{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
    .pkgCard__name{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--paper)}
    .pkgCard__meta{
      display:flex;gap:10px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
      color:var(--haze-dim);
    }
    .pkgCard__desc{font-size:12px;line-height:1.5;color:var(--haze);flex:1;margin:1px 0 0}
    .pkgCard__price{margin:2px 0 0;font-size:11px;color:var(--haze-dim)}
    .pkgCard__price strong{display:block;margin-top:1px;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--paper)}
    .pkgCard__cta{
      margin-top:8px;display:block;text-align:center;padding:9px;border-radius:9px;
      background:var(--deep);color:#fff;font-size:11.5px;font-weight:700;
      transition:opacity .3s var(--ease);
    }
    .pkgCard--featured .pkgCard__cta{background:var(--gold);color:var(--ink)}
    .pkgCard:hover .pkgCard__cta{opacity:.9}

    body.theme-light .pkgCard{background:#fff;box-shadow:0 1px 2px rgb(var(--deep-rgb) / .05),0 14px 30px rgb(var(--deep-rgb) / .08)}
    body.theme-light .pkgCard--featured{box-shadow:0 0 0 2px var(--gold),0 18px 36px rgb(var(--deep-rgb) / .13)}
    body.theme-light .pkgCard__name{color:var(--ink)}
    body.theme-light .pkgCard__meta{color:var(--muted)}
    body.theme-light .pkgCard__desc{color:var(--muted-2)}
    body.theme-light .pkgCard__price strong{color:var(--ink)}

    /* offerTabs — Best Offers / Honeymooners / Destinations, so a visitor
       who wants one or the other never has to scroll past the wrong
       category to find it. */
    .offerTabs__nav{
      position:relative;display:flex;
      background:var(--ink-lift);border-radius:999px;padding:5px;
      max-width:380px;margin:0 auto clamp(28px,3.4vw,40px);
    }
    .offerTabs__thumb{
      position:absolute;top:5px;bottom:5px;left:5px;
      width:calc((100% - 10px) / 2);border-radius:999px;background:var(--gold);
      transform:translateX(calc(var(--thumbX,0) * 100%));
      transition:transform .4s cubic-bezier(.65,0,.35,1);
    }
    .offerTabs__btn{
      position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
      padding:13px 10px;border:0;border-radius:999px;
      background:none;color:var(--haze);cursor:pointer;
      font-family:var(--f);font-size:12.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
      transition:color .3s var(--ease);
    }
    .offerTabs__btn svg{width:17px;height:17px;flex:none}
    .offerTabs__btn.is-active{color:var(--ink)}
    body.theme-light .offerTabs__btn{color:var(--muted)}
    body.theme-light .offerTabs__btn.is-active{color:var(--ink)}
    @media (max-width:480px){
      .offerTabs__btn{padding:11px 4px;font-size:10.5px;gap:5px}
      .offerTabs__btn svg{width:15px;height:15px}
    }
    @media (max-width:360px){
      .offerTabs__btn svg{display:none}
    }

    .offerTabs__panel{display:none}
    .offerTabs__panel.is-active{display:block;animation:offerTabsIn .45s var(--ease)}
    @keyframes offerTabsIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

    /* enquiryModal — same component as religious.html's Hajj/Umrah cards:
       every "Enquire about this trip" card is a plain link to contact.html
       (so it degrades sensibly with JS off), and JS intercepts the click to
       open this instead, pre-filled with whichever package was clicked.
       Reuses the site's own .form/.field styling rather than a second
       visual language for form fields. */
    .enquiryModal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
    .enquiryModal.is-open{display:flex}
    .enquiryModal__backdrop{position:absolute;inset:0;background:rgb(var(--ink-rgb) / .72);animation:enqFade .3s var(--ease)}
    .enquiryModal__panel{
      position:relative;z-index:1;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;
      background:var(--ink-lift);border-radius:18px;padding:clamp(28px,4vw,44px);
      animation:enqPanelIn .35s var(--ease);
    }
    body.theme-light .enquiryModal__panel{background:#fff}
    .enquiryModal__close{
      position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
      display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--paper);
      transition:background .3s var(--ease);
    }
    .enquiryModal__close:hover{background:rgba(255,255,255,.16)}
    .enquiryModal__close svg{width:16px;height:16px}
    body.theme-light .enquiryModal__close{background:rgb(var(--deep-rgb) / .06);color:var(--ink)}
    body.theme-light .enquiryModal__close:hover{background:rgb(var(--deep-rgb) / .12)}
    .enquiryModal .label{margin-bottom:8px}
    .enquiryModal h2{margin-bottom:22px}
    .enquiryModal__or{
      display:flex;align-items:center;gap:14px;margin:2px 0;
      font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--haze-dim);
    }
    .enquiryModal__or::before,.enquiryModal__or::after{content:"";flex:1;height:1px;background:var(--line)}
    body.theme-light .enquiryModal__or::before,body.theme-light .enquiryModal__or::after{background:rgb(var(--deep-rgb) / .14)}
    .enquiryModal__wa{
      background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;
    }
    .enquiryModal__wa:hover{background:#20BD5C}
    .enquiryModal__wa svg{width:18px;height:18px;flex:none}
    @keyframes enqFade{from{opacity:0}to{opacity:1}}
    @keyframes enqPanelIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
    @media (max-width:520px){.enquiryModal__panel{padding:26px 20px}}
    /* hero: light overlay, darker behind the menu; text carries its own shadow */
    #main > .band--hero .band__veil{background:linear-gradient(to bottom,rgb(var(--ink-rgb) / .62),rgb(var(--ink-rgb) / .3) 12%,rgb(var(--ink-rgb) / .16) 28%,rgb(var(--ink-rgb) / .16) 70%,rgb(var(--ink-rgb) / .3))}
    /* phones: the collage fills the hero, cropped from the centre */
    @media (max-width:700px){#main > .band--hero .band__fitImg{object-fit:cover}}
    #main > .band--hero .band__dsp{text-shadow:0 2px 24px rgb(var(--ink-rgb) / .55),0 1px 3px rgb(var(--ink-rgb) / .4)}