/* GCITT landing page — responsive layout.
 *
 * The design was authored desktop-only: every rule lives in an inline style
 * attribute with fixed multi-column grids and 48px side padding, so on a
 * phone the page rendered ~743px wide inside a 390px viewport. Sections
 * overflowed their own painted backgrounds, which is why white footer text
 * was measuring at 1.04:1 contrast.
 *
 * Inline styles can only be overridden with !important, hence its use
 * throughout. The base rule collapses every grid to a single column; the
 * exceptions below restore the handful that read better as two.
 *
 * Breakpoints: 1024px (tablet) and 640px (phone).
 */

/* ── Tablet and below ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Side padding: 48px leaves almost no room for content on a phone. */
  main > section,
  footer,
  nav {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  main > section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Collapse every multi-column grid. Matching on the inline style attribute
     keeps this working whatever column counts the design uses. */
  main [style*="grid-template-columns"],
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Card grids read better two-up while there is still room. */
  #problemes [style*="grid-template-columns"],
  #pourquoi [style*="grid-template-columns"],
  #confiance [style*="grid-template-columns"],
  #parcours [style*="grid-template-columns"],
  footer > div > [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* The hero collage: fixed 520px height with a 2x2 grid does not survive a
     single column. Let it size to its content. */
  [data-reveal-key="heroimg"] {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
  }
  [data-reveal-key="heroimg"] img {
    height: 200px !important;
  }
  [data-reveal-key="heroimg"] img:first-child {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    height: 240px !important;
  }

  /* Typography: 52px headlines wrap to six lines on a phone. */
  h1 { font-size: 36px !important; line-height: 1.15 !important; }
  h2 { font-size: 27px !important; }

  /* The connector line behind the 7-step journey assumes one row. */
  #parcours [style*="position:absolute"],
  #parcours [style*="position: absolute"] {
    display: none !important;
  }

  /* Fixed-height media panels. */
  #cite [style*="height:460px"],
  #cite [style*="height: 460px"] { height: 260px !important; }
  #confiance [style*="height:280px"],
  #confiance [style*="height: 280px"] { height: 200px !important; }
}

/* ── Phone ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* The desktop link row cannot fit; the sticky "Prendre rendez-vous" button
     and the in-page footer navigation carry the load instead. */
  nav > div:nth-of-type(2) { display: none !important; }
  nav { padding-top: 10px !important; padding-bottom: 10px !important; }
  nav img { height: 34px !important; }
  nav > a {
    font-size: 13px !important;
    padding: 10px 14px !important;
    white-space: nowrap;
  }

  /* Everything to one column, including the pairs kept at 1024px. */
  main [style*="grid-template-columns"],
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  #problemes [style*="grid-template-columns"],
  #pourquoi [style*="grid-template-columns"],
  #confiance [style*="grid-template-columns"],
  #parcours [style*="grid-template-columns"],
  footer > div > [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  [data-reveal-key="heroimg"] { grid-template-columns: 1fr !important; }
  [data-reveal-key="heroimg"] img,
  [data-reveal-key="heroimg"] img:first-child { height: 210px !important; }

  main > section {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  h1 { font-size: 30px !important; }
  h2 { font-size: 23px !important; }

  /* Full-width call-to-action buttons are easier to hit with a thumb. */
  #hero [style*="display:flex"] > a[href="#rdv"],
  #hero [style*="display: flex"] > a[href="#rdv"],
  #hero a[href="#villas"] {
    flex: 1 1 auto !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Keep the form panel from crowding the screen edges. */
  #rdv > div > div:last-child { padding: 24px 20px !important; }

  /* The floating WhatsApp button sits over the footer CTA on small screens. */
  a[aria-label="Discuter sur WhatsApp"] {
    width: 52px !important;
    height: 52px !important;
    bottom: 16px !important;
    right: 16px !important;
  }
}

/* Deliberately NOT setting `overflow-x: hidden` on html/body as a safety net:
 * doing so clips the root element to the viewport height and kills vertical
 * scrolling outright. The rules above already bring the layout within the
 * viewport, so the guard is unnecessary as well as harmful. */
@media (max-width: 1024px) {
  img { max-width: 100%; }
}

/* Respect a reduced-motion preference: the scroll reveals are decorative. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal-key] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Site progress mosaic ─────────────────────────────────────────────────
 * The desktop mosaic is a 4-column grid with 2x2 and 1x2 spans. The generic
 * grid collapse above sets one column, so the spans have to be unwound too or
 * the items would keep reserving two tracks that no longer exist.            */
@media (max-width: 1024px) {
  #confiance .gc-gallery {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 190px !important;
  }
  .gc-gallery__item--hero {
    grid-column: span 2 !important;
    grid-row: span 1 !important;
  }
  .gc-gallery__item--wide {
    grid-column: span 2 !important;
  }
}

@media (max-width: 640px) {
  #confiance .gc-gallery {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 200px !important;
  }
  .gc-gallery__item--hero,
  .gc-gallery__item--wide {
    grid-column: span 1 !important;
  }
  .gc-gallery__caption {
    padding: 28px 14px 13px !important;
  }
}

/* ── Villa cards on small screens ─────────────────────────────────────────
 * The title and price share a row via space-between. In a 340px column that
 * squeezes "Villa Fenou F4" onto two lines beside the price, and pushes
 * "Voir les détails" into a second line next to the primary button. Stack
 * them instead — there is no width to negotiate over. */
@media (max-width: 640px) {
  .gc-villa [style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .gc-villa h3 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  .gc-villa .gc-villa__price {
    font-size: 20px !important;
  }
  /* Action row: primary full width, the toggle beneath it. */
  .gc-villa [style*="display:flex;gap:12px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .gc-villa .gc-link-btn {
    text-align: center;
    padding: 10px 2px !important;
  }
}

/* Tablet: two-up villa cards would be too narrow, keep them full width. */
@media (min-width: 641px) and (max-width: 1024px) {
  .gc-villa h3 { font-size: 23px !important; }
}

/* ── Hero slider ──────────────────────────────────────────────────────────*/
@media (max-width: 1024px) {
  .gc-slide {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .gc-slide__media {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 190px !important;
  }
  .gc-slide__tile--main,
  .gc-slide__tile--tall {
    grid-column: 1 / -1 !important;
    grid-row: span 1 !important;
    height: 230px;
  }
  .gc-slider__dot { flex: 1 1 auto !important; }
}

@media (max-width: 640px) {
  .gc-slide__media {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 200px !important;
  }
  .gc-slide__tile--main,
  .gc-slide__tile--tall { height: auto; }
  .gc-slide h1 { font-size: 30px !important; }

  /* Arrows are redundant once swiping is available, and they crowd the row. */
  .gc-slider__arrow { display: none !important; }
  .gc-slider__controls { gap: 10px !important; margin-top: 26px !important; }
  .gc-slider__dot {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    text-align: center;
  }
  .gc-fact__value { font-size: 21px !important; }
  .gc-hero__trust { gap: 14px !important; }
}

/* ── Experience + testimonials ────────────────────────────────────────────*/
@media (max-width: 1024px) {
  /* The collage is absolutely positioned for the desktop overlap; stack it. */
  .gc-exp__collage {
    min-height: 0 !important;
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px;
  }
  .gc-exp__shot { position: static !important; width: auto !important; }
  .gc-exp__shot--team { height: 260px !important; }
  .gc-exp__shot--site { height: 260px !important; }
  .gc-exp__accent { display: none !important; }
  .gc-exp__title { font-size: 36px !important; }
  .gc-exp__stat-value { font-size: 28px !important; }

  .gc-testi__grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 640px) {
  .gc-exp__collage { grid-template-columns: 1fr !important; }
  .gc-exp__shot--team, .gc-exp__shot--site { height: 220px !important; }
  .gc-exp__title { font-size: 30px !important; }
  .gc-exp__stats { gap: 20px !important; }
  .gc-testi__grid { grid-template-columns: 1fr !important; }
  .gc-testi__media { height: 190px !important; }
}

/* Galeries et familles illustratives */
@media (max-width: 1100px) {
  .gc-familles { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 900px) {
  /* Les flèches mangent la photo sur un écran étroit : le swipe et les
     miniatures suffisent. */
  .gc-lightbox__nav { display: none !important; }
  .gc-lightbox { padding: 14px 14px 18px !important; }
  .gc-lightbox__title strong { font-size: 17px !important; }
  .gc-lightbox__thumb { width: 72px !important; height: 52px !important; }
}

@media (max-width: 640px) {
  .gc-familles { grid-template-columns: 1fr !important; }
  .gc-famille__media { height: 220px !important; }
  .gc-villa__gallery { right: 12px !important; bottom: 12px !important; }
  .gc-lightbox__thumbs { justify-content: flex-start !important; }
}