/* THE CORNER — narrow-viewport layout for the desktop site.
   ---------------------------------------------------------------------------
   This site is the ONLY surface reachable in production (vercel.json sends "/"
   here), so it has to work on a phone. It ships no build step and its layout
   lives in inline `style` props inside the .jsx components, which a plain
   stylesheet rule cannot override — hence `!important` here. That is a
   deliberate, contained trade-off: the components stay the single source of
   truth for the WIDE layout, and this file only ever intervenes below a
   breakpoint. Keep it that way; if a rule here needs to apply at every width,
   it belongs in the component instead.

   The hook classes (.c-*) are added in the components next to the inline grid
   they override — search for the class name to find its wide-screen partner.

   Requires <meta name="viewport"> in index.html. Without that tag none of this
   runs, because the phone never reports its real width. */

/* ---- Tablet and below: multi-column layouts start collapsing ---- */
@media (max-width: 900px) {
  /* Hero: copy beside photo -> copy above photo, photo full width. */
  .c-hero-grid    { grid-template-columns: 1fr !important; gap: 32px !important; }
  .c-hero-photo   { max-width: 100% !important; margin-left: 0 !important; }

  /* Three facts across -> two. */
  .c-about-strip  { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; }

  /* Four-column photo mosaic -> two even columns; the double-width frames
     stop spanning, or they would fill a whole row on their own. */
  .c-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 190px !important; }
  .c-gallery-item { grid-column: span 1 !important; }

  .c-partners-grid { grid-template-columns: 1fr !important; }
}

/* ---- Phone ---- */
@media (max-width: 600px) {
  /* Header: logo and language switch stay on the first row, nav wraps under
     them at full width instead of squeezing into the gap between. */
  .c-header       { flex-wrap: wrap !important; gap: 12px !important; padding: 14px var(--page-gutter) !important; }
  .c-nav          { order: 3 !important; width: 100% !important; gap: 20px !important; }

  .c-about-strip  { grid-template-columns: 1fr !important; }
  .c-contact-grid { grid-template-columns: 1fr !important; }
  .c-gallery-grid { grid-auto-rows: 150px !important; gap: 12px !important; }

  /* --text-h1 is a fixed 40px, which crowds a 390px column. */
  .c-page-title   { font-size: 30px !important; }

  /* The menu title and the PDF button share a row on desktop; stack them so
     the button gets full width rather than a cramped sliver. */
  .c-menu-head    { gap: 14px !important; }
  .c-menu-head a  { width: 100% !important; }
  .c-menu-head a > button { width: 100% !important; }
}