/* responsive-home.css — container-query rules that make NewspaperHome
   render correctly at any width (1440 desktop down to 390 mobile).
   The NewspaperHome root carries .bh-home which sets the container.
   Inline styles in the components handle anything that doesn't change
   across widths; classNames declared here own everything that does. */

.bh-home {
  container-type: inline-size;
  container-name: home;
}

/* Wordmark "The Times of India" — canonical newspaper-name style, matching the
   home hero: red Playfair Display serif, weight 800. Every page's hero name uses
   .toi-name; this is the single source of truth so they all render identically.
   (Pages may still set their own font-size inline; only the family/weight/colour
   are standardised here.) */
.toi-name {
  font-family: "Playfair Display", "Times New Roman", Georgia, serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent);
}
/* On mobile, inherit the parent h1's font-size and allow wrapping so the wordmark
   never overflows a narrow column. */
@container home (max-width: 760px) {
  .toi-name {
    white-space: normal !important;
    line-height: 1.05 !important;
  }
}

/* Desktop/Mobile chrome visibility toggles — used to render both versions
   of the header / footer / sticky calculator and let CSS hide the wrong one */
.bh-only-mobile  { display: none; }
.bh-only-desktop { display: contents; }

/* Hide the DESKTOP sticky booking bar on EVERY page (the "Lowest-price guaranteed /
   View Packages & Book" pill). All page booker variants share a *Booker x-data —
   stickyBooker (home), categoryBooker (category/rate-card), cityBooker (city),
   displayBooker (display-ad) — so the substring match covers them all. The mobile
   sticky booker is a separate .bh-only-mobile block and is left untouched, so
   booking stays one tap away on phones. Targets the booker's x-data so other
   bh-only-desktop blocks (header, footer, etc.) keep showing on desktop. */
.bh-only-desktop[x-data*="Booker"] { display: none !important; }

@container home (max-width: 760px) {
  .bh-only-mobile  { display: contents; }
  .bh-only-desktop { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.bh-hero            { padding: 56px 40px 64px; }
.bh-hero-inner      {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 56px; align-items: center; position: relative;
}
.bh-hero-title      { font-size: 52px; line-height: 1.08; }
.bh-hero-sub        { font-size: 18px; max-width: 540px; }
.bh-hero-image      { order: 2; }
.bh-hero-text       { order: 1; }
.bh-hero-promises   { gap: 12px 28px; }

@container home (max-width: 760px) {
  .bh-hero            { padding: 22px 20px 26px; }
  .bh-hero-inner      { grid-template-columns: 1fr; gap: 22px; }
  .bh-hero-title      { font-size: 30px; line-height: 1.1; }
  .bh-hero-sub        { font-size: 14.5px; max-width: none; }
  /* On mobile: text up top, image stack below — and shrink image stack */
  .bh-hero-text       { order: 1; }
  .bh-hero-image      { order: 2; max-width: 320px; margin: 0 auto; width: 100%; }
  .bh-hero-promises   { gap: 8px 16px; font-size: 12.5px; }
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.bh-trust-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 24px 40px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center;
}
.bh-trust-item        { padding-left: 22px; border-left: 1px solid var(--rule); }
.bh-trust-item:first-child { border-left: none; }
.bh-trust-item-num    { font-size: 26px; }

@container home (max-width: 760px) {
  .bh-trust-inner {
    padding: 14px 20px;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .bh-trust-item {
    padding: 12px 14px; border-left: none;
    background: var(--paper-2); border-radius: 10px;
  }
  .bh-trust-item-num    { font-size: 19px; }
  /* hide the 5th item (INS) on mobile to fit 2x2 grid cleanly */
  .bh-trust-item:nth-child(5) { display: none; }
}

/* ============================================================
   STEPS
   ============================================================ */
.bh-steps            { padding: 64px 40px; }
.bh-steps-inner      { max-width: 1200px; margin: 0 auto; }
.bh-steps-h2         { font-size: 36px; }
.bh-steps-grid       { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.bh-steps-rail       { position: absolute; top: 36px; left: 17%; right: 17%; height: 2px; background: var(--rule); z-index: 0; }
.bh-step-circle      { width: 72px; height: 72px; font-size: 32px; }
.bh-step-card        { text-align: center; padding: 0 24px; }
.bh-step-title       { font-size: 20px; margin-top: 18px; }
.bh-step-sub         { max-width: 320px; margin-inline: auto; }

@container home (max-width: 760px) {
  .bh-steps          { padding: 36px 20px; }
  .bh-steps-h2       { font-size: 22px; }
  .bh-steps-grid     { grid-template-columns: 1fr; gap: 12px; }
  .bh-steps-rail     { display: none; }
  .bh-step-card      {
    text-align: left; padding: 14px;
    display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center;
    background: var(--paper-2); border-radius: 10px;
  }
  .bh-step-circle    { width: 48px; height: 48px; font-size: 20px; box-shadow: none !important; }
  .bh-step-title     { font-size: 16px; margin-top: 0; }
  .bh-step-sub       { max-width: none; margin: 4px 0 0; font-size: 13px; }
}

/* ============================================================
   AD TYPES (Text/Display/Brand)
   ============================================================ */
.bh-types            { padding: 64px 40px; }
.bh-types-inner      { max-width: 1200px; margin: 0 auto; }
.bh-types-grid       { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bh-types-h2         { font-size: 32px; }

@container home (max-width: 760px) {
  .bh-types          { padding: 36px 20px; }
  .bh-types-h2       { font-size: 22px; }
  .bh-types-grid     { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   SUPPLEMENTS PICKER
   ============================================================ */
.bh-supps            { padding: 64px 40px; }
.bh-supps-inner      { max-width: 1200px; margin: 0 auto; }
.bh-supps-h2         { font-size: 32px; }
.bh-supps-headrow    { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; }
.bh-supps-grid       { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

@container home (max-width: 760px) {
  .bh-supps          { padding: 36px 20px; }
  .bh-supps-h2       { font-size: 22px; }
  .bh-supps-headrow  { margin-bottom: 18px; }
  .bh-supps-grid     { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ============================================================
   CATEGORIES GRID
   ============================================================ */
.bh-cats             { padding: 64px 40px; }
.bh-cats-inner       { max-width: 1200px; margin: 0 auto; }
.bh-cats-h2          { font-size: 32px; }
.bh-cats-headrow     { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; }
.bh-cats-grid        { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

@container home (max-width: 760px) {
  .bh-cats           { padding: 36px 20px; }
  .bh-cats-h2        { font-size: 22px; }
  .bh-cats-headrow   { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 16px; }
  .bh-cats-grid      { grid-template-columns: 1fr; gap: 8px; }
}

/* ============================================================
   CITIES BAND
   ============================================================ */
.bh-cities           { padding: 48px 40px; }
.bh-cities-inner     { max-width: 1200px; margin: 0 auto; }
.bh-cities-h2        { font-size: 26px; }
.bh-cities-headrow   { display: flex; justify-content: space-between; align-items: baseline; }
.bh-cities-grid      { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-top: 22px; }

@container home (max-width: 760px) {
  .bh-cities         { padding: 26px 20px; }
  .bh-cities-h2      { font-size: 18px; line-height: 1.25; }
  .bh-cities-headrow { flex-direction: column; align-items: flex-start; gap: 4px; }
  .bh-cities-grid    { grid-template-columns: repeat(3, 1fr); margin-top: 14px; gap: 6px; }
}

/* ============================================================
   VIDEO TESTIMONIALS — EDITORIAL VARIANT
   ============================================================ */
.bh-vte              { padding: 64px 40px; }
.bh-vte-inner        { max-width: 1200px; margin: 0 auto; }
.bh-vte-headrow      { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }
.bh-vte-h2           { font-size: 30px; }
.bh-vte-feat         { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; padding-bottom: 36px; border-bottom: 1px solid var(--rule); }
.bh-vte-feat-quote   { font-size: 32px; line-height: 1.3; }
.bh-vte-feat-dropmark{ font-size: 88px; }
.bh-vte-rest         { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }

@container home (max-width: 760px) {
  .bh-vte            { padding: 36px 20px; }
  .bh-vte-headrow    { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
  .bh-vte-h2         { font-size: 20px; line-height: 1.2; }
  .bh-vte-feat       { grid-template-columns: 1fr; gap: 18px; padding-bottom: 24px; }
  .bh-vte-feat-quote { font-size: 20px; line-height: 1.35; }
  .bh-vte-feat-dropmark { font-size: 56px; }
  .bh-vte-rest       { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
}

/* ============================================================
   CTA BAND (bottom of page)
   ============================================================ */
.bh-cta              { padding: 56px 40px; }
.bh-cta-inner        {
  max-width: 1280px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
}
.bh-cta-h2           { font-size: 32px; line-height: 1.15; }
.bh-cta-buttons      { display: flex; gap: 10px; }

@container home (max-width: 760px) {
  .bh-cta            { padding: 32px 20px; }
  .bh-cta-inner      { flex-direction: column; align-items: stretch; gap: 18px; }
  .bh-cta-h2         { font-size: 22px; }
  .bh-cta-buttons    { flex-direction: column; gap: 8px; }
  .bh-cta-buttons button { width: 100%; justify-content: center; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.bh-footer-grid {
  max-width: 1280px; margin: 0 auto;
  padding: 0 40px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
}
/* Footer links — muted by default, accent on hover for a finished feel. */
.bh-footer-link {
  color: var(--ink-2); text-decoration: none; transition: color .15s;
}
.bh-footer-link:hover { color: var(--accent); }

.bh-footer-bottom {
  max-width: 1280px; margin: 44px auto 0;
  padding: 22px 40px;
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 16px; font-size: 12px;
}

@container home (max-width: 760px) {
  .bh-footer-grid    { grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 20px; }
  .bh-footer-grid > div:first-child { grid-column: 1 / -1; }
  .bh-footer-bottom  { padding: 16px 20px; flex-direction: column; gap: 10px; font-size: 11px; text-align: left; }
}