/* ============================================================
   VINES SUPPORT SERVICES — MOBILE RESPONSIVE
   Covers 480px (phone), 768px (tablet), 1024px (small laptop)
   This file is loaded last so it overrides everything above.
   ============================================================ */

/* ── GLOBAL RESETS FOR MOBILE ───────────────────────────────── */
@media (max-width: 1024px) {
  .container { padding-inline: 1.25rem; }
  .section { padding-block: 4rem; }
  .section--sm { padding-block: 2.5rem; }

  /* Hero */
  .hero { min-height: auto; padding-top: 72px; }
  .hero__inner { grid-template-columns: 1fr; gap: 2rem; padding-block: 3.5rem 2.5rem; }
  .hero__visual { display: none; }
  .hero__title { font-size: 2.4rem; }
  .hero__text { font-size: 1rem; }
  .hero__scroll { display: none; }

  /* About home */
  .about-home__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-home__photos { display: none; }

  /* Services home grid */
  .services-home-grid { grid-template-columns: 1fr 1fr; }
  .services-home .section-header { flex-direction: column; align-items: flex-start; }

  /* Stats */
  .stats-banner__inner { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

  /* Facilities / locations teaser */
  .facilities-home__grid { grid-template-columns: 1fr; }
  .facilities-home__side { flex-direction: row; gap: 1rem; }
  .facility-tile--main { height: 280px; }
  .facility-tile--sm { height: 180px; flex: 1; }

  /* Team */
  .team-grid { grid-template-columns: repeat(2, 1fr); }

  /* Support grid */
  .support-grid { grid-template-columns: 1fr 1fr; }
  .support-section .section-header { grid-template-columns: 1fr; gap: 1rem; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr 1fr; }

  /* Services page */
  .services-intro__grid { grid-template-columns: 1fr; gap: 2rem; }
  .services-intro__photo { display: none; }
  .service-detail__grid { grid-template-columns: 1fr; gap: 2rem; }
  .service-detail__photo { height: 260px; }
  .service-detail:nth-child(even) .service-detail__grid { direction: ltr; }

  /* About page */
  .about-story__grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-story__photos { display: none; }
  .about-mission__grid { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Locations */
  .house-block__grid { grid-template-columns: 1fr; gap: 2rem; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }

  /* Benefits */
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .roles-grid { grid-template-columns: 1fr; }

  /* Gallery */
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}

/* ── TABLET ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .section-title { font-size: 1.9rem; }

  /* Hero */
  .hero__title { font-size: 2rem; }
  .hero__actions { flex-direction: column; gap: 0.75rem; }
  .hero__actions .btn { text-align: center; justify-content: center; }

  /* Support */
  .support-grid { grid-template-columns: 1fr; }

  /* Services home */
  .services-home-grid { grid-template-columns: 1fr; }

  /* Stats */
  .stats-banner { padding-block: 2rem; }
  .stat-item__num { font-size: 2.2rem; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Team */
  .team-home .section-header { flex-direction: column; align-items: flex-start; }
  .team-grid { grid-template-columns: 1fr 1fr; }

  /* About mission values list */
  .values-list { gap: 1rem; }

  /* Locations teaser on home */
  .locations-teaser-grid { grid-template-columns: 1fr !important; }

  /* House block highlights */
  .house-block__highlights { gap: 0.65rem; }
  .house-enquire { flex-direction: column; align-items: flex-start; }

  /* Carousel */
  .carousel-photo { width: 240px; height: 170px; }

  /* Photo wall */
  .photo-wall-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .photo-wall-item--wide { grid-column: auto; }
  .photo-wall-item { height: 180px; }

  /* Form */
  .form-row { grid-template-columns: 1fr; }
  .form-panel { padding: 1.75rem; }
  .form-panel h3 { font-size: 1.35rem; }

  /* Page hero */
  .page-hero { padding-block: 5.5rem 2.5rem; }
  .page-hero__title { font-size: 2rem; }
  .page-hero__sub { font-size: 0.95rem; }

  /* CTA banner */
  .cta-banner__inner { flex-direction: column; text-align: center; }
  .cta-banner__actions { justify-content: center; width: 100%; }
  .cta-banner__text h2 { font-size: 1.6rem; }

  /* Trust bar */
  .trust-bar__inner { gap: 1rem 1.5rem; justify-content: flex-start; }
  .trust-item { font-size: 0.78rem; }

  /* Footer */
  .footer__main { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; text-align: center; gap: 0.5rem; }

  /* Benefits grid */
  .benefits-grid { grid-template-columns: 1fr; }

  /* Gallery */
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item { height: 160px; }

  /* Team member cards */
  .team-full-grid { grid-template-columns: 1fr 1fr; }

  /* Team member bio layout */
  .team-member { grid-template-columns: 160px 1fr; gap: 1.5rem; padding: 1.5rem; }

  /* PACE cards */
  .pace-cards { grid-template-columns: 1fr; }
}

/* ── MOBILE PHONE ───────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --space-2xl: 4rem;
    --space-xl: 2.5rem;
  }

  .container { padding-inline: 1rem; }
  .section { padding-block: 3rem; }
  .section-title { font-size: 1.7rem; }
  .section-subtitle { font-size: 0.95rem; }

  /* Nav */
  .nav { height: 64px; }
  .nav__logo img { height: 40px !important; }
  .nav__links.open { top: 64px; }
  .nav__cta { padding: 0.5rem 1rem !important; font-size: 0.82rem !important; }

  /* Hero */
  .hero { margin-top: 64px; }
  .hero__inner { padding-block: 2.5rem 2rem; }
  .hero__title { font-size: 1.75rem; line-height: 1.2; }
  .hero__badge { font-size: 0.7rem; }
  .hero__text { font-size: 0.95rem; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; padding: 0.85rem; }

  /* Trust bar */
  .trust-bar__inner { flex-direction: column; align-items: flex-start; gap: 0.65rem; }

  /* Support cards */
  .support-card__photo { height: 160px; }

  /* Stats */
  .stats-banner__inner { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .stat-item__num { font-size: 1.9rem; }

  /* Services snapshot */
  .service-card__photo { height: 170px; }

  /* About home */
  .pace-cards { grid-template-columns: 1fr; }

  /* Locations teaser */
  .locations-teaser-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }

  /* Team teaser */
  .team-teaser-cards { grid-template-columns: 1fr !important; }

  /* Testimonials */
  .testimonial-card { padding: 1.5rem 1.25rem; }

  /* CTA */
  .btn { padding: 0.75rem 1.25rem; font-size: 0.9rem; }
  .cta-banner { padding-block: 2.5rem; }
  .cta-banner__text h2 { font-size: 1.4rem; }
  .cta-banner__actions { flex-direction: column; width: 100%; }
  .cta-banner__actions .btn { width: 100%; justify-content: center; }

  /* Page hero */
  .page-hero { padding-block: 5rem 2rem; margin-top: 64px; }
  .page-hero__title { font-size: 1.7rem; }
  .page-hero__breadcrumb { font-size: 0.75rem; }

  /* Locations page */
  .house-block__title { font-size: 1.9rem; }
  .house-block__meta { gap: 0.5rem; }
  .house-tag { font-size: 0.72rem; }
  .carousel-photo { width: 200px; height: 145px; }
  .carousel-section::before,
  .carousel-section::after { width: 30px; }

  /* Contact form */
  .form-panel { padding: 1.5rem 1.25rem; border-radius: var(--radius-lg); }
  .contact-info-card { padding: 1.1rem 1.25rem; }

  /* Work with us */
  .role-card { flex-direction: column; gap: 0.75rem; }
  .role-card__icon { width: 40px; height: 40px; }

  /* Footer */
  .footer__main { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer__bottom { font-size: 0.75rem; }

  /* About page team member */
  .team-member { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem; }
  .team-member__photo-wrap { flex-direction: row; align-items: center; gap: 1rem; text-align: left; }
  .team-member__avatar-placeholder { width: 90px; height: 90px; aspect-ratio: 1; margin-bottom: 0; flex-shrink: 0; border-radius: 50%; }
  .team-member__avatar-placeholder span { font-size: 1.8rem; }
  .team-member__name { font-size: 0.95rem; }
  .team-member__bio h3 { font-size: 1.15rem; }
  .team-member__bio p { font-size: 0.92rem; }

  /* Team full grid */
  .team-full-grid { grid-template-columns: 1fr; }
  .team-full-card__photo { height: 220px; }

  /* Gallery */
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item { height: 200px; }

  /* Map */
  .map-embed { height: 280px; }

  /* Services detail */
  .service-detail { padding-block: 2.5rem; }
  .service-detail__photo { height: 220px; }

  /* About story */
  .about-story__text p { font-size: 0.95rem; }

  /* Photo wall */
  .photo-wall-grid { grid-template-columns: 1fr; }
  .photo-wall-item { height: 200px; }
  .photo-wall-item--wide { grid-column: auto; }

  /* Mission values */
  .value-item { gap: 0.75rem; }
  .value-num { width: 30px; height: 30px; font-size: 0.85rem; flex-shrink: 0; }
  .value-item h4 { font-size: 0.95rem; }
  .value-item p { font-size: 0.85rem; }

  /* Highlight items on locations */
  .highlight-item { padding: 0.85rem 1rem; }
  .highlight-item__icon { width: 32px; height: 32px; }
  .highlight-item__val { font-size: 0.88rem; }

  /* House enquire block */
  .house-enquire { padding: 1.25rem; }
  .house-enquire .btn { width: 100%; justify-content: center; }
}

/* ── VERY SMALL PHONES (360px) ──────────────────────────────── */
@media (max-width: 360px) {
  .hero__title { font-size: 1.55rem; }
  .section-title { font-size: 1.5rem; }
  .nav__cta { display: none; }
  .stats-banner__inner { grid-template-columns: 1fr; }
  .pace-cards { grid-template-columns: 1fr; }
}

/* ── TOUCH DEVICE IMPROVEMENTS ──────────────────────────────── */
@media (hover: none) {
  /* Remove hover transforms on touch — prevents sticky states */
  .support-card:hover,
  .service-card:hover,
  .facility-tile:hover,
  .team-card:hover,
  .team-full-card:hover,
  .benefit-card:hover,
  .role-card:hover,
  .testimonial-card:hover,
  .team-member:hover { transform: none; box-shadow: var(--shadow-sm); }

  /* Make tap targets large enough */
  .nav__link { padding: 0.75rem 1rem; }
  .btn { min-height: 48px; }
  .footer__col a { padding-block: 0.35rem; display: inline-block; }
}

/* ── PRINT ──────────────────────────────────────────────────── */
@media print {
  .nav, .cta-banner, .hero__scroll, .carousel-section { display: none; }
  .hero { min-height: auto; margin-top: 0; }
  body { font-size: 12pt; }
}