/* =========================================================
   Can Toprak | Private Coach — Responsive overrides
   Loaded after style.css. Mobile-first breakpoint tweaks.
   ========================================================= */

/* ---------- Large desktop refinement ---------- */
@media (max-width: 1180px) {
  .packages-grid {
    gap: var(--space-4);
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .container {
    padding-inline: var(--space-4);
  }

  .hero {
    min-height: unset;
    align-items: flex-start;
  }

  .hero-frame {
    height: auto;
    min-height: unset;
    align-items: flex-end;
  }

  .hero-frame__overlay {
    background:
      linear-gradient(to top, rgba(6, 5, 5, 0.95) 0%, rgba(6, 5, 5, 0.65) 55%, rgba(6, 5, 5, 0.5) 100%);
  }

  .hero-content {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    align-items: center;
    text-align: center;
    padding: var(--space-7) var(--space-5) var(--space-6);
  }

  .hero-badge {
    align-self: center;
  }

  .hero-trust,
  .hero-actions {
    justify-content: center;
  }

  .packages-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .package-card--recommended {
    grid-column: span 2;
    transform: translateY(0) scale(1);
  }

  .package-card--recommended:hover {
    transform: translateY(-6px) scale(1);
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .intake-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .philosophy-media {
    min-height: 320px;
  }

  .expectation-block {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Mobile: photo on top, content below (not an overlay bg) ---------- */
@media (max-width: 767px) {
  .hero-frame {
    display: block;
  }

  .hero-frame__photo {
    position: static;
    width: 100%;
    height: 260px;
  }

  .hero-frame__overlay {
    display: none;
  }

  .hero-content {
    position: static;
    background: var(--bg-elevated);
  }
}

/* ---------- Mobile nav breakpoint ---------- */
@media (max-width: 860px) {
  .site-nav__links {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .container {
    padding-inline: var(--space-3);
  }

  .section {
    padding-block: var(--space-6);
  }

  .site-header {
    padding-top: var(--space-3);
  }

  .site-header__bar {
    padding: 0.7rem var(--space-3);
    border-radius: var(--radius-lg);
  }

  .hero {
    padding-top: 72px;
  }

  .hero-frame {
    border-radius: var(--radius-lg);
  }

  .hero-content {
    gap: 0.5rem;
    padding: var(--space-6) var(--space-4) var(--space-5);
  }

  .hero-title {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .section-title {
    font-size: 1.7rem;
  }

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

  .package-card--recommended {
    grid-column: span 1;
  }

  .scope-list {
    grid-template-columns: 1fr;
  }

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

  .intake-card {
    padding: var(--space-5) var(--space-4);
  }

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

  .philosophy-content {
    padding: var(--space-5);
  }

  .philosophy-content::before {
    font-size: 9rem;
    top: -2rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .closing-card {
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-lg);
  }

  .fab-stack {
    right: var(--space-3);
    bottom: var(--space-3);
  }

  .fab {
    width: 50px;
    height: 50px;
  }

  .fab svg {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 400px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-badge {
    font-size: 0.65rem;
  }
}