/* Hope Church Winchester — shared site styles.
   The page markup carries its full desktop layout as inline styles (baked in
   when the pages were converted from the original design-component source).
   This file only needs to (a) provide a base reset and (b) reproduce the
   responsive breakpoints that the old runtime applied in JavaScript.

   Breakpoints mirror the original applyResponsive():
     mobile  = viewport <  1080px
     narrow  = viewport <   560px
   Media-query rules use !important so they override the inline desktop styles. */

/* ---- base reset (was injected by the runtime) ---- */
html, body { margin: 0; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Neue Montreal", "Inter", system-ui, sans-serif;
  background: #0D1B3E;
  color: #232220;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
iframe, video { max-width: 100%; }
/* <picture> is only ever a WebP wrapper around an <img>. Make it layout-
   transparent so images that fill their container (width/height:100%) size
   against the real parent, not the wrapper — otherwise logos in fixed-ratio
   boxes (e.g. CAP, Commission) overflow and get clipped. */
picture { display: contents; }
a { color: #3F5CAA; text-decoration: none; }
a:hover { color: #0D1B3E; }
::selection { background: #3F5CAA; color: #fff; }
#dc-root, #dc-root > .sc-host { min-height: 100%; }

/* Hover "lift": buttons and cards tagged .lift rise slightly on hover. Defined
   globally here so every page behaves the same (the homepage was missing it). */
.lift { transition: transform .35s cubic-bezier(0.2,0,0,1), box-shadow .35s cubic-bezier(0.2,0,0,1); }
.lift:hover { transform: translateY(-6px) !important; box-shadow: 0 18px 40px -18px rgba(13,27,62,0.45); }

/* Nav CTAs use light-on-dark link colours — don't let the global a:hover
   override the button text colour set inline. */
[data-navctas] a:hover, [data-navlinks] a:hover, [data-menu] a:hover,
nav a:hover { color: inherit; }

/* The 8 top-nav links don't fit on one line below ~1120px and their text
   starts to wrap awkwardly. Switch to the hamburger a little above the mobile
   breakpoint so the desktop nav never gets cramped, and never wrap link text. */
[data-navlinks] a { white-space: nowrap; }
@media (max-width: 1160px) {
  [data-navlinks] { display: none !important; }
  [data-navctas]  { display: none !important; }
  [data-hamburger] { display: inline-flex !important; }
}

/* ================= mobile: viewport < 1080px ================= */
@media (max-width: 1079px) {
  [data-newsgrid] {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    justify-items: center !important;
  }
  [data-grid2] { grid-template-columns: 1fr !important; }
  [data-grid3] { grid-template-columns: 1fr !important; }
  [data-grid4] { grid-template-columns: 1fr 1fr !important; }

  [data-footgrid] {
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    margin-bottom: 44px !important;
  }

  /* ---- Page-specific content grids ----
     These reproduce each page's original applyResponsive() so every module
     collapses on mobile. mobile = < 1080px; the narrow (< 560px) block below
     tightens the ones that go to a single column on phones. */

  /* two-column layouts that stack to one column on mobile */
  [data-leadgrid],   /* families: leader cards */
  [data-capgrid],    /* what's on: CAP feature */
  [data-currentgrid],/* teaching: current series */
  [data-musicgrid],  /* teaching: worship music */
  [data-catchgrid],  /* teaching: catch-up */
  [data-bloggrid],   /* partners: blog */
  [data-msggrid],    /* contact: message split */
  [data-splitgrid]   /* contact: split rows */
  { grid-template-columns: 1fr !important; }
  [data-musicgrid] { gap: 32px !important; }

  /* multi-column card grids -> 2 columns on mobile */
  [data-agegrid],    /* families: age groups */
  [data-youthgrid],  /* families: youth */
  [data-midgrid],    /* families: midweek */
  [data-mgrid],      /* what's on: midweek */
  [data-seriesgrid], /* teaching: series archive */
  [data-couplegrid], /* about: couples */
  [data-partnergrid],/* partners: partner logos */
  [data-connectgrid],/* contact: connect */
  [data-trusteegrid] /* about: trustees */
  { grid-template-columns: repeat(2, 1fr) !important; }

  /* dense people grids -> 3 columns on mobile */
  [data-peoplegrid], /* about: staff/team */
  [data-eldergrid]   /* about: elders */
  { grid-template-columns: repeat(3, 1fr) !important; }

  /* sunday hero info strip -> 2 columns on mobile */
  [data-herostrip] { grid-template-columns: 1fr 1fr !important; }

  /* Sunday map: aspect-ratio 21/9 + min-height:280px forces the box wider than
     a phone screen. Drop the min-height and use a friendlier ratio on mobile. */
  [style*="aspect-ratio: 21 / 9"] {
    aspect-ratio: 3 / 2 !important;
    min-height: 0 !important;
  }

  /* Hero sections are bottom-aligned on desktop. On mobile the eyebrow/title/
     description wrap to many more lines and nearly fill the hero, so bottom
     alignment shoves the top of the content up under the fixed 74px nav.
     Top-align on mobile with padding that clears the nav so the content flows
     downward and the hero grows to fit (min-height, not fixed height). */
  [data-hero] {
    justify-content: flex-start !important;
    padding-top: 104px !important;
    padding-bottom: 56px !important;
  }
}

/* ================= narrow: viewport < 560px ================= */
@media (max-width: 559px) {
  [data-grid4] { grid-template-columns: 1fr !important; }

  [data-footgrid] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px 22px !important;
    margin-bottom: 34px !important;
  }
  [data-footaddr] { grid-column: 1 / -1 !important; }
  [data-foot] { padding: 46px 24px 28px !important; }
  [data-footpartners] { justify-content: flex-start !important; }

  /* On the narrowest phones these collapse fully to a single column. */
  [data-agegrid],
  [data-youthgrid],
  [data-midgrid],
  [data-mgrid],
  [data-seriesgrid],
  [data-couplegrid],
  [data-partnergrid],
  [data-connectgrid],
  [data-herostrip],
  [data-catchcards],  /* teaching: catch-up cards */
  [data-formrow]      /* contact: form rows */
  { grid-template-columns: 1fr !important; }

  /* dense people grids -> 2 columns on the narrowest phones */
  [data-peoplegrid],
  [data-eldergrid],
  [data-trusteegrid] { grid-template-columns: repeat(2, 1fr) !important; }
}