/* hosteasy/combo-offer-page.css — PAGE-specific CSS for the Host Easy
   "Domain + Web Hosting Offers" page (the LIVE https://www.hosteasy.in/offers.php).
   =========================================================================
   Loads the shared design system first (tokens + base + header/nav/footer via
   common.css → brand-tokens.css), then styles only this page's sections:
     .skip-link                         → keyboard skip-to-content (a11y)
     .content (main)                    → page wrapper (note + grid)
     .banner / .banner_content          → full-bleed home-style hero (H1 + lead)
     .offers_note / _card / _tit        → the Linux vs Windows hosting note (2-up)
     .offers_head                       → the combo-grid section heading
     .offers_container / .offers_grid   → the responsive grid of combo cards
     .combo_packs (+ ext_<tld>)         → one LIVE combo card (offers.php markup):
       .combo_packs_con / .combo_choose      form → a → div wrappers, then the
       .combo_amnt / p / .divs_exts (button)  title, price, feature line, Buy Now
     .offers_footnote                   → the "* Deals & Offers" closing footnote
   CSS-ONLY design: never a raw hex — every value is a --ho-* token from
   brand-tokens.css. Production pulls the tokens + chrome from common.css /
   brand-tokens.css; the design lives entirely in this one page stylesheet. */
@import "common.css";

/* ── skip-link (visually hidden until focused) ─────────────────────────────── */
.skip-link{position:absolute;left:var(--ho-s-2);top:-48px;z-index:80;
  background:var(--ho-card);color:var(--ho-brand-text);font-weight:var(--ho-fw-semi);
  font-size:var(--ho-fs-sm);padding:var(--ho-s-2) var(--ho-s-4);border:1px solid var(--ho-brand);
  border-radius:var(--ho-r-sm);box-shadow:var(--ho-e-2);transition:top var(--ho-dur) var(--ho-ease)}
.skip-link:focus{top:var(--ho-s-2)}

/* ── page wrapper ──────────────────────────────────────────────────────────── */
/* top padding dropped so the hero band sits flush under the nav (like home); the
   band supplies the rhythm below it via its own margin-bottom. */
.content{max-width:var(--wrap);margin:0 auto;padding:0 var(--ho-s-5) 0}

/* ── hero band (full-bleed, home-style) ──────────────────────────────────────
   Re-housed the H1 + intro in a .banner/.banner_content band (edit 438d71) so the
   heading gets a full-bleed sky hero band, centring and vertical rhythm to match
   the home page. Full-bleed via symmetric negative margins (calc(50% - 50vw))
   while the band stays INSIDE <main> — so the H1 remains the main landmark's
   heading and the #main skip-link still lands on it. Band = the shared
   --ho-hero-grad wash under a sky-100 divider (identical to the home hero,
   home-page.css:18); H1 is centred hero-ink, the lead is a LEFT-aligned,
   full-width sky-800 paragraph (matching the common banner <p>). */
.banner{background:var(--ho-hero-grad);border-bottom:1px solid var(--ho-sky-100);
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-bottom:var(--ho-s-section)}
.banner_content{max-width:var(--wrap);margin:0 auto;
  padding:calc(var(--ho-s-section) - 18px) var(--ho-s-5) calc(var(--ho-s-section) - 20px);text-align:center}
.banner_content h1{font-size:var(--ho-fs-hero);line-height:var(--ho-lh-tight);letter-spacing:var(--ho-tracking-tight);
  color:var(--ho-hero-ink);font-weight:var(--ho-fw-black);margin:0 0 var(--ho-s-4);width:100%;max-width:none}
.banner_content > p{color:var(--ho-sky-800);font-size:var(--ho-fs-md);line-height:1.7;
  margin:0 0 var(--ho-s-6);width:100%;max-width:none;text-align:left}
/* last child: drop the trailing margin so ONLY the band's bottom padding
   (--ho-s-section) governs the banner's foot — no redundant --ho-s-6 stacking. */
.banner_content > p:last-child{margin-bottom:0}

/* ── Linux vs Windows note (2-up info cards) ───────────────────────────────── */
.offers_note{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ho-s-4);
  max-width:960px;margin:0 auto var(--ho-s-7)}
.offers_note_card{background:var(--ho-card);border:1px solid var(--ho-line);border-radius:var(--ho-r-lg);
  box-shadow:var(--ho-e-1);padding:var(--ho-s-5) var(--ho-s-5) var(--ho-s-5) calc(var(--ho-s-5) + var(--ho-s-1));
  border-left:4px solid var(--ho-brand)}
.offers_note_windows{border-left-color:var(--ho-indigo-600)}
.offers_note_tit{font-size:var(--ho-fs-md);font-weight:var(--ho-fw-bold);color:var(--ho-ink);
  letter-spacing:var(--ho-tracking-tight);margin:0 0 var(--ho-s-2)}
.offers_note_card p{color:var(--ho-body);font-size:var(--ho-fs-base);line-height:1.7}
.offers_note_card p b{color:var(--ho-ink)}

/* ── combo-grid section heading ────────────────────────────────────────────── */
.offers_head{font-size:var(--ho-fs-xl);font-weight:var(--ho-fw-black);color:var(--ho-ink);
  letter-spacing:var(--ho-tracking-tight);text-align:center;max-width:960px;margin:0 auto var(--ho-s-6)}

/* ── extension filter tabs (filter the combo grid by TLD) ──────────────────── */
.tabs_ext_div{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ho-s-2);
  max-width:960px;margin:0 auto var(--ho-s-6)}
.tabs_ext_div .divs_exts{cursor:pointer;user-select:none;font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-semi);
  color:var(--ho-body);background:var(--ho-card);border:1px solid var(--ho-line);
  border-radius:var(--ho-r-pill);padding:var(--ho-s-2) var(--ho-s-4);
  transition:background var(--ho-dur) var(--ho-ease),color var(--ho-dur) var(--ho-ease),border-color var(--ho-dur) var(--ho-ease)}
.tabs_ext_div .divs_exts:hover{border-color:var(--ho-sky-200);color:var(--ho-brand-text)}
.tabs_ext_div .divs_exts.active{background:var(--ho-brand-cta);border-color:var(--ho-brand-cta);color:var(--ho-white)}

/* ── the combo grid ────────────────────────────────────────────────────────── */
.offers_container{max-width:var(--wrap);margin:0 auto}
.offers_grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ho-s-5)}

/* one combo card — LIVE offers.php markup: .combo_packs → form → a → div →
   .combo_packs_con. The form/a/cursor-div wrappers pass through (display:contents)
   so .combo_packs_con is the card's flex column and the button pins to its foot. */
.combo_packs{display:flex;flex-direction:column;background:var(--ho-card);
  border:1px solid var(--ho-line);border-radius:var(--ho-r-xl);box-shadow:var(--ho-e-1);
  overflow:hidden;
  transition:box-shadow var(--ho-dur) var(--ho-ease),transform var(--ho-dur) var(--ho-ease),border-color var(--ho-dur) var(--ho-ease)}
.combo_packs:hover{box-shadow:var(--ho-e-3);transform:translateY(-3px);border-color:var(--ho-sky-200)}
.combo_packs form,
.combo_packs form > a,
.combo_packs form > a > div{display:contents}
.combo_packs_con{display:flex;flex-direction:column;flex:1 1 auto;padding:var(--ho-s-5)}

/* combo title — the domain extension + hosting plan */
.combo_choose{font-size:var(--ho-fs-md);font-weight:var(--ho-fw-bold);color:var(--ho-ink);
  line-height:var(--ho-lh-snug);letter-spacing:var(--ho-tracking-tight);margin:0 0 var(--ho-s-3)}

/* price — the deal number is the loudest thing on the card; the "/ Year" tail
   (the second span) drops back to a quiet body cadence. */
.combo_amnt{color:var(--ho-price);font-size:var(--ho-fs-xl);font-weight:var(--ho-fw-black);
  letter-spacing:var(--ho-tracking-tight);line-height:var(--ho-lh-tight);margin:0 0 var(--ho-s-3)}
.combo_amnt span + span{color:var(--ho-body);font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-semi)}
.combo_amnt b{font-weight:var(--ho-fw-semi)}
/* currency mark — quieter + smaller than the amount it prefixes */
.combo_amnt .cur{font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-semi);color:var(--ho-price)}

/* feature line */
.combo_packs_con p{color:var(--ho-body);font-size:var(--ho-fs-base);line-height:var(--ho-lh);
  padding:var(--ho-s-3) 0;margin:0 0 var(--ho-s-4);border-top:1px solid var(--ho-line);
  border-bottom:1px solid var(--ho-line)}

/* Buy Now — the card's conversion action, pinned to the card foot (cyan CTA, AA) */
.combo_packs .divs_exts{margin-top:auto;display:block;width:100%;cursor:pointer;
  text-align:center;font-weight:var(--ho-fw-bold);letter-spacing:.02em;font-size:var(--ho-fs-base);
  padding:11px var(--ho-s-4);border-radius:var(--ho-r);
  border:1px solid var(--ho-brand-cta);background:var(--ho-brand-cta);color:var(--ho-white);
  transition:background var(--ho-dur) var(--ho-ease),color var(--ho-dur) var(--ho-ease)}
.combo_packs .divs_exts:hover{background:var(--ho-sky-800);color:var(--ho-white)}

/* ── closing footnote ──────────────────────────────────────────────────────── */
.offers_footnote{max-width:960px;margin:var(--ho-s-8) auto var(--ho-s-section);
  background:var(--ho-tile);border:1px solid var(--ho-line);border-radius:var(--ho-r-lg);
  padding:var(--ho-s-5) var(--ho-s-6);color:var(--ho-muted);font-size:var(--ho-fs-sm);line-height:1.8}
.offers_footnote a{color:var(--ho-brand-text);font-weight:var(--ho-fw-semi)}
.offers_footnote a:hover{color:var(--ho-sky-800)}

/* ── responsive (640 / 1024 / 1440 tiers) ──────────────────────────────────── */
@media (max-width:1440px){
  .offers_grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .offers_grid{grid-template-columns:repeat(2,1fr);gap:var(--ho-s-4)}
}
@media (max-width:640px){
  .content{padding-left:var(--ho-s-4);padding-right:var(--ho-s-4)}
  .offers_note{grid-template-columns:1fr;gap:var(--ho-s-3)}
  .offers_grid{grid-template-columns:1fr;gap:var(--ho-s-4)}
  .combo_packs_con{padding:var(--ho-s-4)}
  .offers_footnote{padding:var(--ho-s-4) var(--ho-s-4)}
}
@media (max-width:400px){
  .content{padding-left:var(--ho-s-3);padding-right:var(--ho-s-3)}
}