/* =====================================================================
   main.css — Global Cell Phone & Laptop Repair Langley
   Responsive layer for the light Isometric-Workbench + glassmorphism design.

   EVERY rule here is authored TWICE — once as a standard @media query and once
   as a @container query — because the Visual Editor's device preview resizes by
   CONTAINER width, not window width, so media queries don't fire inside it
   (project rule §3). The two copies are kept byte-identical in their bodies.

   The named container is established on the site shell (`.aok-site`); if that
   element is missing the @container rules are simply inert and the @media copies
   still apply.
   ===================================================================== */

:root{
  --lc-primary:#C8102E;   --lc-primary-deep:#B00E28;
  --lc-cyan:#E0304A;      --lc-cyan-hi:#FF4D5E;      --lc-sky:#E85A6B;
  --lc-ink:#15171A;       --lc-slate:#3A3D42;        --lc-muted:#63676E;
  --lc-bg:#FAFAFA;        --lc-bg-alt:#F1F1F2;        --lc-line:rgba(200,16,46,.16);
  --lc-cta-grad:linear-gradient(135deg,#D7263D 0%,#B00E28 100%);
  --lc-hero-grad:linear-gradient(135deg,#15171A 0%,#2A2D33 60%,#C8102E 100%);
}

/* The site shell is the responsive container the Visual Editor measures. */
.aok-site{container-type:inline-size;container-name:site}

/* ---- image/overflow safety: never scroll sideways 320–1920px ---- */
img,svg,canvas,video,iframe{max-width:100%;height:auto}
.aok-wrap,.aok-svc-top,.aok-svc-wide{min-width:0}
*{min-width:0}

/* =====================================================================
   Desktop-down: ≤1140px  (full nav → burger)
   ===================================================================== */
@media (max-width:1140px){
  .aok-desknav{display:none!important}
  .aok-burger{display:inline-flex!important}
  .aok-mobnav.open{display:block!important}
}
@container site (max-width:1140px){
  .aok-desknav{display:none!important}
  .aok-burger{display:inline-flex!important}
  .aok-mobnav.open{display:block!important}
}

/* =====================================================================
   ≤1024px  (3- and 4-up grids → 2-up; service card matrix 4×2 → 2×4)
   ===================================================================== */
@media (max-width:1024px){
  [style*="repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [style*="repeat(3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .aok-svc-side{position:static}
}
@container site (max-width:1024px){
  [style*="repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [style*="repeat(3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .aok-svc-side{position:static}
}

/* =====================================================================
   ≤860px  (hero stacks: copy over the 3D stage)
   ===================================================================== */
@media (max-width:860px){
  .aok-hero-grid{grid-template-columns:1fr!important;min-height:0!important}
  .aok-hero-bento{grid-template-columns:1fr!important}
}
@container site (max-width:860px){
  .aok-hero-grid{grid-template-columns:1fr!important;min-height:0!important}
  .aok-hero-bento{grid-template-columns:1fr!important}
}

/* =====================================================================
   ≤860px  brand name: the long business name must never push the nav pill
   past the viewport — cap it with an ellipsis so the burger always fits (AR-2).
   ===================================================================== */
@media (max-width:860px){
  .aok-brand{min-width:0;overflow:hidden}
  .aok-brand-name{display:block;min-width:0;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:19px}
}
@container site (max-width:860px){
  .aok-brand{min-width:0;overflow:hidden}
  .aok-brand-name{display:block;min-width:0;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:19px}
}
@media (max-width:420px){
  .aok-brand-name{max-width:150px;font-size:16px}
}
@container site (max-width:420px){
  .aok-brand-name{max-width:150px;font-size:16px}
}

/* =====================================================================
   ≤767px  (single column; 16px gutters; iOS-safe inputs; 44px targets)
   ===================================================================== */
@media (max-width:767px){
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns"]>*{min-width:0!important}
  .aok-wrap{padding-left:16px!important;padding-right:16px!important}
  input,select,textarea{font-size:16px!important}
  .aok-btn{min-height:44px}
  .aok-navlink,.aok-footlink,.aok-moblink{min-height:44px;display:inline-flex;align-items:center}
}
@container site (max-width:767px){
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns"]>*{min-width:0!important}
  .aok-wrap{padding-left:16px!important;padding-right:16px!important}
  input,select,textarea{font-size:16px!important}
  .aok-btn{min-height:44px}
  .aok-navlink,.aok-footlink,.aok-moblink{min-height:44px;display:inline-flex;align-items:center}
}

/* =====================================================================
   ≤520px  (compact type)
   ===================================================================== */
@media (max-width:520px){
  html,body{font-size:15px}
  .aok-brand-sub{display:none}
}
@container site (max-width:520px){
  html,body{font-size:15px}
  .aok-brand-sub{display:none}
}

/* =====================================================================
   Phase 3C components — header search pill, guarantee cards, service matrix
   ===================================================================== */

/* English-only: hide the language toggle (scaffold kept in the DOM) */
.aok-lang{display:none!important}

/* nav links stay on one line (fixes the "Hom e / Service s" wrap) */
.aok-navlinks{flex-wrap:nowrap;gap:22px}
.aok-navlink{white-space:nowrap}

/* ---- header search pill ---- */
.aok-search{flex:1 1 180px;max-width:290px;min-width:150px;display:flex;align-items:center;gap:8px;
  padding:6px 6px 6px 14px;border-radius:999px;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(200,16,46,.28);position:relative}
.aok-search-ic{color:#63676E;font-size:16px;line-height:1;flex:0 0 auto}
.aok-search-in{flex:1;min-width:0;border:none;background:transparent;font:500 14px Inter,system-ui,sans-serif;color:#15171A;outline:none}
.aok-search-in::placeholder{color:#9A9DA3}
.aok-search-btn{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#C8102E,#E0304A);color:#fff;font-size:15px;display:inline-flex;align-items:center;justify-content:center}
.aok-search-drop{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid rgba(200,16,46,.2);
  border-radius:14px;box-shadow:0 18px 44px -16px rgba(21,23,26,.32);padding:6px;z-index:60;display:grid;gap:2px}
.aok-search-item{display:block;padding:10px 12px;border-radius:9px;font:500 14px Inter,system-ui,sans-serif;color:#15171A;text-decoration:none}
.aok-search-item:hover,.aok-search-item:focus{background:#FDF2F3;color:#B00E28}
.aok-search-mob{display:flex;width:100%;max-width:none;margin:4px 0 14px}

/* ---- triple glassmorphic guarantee cards ---- */
.aok-guar{display:flex;gap:16px;align-items:flex-start;padding:24px 24px}
.aok-guar-ic{flex:0 0 auto;width:48px;height:48px;border-radius:14px;background:#FDECEE;color:#B00E28;display:flex;align-items:center;justify-content:center}
.aok-guar-body{min-width:0}
.aok-guar-t{font:700 18px 'Space Grotesk',system-ui,sans-serif;color:#15171A;margin:0 0 6px;letter-spacing:-.01em}
.aok-guar-d{font:400 14px/1.55 Inter,system-ui,sans-serif;color:#63676E;margin:0}

/* ---- 4×2 service card matrix ---- */
.aok-svc8-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.aok-svc8-card{display:flex!important;flex-direction:column;padding:10px!important;text-decoration:none;overflow:hidden}
.aok-svc8-img{aspect-ratio:4/3;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.aok-svc8-img img{width:100%;height:100%;object-fit:cover;display:block}
.aok-svc8-img.is-ph{background:#1E2126}
.aok-svc8-ic{display:flex;color:#FF5A6A;line-height:1}
.aok-svc8-label{font:700 16px 'Space Grotesk',system-ui,sans-serif;color:#15171A;text-align:center;padding:16px 6px 8px}

/* responsive — authored twice (@media + @container) */
@media (max-width:1024px){ .aok-svc8-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container site (max-width:1024px){ .aok-svc8-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){ .aok-svc8-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .aok-svc8-ic{font-size:36px} }
@container site (max-width:460px){ .aok-svc8-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .aok-svc8-ic{font-size:36px} }

/* service-matrix photo hover elevation */
.aok-svc8-img img{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.aok-svc8-card:hover .aok-svc8-img img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.aok-svc8-img img{transition:none}}

/* Desktop: the full business name is long, so cap it and ellipsis rather than let
   it run under the nav. Written twice (AR-12): @media for the real page, @container
   for the Visual Editor's device preview, which resizes by container width. */
@media (min-width:981px){
  /* Let the wordmark keep its natural width instead of being flex-shrunk into an
     ellipsis; the nav gap below gives back the few pixels this needs. */
  .aok-brand{flex:0 0 auto;min-width:0;overflow:hidden}
  .aok-navlinks{gap:18px}
}
@container site (min-width:981px){
  .aok-brand{flex:0 0 auto;min-width:0;overflow:hidden}
  .aok-navlinks{gap:18px}
  .aok-brand-name{display:block;min-width:0;max-width:min(42cqw,430px);overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;font-size:clamp(14px,1.05cqw,16px)}
}