/* ============================================================
   Opto Alignment — page layout utilities.
   Ported verbatim from the SPA's index.html <style> block:
   the same class names, grids, and breakpoints.
   ============================================================ */

html, body { margin: 0; background: var(--surface-page); }

/* The SPA removed hidden elements from the DOM; the PHP port toggles the
   `hidden` attribute instead — make it always win over display rules. */
[hidden] { display: none !important; }
#oa-app { min-height: 100vh; display: flex; flex-direction: column; }
#oa-app > main { flex: 1; }

/* ---- Layout utilities (structure only; all color/type from tokens) ---- */
.oa-wrap { max-width: var(--container-max); margin: 0 auto; }
.oa-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; }
.oa-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.oa-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.oa-cards2 { display: grid; grid-template-columns: 1fr 1fr; }
.oa-cols-2 { display: grid; grid-template-columns: 1fr 1fr; }
.oa-split { display: grid; grid-template-columns: 1fr 1fr; }
.oa-split-tech { display: grid; grid-template-columns: 0.9fr 1.1fr; }
.oa-contact { display: grid; grid-template-columns: 1fr 1.1fr; }
.oa-cta { display: grid; grid-template-columns: 1.4fr 1fr; }
.oa-shop { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
.oa-cta-actions { justify-content: flex-end; }
.oa-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.oa-nav-desktop { display: flex; }
.oa-nav-toggle { display: none; }
.oa-nav-mobile[hidden] { display: none; }

/* Let grid/flex children shrink instead of forcing horizontal overflow. */
.oa-hero > *, .oa-split > *, .oa-split-tech > *, .oa-contact > *, .oa-cta > *,
.oa-cards3 > *, .oa-cards2 > *, .oa-cols-2 > *, .oa-stats > * { min-width: 0; }

/* Hero slide transition (quick, mechanical — no bounce). */
.oa-fade-in { animation: oaFade 300ms cubic-bezier(0.2, 0, 0.2, 1) both; }
@keyframes oaFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Hero slide stacking: all slides share one grid cell so the column always
   reserves the tallest slide's height — buttons below never shift. */
.oa-hero-slides { display: grid; }
.oa-hero-slides > * { grid-area: 1 / 1; visibility: hidden; }
.oa-hero-slides > .is-active { visibility: visible; }
.oa-stat-groups > * { display: none; }
.oa-stat-groups > .is-active { display: grid; }

/* Video slot (self-upgrading placeholder → autoplaying loop) */
.oa-videoslot {
  border-radius: var(--radius-lg); position: relative; overflow: hidden;
  background: var(--blue-900); border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;
}
.oa-videoslot__mark { height: 46%; max-height: 150px; opacity: 0.14; filter: brightness(3); }
.oa-videoslot video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 240ms cubic-bezier(0.2, 0, 0.2, 1); z-index: 1;
}
.oa-videoslot video.is-ready { opacity: 1; }
.oa-videoslot__label {
  position: absolute; bottom: 12px; left: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--blue-200);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

@media (max-width: 960px) {
  .oa-cards3 { grid-template-columns: repeat(2, 1fr); }
  .oa-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .oa-nav-desktop { display: none; }
  .oa-nav-toggle { display: inline-flex; }
  .oa-hero, .oa-split, .oa-split-tech, .oa-contact, .oa-cta, .oa-shop { grid-template-columns: 1fr; }
  .oa-cta-actions { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .oa-cards3, .oa-cards2, .oa-cols-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .oa-stats { grid-template-columns: repeat(2, 1fr); }
  .oa-footer-grid { grid-template-columns: 1fr; }
  .oa-util-tagline { display: none; } /* hide marketing tagline on small phones */
}

/* Let overflowing tab strips scroll horizontally instead of clipping on mobile. */
.oa-tabs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.oa-tabs-scroll::-webkit-scrollbar { display: none; }
.oa-tabs-scroll > * { min-width: max-content; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}