/* ============================================================
   Tamarack Medical Clinic — Responsive / Mobile Layout
   Breakpoints: tablet ≤ 900px, mobile ≤ 600px
   ============================================================ */

/* --- Utility: make inline grids stack on mobile --- */

/* All 3-col grids → 1-col on mobile */
@media (max-width: 600px) {
  /* Services cards, fact strip, audiences, areas of care, contact cards, footer cols */
  [style*="repeat(3, 1fr)"],
  [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* 2-col grids → 1-col on mobile */
  [style*="repeat(2, 1fr)"],
  [style*="repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* 4-col grids (areas of care) → 1-col on mobile */
  [style*="repeat(4, 1fr)"],
  [style*="repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* 7-col hours grid → 2-col on mobile */
  [style*="repeat(7, 1fr)"],
  [style*="repeat(7,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Two-column asymmetric splits (About story, PCN, Contact form, Specialties doctor) */
  [style*="1fr 1fr"],
  [style*="1fr 1.2fr"],
  [style*="360px 1fr"],
  [style*="320px 1fr"] {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
  }

  /* Nav: hide desktop nav links, show stacked logo only */
  header nav {
    display: none !important;
  }

  /* Tile headlines & taglines — reduce font size */
  h1, h2 {
    font-size: clamp(24px, 6vw, 40px) !important;
  }

  /* Buttons: full-width stacking */
  [style*="display: \"flex\""][style*="gap"] > a,
  [style*="display: \"flex\""][style*="gap"] > button {
    width: 100%;
  }

  /* General padding reduction */
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* --- Tablet: 2-col for 3-col grids --- */
@media (min-width: 601px) and (max-width: 900px) {
  [style*="repeat(3, 1fr)"],
  [style*="repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  [style*="repeat(4, 1fr)"],
  [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  [style*="repeat(7, 1fr)"],
  [style*="repeat(7,1fr)"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  [style*="360px 1fr"],
  [style*="320px 1fr"],
  [style*="1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
  }

  section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* --- Mobile hamburger menu --- */
.tmc-mobile-nav {
  display: none;
}

@media (max-width: 600px) {
  .tmc-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 64px;
    background: var(--color-canvas);
    border-bottom: 1px solid var(--color-hairline);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .tmc-mobile-nav-menu {
    display: flex;
    flex-direction: column;
    background: var(--color-canvas);
    border-bottom: 1px solid var(--color-hairline);
    padding: 8px 0 16px;
    position: sticky;
    top: 64px;
    z-index: 99;
  }

  .tmc-mobile-nav-menu a {
    padding: 12px 20px;
    font-family: var(--font-text);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--color-hairline);
  }

  .tmc-mobile-nav-menu a:last-child {
    border-bottom: none;
  }
}

/* Show hamburger button on mobile, hide on desktop */
@media (max-width: 600px) {
  .tmc-hamburger {
    display: flex !important;
  }
  header nav {
    display: none !important;
  }
}

/* Header "Book your appointment now" — desktop only. Mobile and tablet get
   it via the hamburger menu instead, where there's room for the full label. */
@media (max-width: 900px) {
  .tmc-header-book {
    display: none !important;
  }
}

@media (min-width: 601px) {
  .tmc-hamburger {
    display: none !important;
  }
  .tmc-mobile-nav-menu {
    display: none !important;
  }
}