/* Lumique — shared responsive rules.
   Everything layout-specific stays inline per component; this file only holds
   breakpoint behavior that inline styles structurally cannot express
   (media queries) — column collapse, padding scale-down, and the mobile nav. */

.lq-container {
  padding-left: 64px;
  padding-right: 64px;
}

.lq-grid-2 {           /* asymmetric 2-col, e.g. hero */
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
}

.lq-grid-2-even {       /* even 2-col, e.g. contact, teaser */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.lq-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.lq-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.lq-person-grid {
  display: grid;
  grid-template-columns: auto 1fr 1.4fr;
  gap: 32px;
  align-items: center;
}

.lq-bullet-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 10px;
}

.lq-nav-links {
  display: flex;
}

.lq-nav-toggle {
  display: none;
}

.lq-nav-mobile-panel {
  display: none;
}

@media (max-width: 980px) {
  .lq-container { padding-left: 32px; padding-right: 32px; }
  .lq-grid-2, .lq-grid-2-even { grid-template-columns: 1fr; gap: 36px; }
  .lq-grid-3, .lq-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .lq-person-grid { grid-template-columns: auto 1fr; }
  .lq-person-grid > *:last-child { grid-column: 1 / -1; }
  .lq-service-row { grid-template-columns: 1fr !important; gap: 12px !important; }
  .lq-bullet-grid-2 { grid-template-columns: 1fr !important; }

  .lq-nav-links { display: none; }
  .lq-nav-toggle { display: flex; }
  .lq-nav-cta { display: none; }
  .lq-nav-mobile-panel.is-open { display: flex; }
}

@media (max-width: 620px) {
  .lq-container { padding-left: 20px; padding-right: 20px; }
  .lq-grid-3, .lq-grid-4 { grid-template-columns: 1fr; }
}