/* ==========================================================================
   CRservice PHP — Responsive v3 (desktop-first breakpoints)
   ========================================================================== */

/* Guard against horizontal overflow on mobile (off-canvas menu, reveal transforms) */
html, body { overflow-x: hidden; }

/* ── 1440px ── */
@media (max-width: 1440px) {
  .values-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── 1280px ── */
@media (max-width: 1280px) {
  .services-grid      { grid-template-columns: repeat(3, 1fr); }
  .about-grid         { gap: var(--space-3xl); }
  .site-footer__grid  { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-2xl); }
}

/* ── 1024px — hamburger breakpoint ── */
@media (max-width: 1024px) {

  /* ── Header: leave only logo + hamburger ── */
  .site-nav,
  .site-header__phone,
  .site-header__cta { display: none !important; }
  .hamburger { display: flex; }

  /* Push burger to the right edge (nav that did this on desktop is hidden) */
  .site-header__actions { margin-left: auto; }

  /* ── Hero: single column ── */
  .hero__content {
    grid-template-columns: 1fr;
    gap: 0;
    height: 100%;
    padding-block: clamp(1.5rem, 5vh, 3rem);
    align-content: center;
  }
  .hero__visual-col { display: none; }
  .hero__text-col   { max-width: 100%; }

  /* ── Grids ── */
  .services-grid     { grid-template-columns: repeat(2, 1fr); }
  .values-grid       { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid      { grid-template-columns: repeat(3, 1fr); }
  .gallery-full-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid     { grid-template-columns: 1fr 1fr; }
  .stats-grid        { grid-template-columns: repeat(4, 1fr); }

  /* ── About: single column, badge inline ── */
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .about-grid__media {
    max-width: 440px;
    margin-inline: auto;
    padding-bottom: 0;
  }

  /* Badge leaves absolute position → inline card under visual */
  .about-badge {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    text-align: left;
    padding: var(--space-md) var(--space-xl);
    margin-top: var(--space-md);
    border-radius: var(--radius-lg);
    right: auto;
    bottom: auto;
  }
  .about-badge strong { font-size: var(--text-2xl); }
  .about-badge span   { font-size: var(--text-sm); }

  /* ── Contact ── */
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-3xl); }

  /* ── CTA box ── */
  .cta-box {
    flex-direction: column;
    text-align: center;
    padding: var(--space-2xl);
    border-radius: var(--radius-xl);
  }
  .cta-box__actions { justify-content: center; }
  .cta-box__deco { display: none; }

  /* ── Footer ── */
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .site-footer__col--brand { grid-column: 1 / -1; }

  /* ── Mobile/tablet polish: no janky reveal + center EVERYTHING ── */
  .animate-on-scroll { opacity: 1; transform: none; transition: none; }

  .hero__arrows      { display: none; }
  .hero__controls    { justify-content: center; bottom: var(--space-lg); }
  .hero__scroll-hint { display: none; }

  /* No Ken-Burns zoom on mobile — distracting + janky on the URL-bar reflow */
  .hero__image { animation: none; transform: none; will-change: auto; }

  .hero__text-col { max-width: 100%; text-align: center; }
  .hero__text     { max-width: 100%; margin-inline: auto; }
  .hero__actions  { justify-content: center; }

  .about-grid__content { text-align: center; }
  .about-title, .about-text, .about-page__para { text-align: center; }
  .about-highlights li { justify-content: center; }

  .contact-info, .contact-info__title, .contact-info__text { text-align: center; }
  /* Center the block as a unit, rows left-aligned → icons line up in one column */
  .contact-details { width: max-content; max-width: 100%; margin-inline: auto; }
  .contact-detail  { justify-content: flex-start; text-align: left; }
  .contact-details > :not(.contact-detail) { align-self: center; } /* center the map button */
  .contact-form-card h2 { text-align: center; }

  .site-footer__col          { text-align: center; }
  .site-footer__social       { justify-content: center; }
  .site-footer__contact li   { justify-content: center; }
  .site-footer__bottom       { flex-direction: column; text-align: center; gap: var(--space-md); }
  .site-footer__bottom-links { justify-content: center; }
}

/* ── 768px ── */
@media (max-width: 768px) {
  /* Grids */
  .services-grid     { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .values-grid       { grid-template-columns: 1fr 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .gallery-grid      { grid-template-columns: repeat(2, 1fr); }
  .gallery-full-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid     { grid-template-columns: 1fr; }

  /* Stats: 2×2 grid */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat + .stat::before { display: none; }
  .stat {
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  /* Section headings */
  .section-heading { margin-bottom: var(--space-2xl); }
  .section-testimonials::before { font-size: 10rem; }

  /* Contact form */
  .contact-form-card { padding: var(--space-xl); }
  .form-grid-2 { grid-template-columns: 1fr; }

  /* Footer */
  .site-footer__grid { grid-template-columns: 1fr 1fr; }

  /* Misc */
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ── 480px ── */
@media (max-width: 480px) {
  .services-grid     { grid-template-columns: 1fr; }
  .values-grid       { grid-template-columns: 1fr; }
  .gallery-grid      { grid-template-columns: repeat(2, 1fr); }
  .gallery-full-grid { grid-template-columns: 1fr; }

  /* Value cards: icon + title on one row, description full-width below */
  .value-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "text text";
    align-items: center;
    column-gap: var(--space-md);
    row-gap: var(--space-sm);
    padding: var(--space-xl);
  }
  .value-card__icon  { grid-area: icon;  margin-bottom: 0; }
  .value-card__title { grid-area: title; margin-bottom: 0; }
  .value-card__text  { grid-area: text; }

  /* Stats: stay 2×2 but smaller */
  .stats-grid    { grid-template-columns: repeat(2, 1fr); }
  .stat__num     { font-size: var(--text-2xl); }

  /* Hero actions: stack */
  .hero__title   { letter-spacing: -0.02em; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; width: 100%; }

  /* CTA */
  .cta-box__actions .btn { justify-content: center; width: 100%; }
  .cta-box__actions { flex-direction: column; }

  /* Footer single col */
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* ── 360px ── */
@media (max-width: 360px) {
  :root {
    --container-padding: 1rem;
    --section-spacing: 2.5rem;
  }

  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* Hero stays exact viewport height — no override */
  .hero__badge { font-size: 0.6rem; }
  .hero__text  { font-size: var(--text-sm); }
}

/* ════════════════════════════════════════════
   LIGHTBOX — mobile sizing
════════════════════════════════════════════ */
@media (max-width: 768px) {
  .lightbox__stage {
    width: 100vw;
    height: 100vh;
    padding: 64px 12px;
  }
  .lightbox__nav {
    width: 42px; height: 42px;
  }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__close     { width: 42px; height: 42px; }
  .lightbox__counter   { font-size: .72rem; padding: 5px 11px; }
  .lightbox__caption   { display: none; } /* save room for the image */
}

/* On phones, prefer bottom-anchored gradient over the hero image so the
   text column (now centered) sits over the darkest area */
@media (max-width: 1024px) {
  .hero__slide.has-image .hero__overlay {
    background:
      linear-gradient(180deg, rgba(7,63,44,.55) 0%, rgba(7,63,44,.65) 50%, rgba(7,63,44,.85) 100%),
      radial-gradient(circle at 50% 100%, rgba(13,125,87,.35) 0%, transparent 65%);
  }
}