/* ══════════════════════════════════════════════════════════════════════════════
   Escargo — CUSTOMER SHELL (public discovery front door). PAGE-SCOPED LAYOUT ONLY.

   Every component and colour comes from the existing DS: os-ui.css (.os-* and the
   --os-* tokens). This file adds only what the DS does not already provide:
     • .ec-hdr   — the dedicated CUSTOMER header (logo · account · For business · menu)
     • .ec-menu  — the customer drawer (customer items + ONE business switch)
     • .ec-cats  — the "What are you looking for?" 4:3 photographic category grid
     • .ec-sec   — the customer discovery sections (all data-driven, honest empties)

   The customer header is a SEPARATE component from the business chrome (.eo-hdr
   mega-menu). It is not the business header restyled and it is not the business
   header hidden with CSS — business navigation is never emitted into this shell.

   No webfont/CDN (the estate CSP bans both). All motion honours reduced-motion.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Screen-reader-only text. The estate has no such utility yet, so it is defined
   here (the customer logo is an <img alt=""> plus a real text name for AT). */
.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── CUSTOMER HEADER ───────────────────────────────────────────────────────── */
.ec-hdr{
  position:sticky; top:0; z-index:60;
  background:var(--os-white);
  border-bottom:1px solid var(--os-line);
}
.ec-hdr-in{
  max-width:1200px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; gap:12px;
}
.ec-logo{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--os-forest);
  font-weight:800; font-size:19px; letter-spacing:-.02em;
  min-height:44px; padding:0 2px; border-radius:var(--os-r);
}
.ec-logo img{display:block; height:26px; width:auto}
.ec-logo span{color:var(--os-lime)}
.ec-hdr-sp{flex:1 1 auto}
.ec-hdr-actions{display:flex; align-items:center; gap:8px}

/* Text/log-in action */
.ec-link{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 12px; border-radius:var(--os-r);
  color:var(--os-forest); font-weight:600; font-size:15px; text-decoration:none;
  background:none; border:0; cursor:pointer; font-family:inherit;
}
.ec-link:hover{background:var(--os-pale)}

/* The rounded For business / My business pill */
.ec-bizbtn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 18px;
  border-radius:var(--os-r-pill);
  border:1px solid var(--os-line);
  background:var(--os-white); color:var(--os-forest);
  font-weight:650; font-size:15px; text-decoration:none; white-space:nowrap;
}
.ec-bizbtn:hover{background:var(--os-pale); border-color:#cfd8c9}

/* Signed-in avatar */
.ec-avatar{
  width:36px; height:36px; border-radius:50%;
  background:var(--os-forest); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; text-decoration:none;
  border:0; cursor:pointer; font-family:inherit;
}

/* Hamburger — 44px target, three bars drawn in CSS (no icon font) */
.ec-burger{
  width:44px; height:44px; flex:0 0 44px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--os-white); border:1px solid var(--os-line);
  border-radius:var(--os-r-pill); cursor:pointer; padding:0;
}
.ec-burger:hover{background:var(--os-pale)}
.ec-burger i{
  position:relative; display:block; width:17px; height:2px; border-radius:2px;
  background:var(--os-forest);
}
.ec-burger i::before,.ec-burger i::after{
  content:""; position:absolute; left:0; width:17px; height:2px; border-radius:2px;
  background:var(--os-forest);
}
.ec-burger i::before{top:-6px}
.ec-burger i::after{top:6px}

@media (max-width:719px){
  .ec-hdr-in{padding:8px 14px; gap:8px}
  .ec-bizbtn{display:none}            /* mobile: business switch lives in the menu */
  .ec-logo{font-size:17px}
  .ec-link{padding:0 8px; font-size:14px}
}

/* ── CUSTOMER DRAWER MENU ──────────────────────────────────────────────────── */
.ec-scrim{
  position:fixed; inset:0; z-index:70;
  background:rgba(7,59,36,.42);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.ec-scrim[data-open="1"]{opacity:1; pointer-events:auto}

.ec-menu{
  position:fixed; top:0; right:0; z-index:71;
  width:min(360px,92vw); height:100%;
  background:var(--os-white);
  border-left:1px solid var(--os-line);
  box-shadow:var(--os-shadow-hover);
  transform:translateX(100%); transition:transform .22s ease;
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
}
.ec-menu[data-open="1"]{transform:translateX(0)}
.ec-menu-hd{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--os-line);
  position:sticky; top:0; background:var(--os-white);
}
.ec-menu-hd strong{font-size:16px; color:var(--os-ink)}
.ec-menu-x{
  margin-left:auto; width:44px; height:44px; flex:0 0 44px;
  border:1px solid var(--os-line); border-radius:var(--os-r-pill);
  background:var(--os-white); cursor:pointer; color:var(--os-forest);
  font-size:20px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
}
.ec-menu-x:hover{background:var(--os-pale)}
.ec-menu-list{list-style:none; margin:0; padding:8px 8px 16px}
.ec-menu-list a,.ec-menu-list button{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:48px; padding:0 12px; border-radius:var(--os-r-card);
  color:var(--os-ink); text-decoration:none; font-size:15px; font-weight:550;
  background:none; border:0; cursor:pointer; font-family:inherit; text-align:left;
}
.ec-menu-list a:hover,.ec-menu-list button:hover{background:var(--os-pale)}
.ec-menu-sep{height:1px; background:var(--os-line); margin:8px 12px}
.ec-menu-note{padding:0 20px 10px; color:var(--os-muted); font-size:13px}
/* The single business switch — visually separated as the final action */
.ec-menu-switch{
  margin:4px 8px 0; padding:12px;
  border:1px solid var(--os-line); border-radius:var(--os-r-card);
  background:var(--os-pale);
}
/* NB: display:flex is required here — this link is NOT inside .ec-menu-list, so
   it would default to display:inline, on which min-height has no effect (that
   left the switch a 21px target at 320px instead of 48px). */
.ec-menu-switch a{
  display:flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 12px; text-decoration:none;
  background:var(--os-forest); color:#fff; font-weight:700; border-radius:var(--os-r);
}
.ec-menu-switch a:hover{background:var(--os-forest-soft)}
.ec-menu-switch p{margin:8px 2px 0; color:var(--os-muted); font-size:12.5px; line-height:1.45}

/* ── "WHAT ARE YOU LOOKING FOR?" CATEGORY GRID ─────────────────────────────── */
.ec-cats{padding:36px 0 8px}
.ec-cats-hd{max-width:720px; margin-bottom:18px}
.ec-cats-hd h2{margin:2px 0 6px; font-size:clamp(22px,3.4vw,30px); font-weight:800; letter-spacing:-.02em; color:var(--os-ink)}
.ec-cats-hd p{margin:0; color:var(--os-muted); font-size:15px}

.ec-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr));   /* mobile */
  list-style:none; margin:0; padding:0;
}
@media (min-width:700px){ .ec-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }   /* tablet */
@media (min-width:1000px){ .ec-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px} } /* desktop */

.ec-cat{
  position:relative; display:block;
  border-radius:var(--os-r-card); overflow:hidden;
  text-decoration:none; color:#fff;
  background:var(--os-forest);              /* the colour behind a still-loading photo */
  aspect-ratio:4/3;                          /* consistent framing, no layout shift */
  box-shadow:var(--os-shadow-sm);
  transition:transform .16s ease, box-shadow .16s ease;
  isolation:isolate;
}
.ec-cat img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  z-index:0;
  transition:transform .3s ease;
  background:var(--os-forest);
}
/* Dark readability gradient — guarantees label contrast on any photograph */
.ec-cat::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,rgba(4,26,16,.82) 0%,rgba(4,26,16,.42) 38%,rgba(4,26,16,.06) 72%,rgba(4,26,16,0) 100%);
}
.ec-cat b{
  position:absolute; z-index:2; left:12px; right:12px; bottom:11px;
  font-size:15px; font-weight:700; line-height:1.25; letter-spacing:-.01em;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.ec-cat:hover{transform:translateY(-2px); box-shadow:var(--os-shadow-hover)}
.ec-cat:hover img{transform:scale(1.04)}
.ec-cat:active{transform:translateY(0) scale(.988)}
.ec-cat:focus-visible{outline:3px solid var(--os-lime); outline-offset:3px}
/* Error state: if the photograph 404s the card stays readable, never blank */
.ec-cat img[data-err="1"]{opacity:0}
.ec-cat[data-err="1"]{background:linear-gradient(150deg,var(--os-forest),var(--os-forest-soft))}

@media (max-width:400px){
  .ec-grid{gap:10px}
  .ec-cat b{left:10px; right:10px; bottom:9px; font-size:13.5px}
}

/* ── CUSTOMER DISCOVERY SECTIONS ───────────────────────────────────────────── */
.ec-sec{padding:34px 0 6px}
.ec-sec-hd{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap}
.ec-sec-hd h2{margin:2px 0 4px; font-size:clamp(20px,3vw,26px); font-weight:800; letter-spacing:-.02em; color:var(--os-ink)}
.ec-sec-hd p{margin:0; color:var(--os-muted); font-size:14.5px}
.ec-sec-link{color:var(--os-forest); font-weight:650; font-size:14.5px; text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
.ec-sec-link:hover{text-decoration:underline}

.ec-cards{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
  list-style:none; margin:0; padding:0;
}
.ec-pcard{
  border:1px solid var(--os-line); border-radius:var(--os-r-card);
  background:var(--os-white); overflow:hidden; display:flex; flex-direction:column;
}
.ec-pcard-body{padding:13px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1}
.ec-pcard h3{margin:0; font-size:16px; font-weight:700; color:var(--os-ink); line-height:1.3}
.ec-pcard h3 a{color:inherit; text-decoration:none}
.ec-pcard h3 a:hover{text-decoration:underline}
.ec-meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13px; color:var(--os-muted)}
.ec-badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:var(--os-r-pill);
  font-size:12px; font-weight:650;
  background:rgba(128,191,32,.16); color:#3c6410;
}
.ec-badge.is-new{background:rgba(7,59,36,.08); color:var(--os-forest)}
.ec-price{font-size:14px; color:var(--os-ink); font-weight:650}
.ec-price.is-quote{font-weight:550; color:var(--os-muted)}

/* Honest empty / unavailable state — used wherever real data does not exist yet */
.ec-empty{
  border:1px dashed var(--os-line); border-radius:var(--os-r-card);
  background:var(--os-pale); padding:20px 18px; color:var(--os-text);
}
.ec-empty b{display:block; color:var(--os-ink); font-size:15.5px; margin-bottom:4px}
.ec-empty p{margin:0; font-size:14px; color:var(--os-muted); line-height:1.5}

/* Skeletons */
.ec-skel{border:1px solid var(--os-line); border-radius:var(--os-r-card); background:var(--os-white); padding:14px}
.ec-skel i{display:block; height:11px; border-radius:5px; background:var(--os-pale); margin-bottom:9px}
.ec-skel i:nth-child(2){width:70%}
.ec-skel i:nth-child(3){width:45%; margin-bottom:0}

/* Browse-by-area SEO links */
.ec-areas{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.ec-areas a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  border:1px solid var(--os-line); border-radius:var(--os-r-pill);
  background:var(--os-white); color:var(--os-forest);
  font-size:14.5px; font-weight:600; text-decoration:none;
}
.ec-areas a:hover{background:var(--os-pale)}

/* Escargo for Business promo band (customer page → /for-business) */
.ec-biz{
  margin:38px 0 8px; padding:26px 22px;
  border-radius:var(--os-r-lg);
  background:linear-gradient(140deg,var(--os-forest),var(--os-forest-soft));
  color:#fff;
}
.ec-biz h2{margin:4px 0 8px; font-size:clamp(20px,3vw,27px); font-weight:800; letter-spacing:-.02em; color:#fff}
.ec-biz p{margin:0 0 16px; color:#cfe0d4; font-size:15px; max-width:60ch; line-height:1.55}
.ec-biz .os-kicker{color:var(--os-lime)}
.ec-biz a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 22px; border-radius:var(--os-r-pill);
  background:var(--os-lime); color:#0d2b16; font-weight:750; font-size:15.5px; text-decoration:none;
}
.ec-biz a:hover{background:var(--os-lime-hover)}

/* Persistent Help Now action — present on every customer page */
.ec-helpnow{
  position:fixed; right:16px; bottom:16px; z-index:55;
  display:inline-flex; align-items:center; gap:8px;
  min-height:48px; padding:0 18px; border-radius:var(--os-r-pill);
  background:#b3261e; color:#fff; font-weight:750; font-size:15px; text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.24);
}
.ec-helpnow:hover{background:#9b201a}
.ec-helpnow:focus-visible{outline:3px solid #fff; outline-offset:2px}
@media (max-width:400px){ .ec-helpnow{right:12px; bottom:12px; padding:0 15px; font-size:14.5px} }

/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .ec-menu,.ec-scrim,.ec-cat,.ec-cat img{transition:none}
  .ec-cat:hover{transform:none}
  .ec-cat:hover img{transform:none}
}