/* ============================================================
   ITM NEST – Senior Care Centre
   Responsive Stylesheet
   Breakpoints: 1440px | 1024px | 768px | 480px | 320px
   ============================================================ */

/* ============================================================
   LARGE DESKTOP (≥ 1440px)
   ============================================================ */
@media (min-width: 1440px) {
  .container {
    padding: 0 60px;
  }

  .home-hero .container {
    grid-template-columns: 1fr 460px;
    gap: 80px;
  }
}

/* ============================================================
   LAPTOP (1024px – 1439px)
   ============================================================ */
@media (max-width: 1280px) {
  :root {
    --section-py: 80px;
  }

  .container { padding: 0 32px; }

  .nav-list li a {
    padding: 8px 9px;
    font-size: 0.83rem;
  }

  .home-hero .container {
    grid-template-columns: 1fr 380px;
    gap: 48px;
  }

  .hero-card { padding: 28px; }

  .trust-strip-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }

  .trust-item { padding: 16px 10px; }

  .split-section { gap: 56px; }
  .split-image-wrap img { height: 440px; }

  .care-grid { gap: 20px; }

  .message-section {
    grid-template-columns: 320px 1fr;
    gap: 48px;
  }

  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 32px;
  }
}

/* ============================================================
   TABLET (768px – 1023px)
   ============================================================ */
@media (max-width: 1023px) {
  :root {
    --section-py: 70px;
    --section-py-sm: 50px;
  }

  html { font-size: 16px; }

  .container { padding: 0 28px; }

  /* Header */
  .header-inner { padding: 0 28px; }
  .site-nav { display: none; }
  .hamburger { display: flex; }
  .mobile-nav { display: block; }
  .header-cta .btn { display: none; }
  .header-phone { display: none; }
  .mobile-sticky-bar { display: flex; }
  .float-cta { display: none; }

  /* Hero */
  .home-hero {
    min-height: 80vh;
    padding: 90px 0 60px;
  }

  .home-hero .container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-card {
    max-width: 500px;
  }

  .hero-title { font-size: 2.6rem; }

  /* Trust strip */
  .trust-strip-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .trust-strip-grid .trust-item:nth-child(4),
  .trust-strip-grid .trust-item:nth-child(5) {
    /* Show all 5 items in row of 3+2 on tablet */
  }

  /* Sections */
  .split-section {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .split-section.reverse { direction: ltr; }

  .split-image-wrap img {
    height: 360px;
  }

  /* Grids */
  .care-grid { grid-template-columns: repeat(2, 1fr); }
  .care-circle-wrap { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Facilities */
  .facilities-grid {
    grid-template-columns: 1fr;
  }

  .facilities-main-img img { height: 360px; }
  .facilities-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* Gallery */
  .life-gallery {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
  }

  .life-gallery .gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 1;
    height: 260px;
  }

  .life-gallery .gallery-item {
    height: 200px;
  }

  /* Message section */
  .message-section {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .message-photo {
    position: static;
    max-width: 300px;
  }

  .message-photo img {
    height: 360px;
  }

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

  .team-head-card {
    grid-template-columns: 1fr;
  }

  .team-head-img {
    height: 320px;
    width: 100%;
  }

  .team-head-content {
    padding: 36px;
  }

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

  .contact-info-card {
    position: static;
  }

  /* Journey */
  .journey-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .journey-steps::before { display: none; }

  /* Approach */
  .approach-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  /* Form */
  .form-row { grid-template-columns: 1fr; }

  /* Ecosystem */
  .ecosystem-section-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .ecosystem-flow {
    flex-direction: row;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ecosystem-arrow {
    width: 28px;
    height: 2px;
  }

  .ecosystem-arrow::after {
    top: -4px;
    right: -6px;
    left: auto;
    bottom: auto;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid var(--border-light);
    border-right: none;
  }

  /* Vision/Mission */
  .vision-mission-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  /* Service list */
  .service-list { grid-template-columns: 1fr; }

  /* Masonry */
  .masonry-gallery { columns: 2; }
}

/* ============================================================
   MOBILE (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --section-py: 56px;
    --section-py-sm: 40px;
  }

  html { font-size: 15px; }

  .container { padding: 0 20px; }

  /* Header */
  .header-inner {
    height: 68px;
    padding: 0 20px;
  }

  .site-logo img { height: 44px; }

  .logo-text .logo-name { font-size: 1.05rem; }
  .logo-text .logo-tagline { font-size: 0.55rem; }

  /* Mobile nav position */
  .mobile-nav { top: 68px; }

  /* Hero */
  .home-hero {
    min-height: 100svh;
    padding: 80px 0 100px;
  }

  .home-hero .container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-title { font-size: 2rem; line-height: 1.25; }
  .hero-lead { font-size: 1rem; }
  .hero-card { display: none; } /* Hide side card on mobile */

  .btn-group {
    gap: 12px;
  }

  .btn-group .btn {
    flex: 1;
    justify-content: center;
    min-width: 140px;
  }

  /* Page hero */
  .page-hero {
    padding: 100px 0 60px;
    min-height: 380px;
  }

  /* Trust strip */
  .trust-strip { padding: 32px 0; }
  .trust-strip-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .trust-strip-grid .trust-item:last-child {
    grid-column: 1 / -1;
  }

  /* Sections */
  .section-header { margin-bottom: 40px; }

  .split-section { gap: 32px; }
  .split-image-wrap img { height: 260px; }
  .split-image-badge { display: none; }

  /* Grids */
  .care-grid { grid-template-columns: 1fr; gap: 16px; }
  .care-circle-wrap { grid-template-columns: 1fr; gap: 16px; }
  .why-grid { grid-template-columns: 1fr; gap: 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* Facilities */
  .facilities-side { grid-template-columns: 1fr; }
  .facilities-main-img img { height: 260px; }

  /* Gallery */
  .life-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 10px;
  }

  .life-gallery .gallery-item {
    height: 160px;
    grid-column: auto;
    grid-row: auto;
  }

  .life-gallery .gallery-item:first-child {
    grid-column: 1 / -1;
    height: 220px;
  }

  /* Masonry */
  .masonry-gallery { columns: 1; }

  /* Message */
  .message-photo { max-width: 240px; }
  .message-photo img { height: 300px; }

  .message-content blockquote {
    font-size: 1.15rem;
  }

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

  .team-head-card {
    grid-template-columns: 1fr;
  }

  .team-head-img { height: 280px; }

  .team-head-content {
    padding: 28px 24px;
  }

  /* Contact */
  .contact-info-card { padding: 32px 24px; }

  /* Journey */
  .journey-steps {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Approach */
  .approach-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  /* FAQ */
  .faq-question { padding: 18px 20px; }
  .faq-answer-inner { padding: 0 20px 20px; }

  /* CTA section */
  .cta-section h2 { font-size: 1.8rem; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 40px;
  }

  .footer-brand-desc { max-width: 100%; }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .footer-bottom-links { gap: 16px; }

  /* Ecosystem */
  .ecosystem-flow {
    flex-direction: column;
    align-items: center;
  }

  .ecosystem-arrow {
    width: 2px;
    height: 24px;
  }

  .ecosystem-arrow::after {
    top: auto;
    right: auto;
    bottom: -6px;
    left: -4px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid var(--border-light);
    border-bottom: none;
  }

  /* Float CTA */
  .float-cta { display: none; }
  .mobile-sticky-bar { display: flex; }

  /* Timeline */
  .timeline { padding-left: 40px; }

  /* Vision/Mission */
  .vision-card { padding: 28px; }

  /* Service list */
  .service-list { grid-template-columns: 1fr; }

  /* Activity pills */
  .activity-list { padding-bottom: 8px; }
  .activity-pill { min-width: 100px; padding: 20px 14px; }

  /* Section padding adjustment for sticky bottom bar */
  main:last-child { padding-bottom: 80px; }
}

/* ============================================================
   SMALL MOBILE (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .hero-title { font-size: 1.8rem; }

  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.2rem; }

  .btn {
    padding: 13px 22px;
    font-size: 0.9rem;
  }

  .btn--lg {
    padding: 15px 28px;
    font-size: 0.95rem;
  }

  .approach-steps { grid-template-columns: 1fr; }

  .form-row { grid-template-columns: 1fr; }

  .trust-strip-grid {
    grid-template-columns: 1fr 1fr;
  }

  .trust-strip-grid .trust-item:last-child {
    grid-column: 1 / -1;
  }

  .mobile-nav-inner { padding: 24px 20px 120px; }
  .mobile-nav-list li a { font-size: 1.05rem; }

  /* Journey - 1 column */
  .journey-steps { grid-template-columns: 1fr; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .site-header,
  .site-footer,
  .float-cta,
  .mobile-sticky-bar,
  .hamburger,
  .mobile-nav {
    display: none !important;
  }

  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }

  .page-hero, .home-hero {
    min-height: auto;
    padding: 20pt 0;
    background: #f0f0f0 !important;
  }

  .page-hero::before, .hero-overlay { display: none; }

  .page-hero-content h1,
  .hero-content h1,
  .hero-title {
    color: #000 !important;
  }
}

/* ============================================================
   End of responsive.css
   ============================================================ */