/* =====================================================================
   SUNTAIL SOLAR — RESPONSIVE OVERRIDES
   Desktop-first. Breakpoints: 1279 / 1199 / 991 / 767 / 479 / 389.
   ===================================================================== */

@media (min-width: 1600px) {
  :root { --container: 1320px; }
}

/* Tight desktop: compress the nav before switching to the drawer */
@media (max-width: 1439px) {
  .header-inner { gap: .9rem; }
  .brand img { height: 56px; width: auto; }
  .nav-link { padding: .5rem .45rem; font-size: .9rem; }
  .nav-link .soon-tag { display: none; }
  .header-actions { gap: .45rem; }
  .header-actions .btn-sm { padding-inline: .85rem; font-size: .86rem; }
}

@media (max-width: 1279px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; }
  .f-brand { grid-column: 1 / -1; max-width: 560px; }
}

/* Tablet & below: drawer navigation */
@media (max-width: 1279px) {
  .primary-nav { display: none; }
  .menu-toggle { display: grid; margin-left: 0; }
  .header-actions { margin-left: auto; }
  .timeline { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
  .timeline::before { display: none; }
  .chip-a { left: -12px; }
  .chip-b { right: -8px; }
}

@media (max-width: 991px) {
  :root { --header-h: 68px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 640px; }
  .highlight-grid { grid-template-columns: repeat(2, 1fr); }
  .highlight + .highlight { border-left: 0; }
  .highlight:nth-child(even) { border-left: 1px solid var(--line); }
  .highlight:nth-child(n+3) { border-top: 1px solid var(--line); }
  .about-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 520px; }
  .about-badge { right: 1rem; }
  .service-grid, .project-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid, .faq-grid { grid-template-columns: 1fr; }
  .why-head, .faq-head { position: static; }
  .calc-card { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
  .city-grid { grid-template-columns: 1fr 1fr; }
  .city-card:not(.city-primary) { grid-template-columns: 1fr; }
  .city-card:not(.city-primary) .city-media { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  :root { --gutter: 1rem; --topbar-h: 0px; }
  .topbar { display: none; }
  .header-actions .btn-outline { display: none; }
  .brand img { height: 50px; width: auto; }
  .hero { padding-top: 2.5rem; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .hero-chip { position: static; max-width: none; margin-top: .75rem; animation: none; }
  .hero-visual { display: flex; flex-direction: column; }
  .highlights { margin-top: -2rem; }
  .highlight-grid { grid-template-columns: 1fr; }
  .highlight:nth-child(even) { border-left: 0; }
  .highlight + .highlight { border-top: 1px solid var(--line); }
  .highlight { padding: 1.15rem 1.2rem; }
  .about-badge { position: static; max-width: none; margin-top: -1.5rem; margin-inline: 1rem; position: relative; }
  .service-grid, .project-grid, .blog-grid, .city-grid { grid-template-columns: 1fr; }
  .why-list { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 2rem; }
  .section-head-split { align-items: flex-start; }
  .filter-bar { width: 100%; }
  .filter-btn { flex: 1 1 auto; }
  .timeline { grid-template-columns: 1fr; row-gap: 0; }
  .tl-step { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; text-align: left; padding-bottom: 1.5rem; }
  .tl-step:not(:last-child)::before { content: ''; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--line-strong) 0 8px, transparent 8px 14px); }
  .tl-num { margin: 0; }
  .result-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .office-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  /* Mobile: full-width split action bar; page gets bottom padding so the bar never covers content */
  body { padding-bottom: 60px; }
  .float-actions { left: 0; right: 0; bottom: 0; flex-direction: row; gap: 0; box-shadow: 0 -8px 20px -10px rgba(8, 23, 38, .35); }
  .float-pill { flex: 1 1 50%; min-height: 60px; border-radius: 0; padding: .6rem .5rem; font-size: .98rem; box-shadow: none; }
  .float-pill:hover { transform: none; }
  .footer-bottom { padding-bottom: 4.75rem; }
  .f-sep-last { display: none; }
  .f-credit-part { display: block; }
  .back-to-top { left: 1rem; bottom: 76px; width: 54px; height: 54px; }
  .rail-btn { width: 44px; height: 46px; }
  .rail-btn .icon { width: 20px; height: 20px; }
  .social-rail { top: 52%; }
  .modal { padding: .5rem; align-items: end; }
  .modal-dialog { max-height: calc(100dvh - 1rem); border-radius: var(--radius-lg) var(--radius-lg) var(--radius) var(--radius); }
  .modal-head { padding: 1.1rem 1.1rem .9rem; }
  .modal-body { padding: 1rem 1.1rem 1.25rem; }
  .sc-actions { flex-wrap: wrap; }
}

@media (max-width: 479px) {
  .header-actions .btn-primary { padding-inline: .8rem; font-size: .84rem; }
  .result-grid { grid-template-columns: 1fr; }
  .btn-row .btn { flex: 1 1 100%; }
  .city-actions .btn { width: 100%; }
}

@media (max-width: 389px) {
  .brand img { height: 44px; width: auto; }
  .header-inner { gap: .6rem; }
  .header-actions .btn-primary { font-size: .8rem; padding-inline: .65rem; }
}

/* Professional theme — mobile floating bar */
@media (max-width: 767px) {
  .float-pill { border-radius: 0; box-shadow: none; }
  .float-chat { border: 0; border-top: 1px solid var(--line-strong); }
  .back-to-top { border-radius: 10px; }
  .section-head { margin-bottom: 2rem; }
}