/* =============================================================
   CCHCL Website — Responsive Styles
   ============================================================= */

/* ── Tablet (≤1200px) ── */
@media (max-width: 1200px) {
  /* Navigation */
  .nav-links,
  .utility-bar { display: none; }
  .nav-actions {
    display: flex;
    margin-left: auto;
    padding-left: 0;
    border-left: 0;
    gap: 8px;
  }
  .nav-contact {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px;
    font-size: 15px;
  }
  .nav-contact::after {
    left: 8px;
    right: 8px;
  }
  .nav-cta__btn {
    min-height: 40px;
    padding: 9px 14px !important;
    font-size: 15px !important;
  }
  .nav-hamburger { display: flex; }
  .main-nav { height: 64px; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .two-col { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-featured { grid-template-columns: 1fr; }
  .project-overview { grid-template-columns: 1fr; }
  .team-feature { grid-template-columns: 1fr; }
  .team-feature__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-grid--modern,
  .team-grid--hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-section__header { grid-template-columns: 1fr; gap: var(--space-md); }
  .team-section__header p { justify-self: start; }
  .team-card--featured { grid-column: span 1; grid-template-columns: 1fr; text-align: center; }
  .team-card--featured .team-card__avatar { margin: 0 auto; }
  .cause-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-strip__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .model-steps { grid-template-columns: 1fr 1fr; }
  .flagship-grid { grid-template-columns: 1fr; }
  .pathways-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subsidiary-hub { grid-template-columns: 1fr; }
  .subsidiary-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .placeholder-grid { grid-template-columns: 1fr 1fr; }
  .content-placeholder--wide { grid-column: 1 / -1; }
  .mini-subs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timeline--homepage {
    max-width: 760px;
    padding-left: var(--space-2xl);
    padding-top: 0;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .timeline--homepage::before {
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    background: var(--color-border);
  }
  .timeline--homepage .timeline__item {
    padding-top: 0;
    padding-bottom: var(--space-xl);
  }
  .timeline--homepage .timeline__item::before {
    left: calc(-1 * var(--space-2xl) + 10px);
    top: 6px;
  }
  .timeline--homepage .timeline__item::after {
    display: none;
  }
  .timeline--homepage .timeline__year {
    padding-top: 0;
    font-size: 18px;
  }
  .timeline--homepage .timeline__text { max-width: none; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sub-overview,
  .sub-overview--reverse,
  .bookshop-ledger,
  .nabugabo-conservation {
    grid-template-columns: 1fr;
  }
  .sub-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .publishing-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guesthouse-amenities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guesthouse-journey { grid-template-columns: 1fr; }
  .sub-panel { grid-template-columns: 1fr; }
  .churchhouse-timeline__item { grid-template-columns: 1fr; }
  .donate-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .donate-form-shell { grid-template-columns: 1fr; }
}

/* ── Small Tablet (≤768px) ── */
@media (max-width: 768px) {
  .section { padding: var(--space-3xl) 0; }
  .grid-2,
  .grid-3 { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }

  /* Hero */
  .hero { height: 70vh; min-height: 400px; }
  .hero__subtitle { font-size: 16px; }
  .hero-fact-panel { position: static; margin: 16px auto 0; width: 100%; max-width: 520px; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer__bottom { flex-direction: column; gap: var(--space-md); text-align: center; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .amount-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-strip__grid { grid-template-columns: 1fr 1fr; }
  .model-steps { grid-template-columns: 1fr; }
  .mission-band__grid { grid-template-columns: 1fr; }
  .subsidiary-switch { grid-template-columns: 1fr; }
  .subsidiary-panel { grid-template-columns: 1fr; }
  .subsidiary-panel__img { min-height: 260px; }
  .subsidiary-panel__meta p { max-width: none; }
  .placeholder-grid { grid-template-columns: 1fr; }
  .content-placeholder--wide { min-height: 250px; }
  .mini-subs-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .sub-page .page-hero { min-height: clamp(360px, 60vh, 480px); }
  .team-feature__card { grid-template-columns: 1fr; }
  .team-feature__image { min-height: 320px; }
  .team-feature__body { padding: var(--space-xl); }
  .team-feature__panel { grid-template-columns: 1fr; }
  .story-gceo-portrait {
    width: 150px;
    height: 150px;
  }
  .sub-hero__chips span { font-size: 15px; }
  .sub-switcher { gap: 8px; }
  .sub-switcher__btn { flex: 1 1 calc(50% - 8px); text-align: center; }
  .sub-panel { padding: 20px; }
  .sub-card-grid { grid-template-columns: 1fr; }
  .sub-location-fallback {
    align-items: start;
    min-height: 280px;
  }
  .guesthouse-amenities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .publishing-process { grid-template-columns: 1fr; }
  .churchhouse-timeline__item { gap: 8px; }
  .home-hero-carousel .hero__title { font-size: clamp(42px, 10vw, 64px); }
  .home-hero-carousel .hero__subtitle { font-size: clamp(17px, 4vw, 22px); }
  .hero__controls { right: 16px; bottom: 16px; }
  .hero__dots { left: 16px; bottom: 22px; }
  .donate-impact-grid { grid-template-columns: 1fr; }
}

/* ── Mobile (≤480px) ── */
@media (max-width: 480px) {
  .container { padding: 0 var(--space-md); }
  .hero__buttons { flex-direction: column; }
  .hero__buttons .btn { width: 100%; }
  .cta-banner__buttons { flex-direction: column; align-items: center; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .grid-5 { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .team-grid--modern,
  .team-grid--hub { grid-template-columns: 1fr; }
  .team-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .team-card__avatar { margin: 0 auto; }
  .team-feature__image { min-height: 280px; }
  .cause-grid { grid-template-columns: 1fr; }
  .amount-grid { grid-template-columns: 1fr 1fr; }
  .portfolio-strip__grid { grid-template-columns: 1fr; }
  .pathways-grid { grid-template-columns: 1fr; }
  .portfolio-kpi__value { font-size: 26px; }
  .subsidiary-panel__meta { padding: 22px 18px; }
  .subsidiary-panel__meta h3 { font-size: 30px; }
  .mission-band__grid article { padding: 14px; }
  .mini-subs-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .sub-page .page-hero { padding: calc(var(--space-3xl) + 28px) 0 var(--space-xl); }
  .sub-hero__eyebrow { font-size: 15px; }
  .sub-switcher__btn {
    flex: 1 1 100%;
    text-align: left;
  }
  .sub-kpi-grid { grid-template-columns: 1fr; }
  .sub-panel { padding: 16px; }
  .sub-panel__body h3 { font-size: 32px; }
  .sub-location-fallback {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: auto;
    padding: 22px;
  }
  .sub-location-fallback > i {
    width: 56px;
    height: 56px;
    font-size: 30px;
  }
  .sub-location-fallback h3 {
    font-size: 22px;
  }
  .sub-location-fallback .btn {
    width: 100%;
  }
  .guesthouse-amenities { grid-template-columns: 1fr; }
  .main-nav .container { gap: 8px; }
  .nav-actions { gap: 6px; }
  .nav-logo__mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .nav-contact {
    min-height: 38px;
    padding: 7px 6px;
  }
  .nav-contact::after {
    left: 6px;
    right: 6px;
  }
  .nav-cta__btn {
    min-height: 38px;
    padding: 8px 10px !important;
  }
  .hero__controls {
    right: 12px;
    bottom: 12px;
    gap: 8px;
  }
  .hero__arrow {
    width: 42px;
    height: 42px;
  }
  .hero__dots {
    left: 12px;
    bottom: 16px;
  }
  .hero__dot {
    width: 28px;
  }
  .hero__dot.active {
    width: 40px;
  }
}