/* ==========================================================================
   LANDING PAGES — /lp/{slug}/
   A paid-ads canvas: no site header, no site footer, no site navigation.
   This file owns the whole viewport, so it carries the sticky bar, the
   full-bleed section bands and the small landing footer.
   The markup lives in the post content; every landing rule is scoped to .lp,
   which is a direct child of .entry inside .landing__inner.
   Loaded after style.css, so landing rules win their equal-specificity ties.
   Never set overflow (hidden/auto/clip) on .landing, .landing__inner, .lp or
   .entry here: position:sticky on the landing nav depends on those ancestors
   scrolling normally.
   ========================================================================== */

/* ========================================================== canvas reset */
.landing{padding:0;background:var(--color-surface)}
.landing__inner{max-width:none;margin:0;padding:0}
/* a landing whose content is not this page keeps normal body-copy width */
.landing__inner > .entry > :not(.lp){max-width:760px;margin-inline:auto;padding-inline:24px}

/* The generic .entry rhythm fights the section layout, so it is neutralised
   inside .lp only; vertical spacing comes from the design system's .stack. */
.lp{background:var(--color-surface);overflow-wrap:break-word}
.lp p{max-width:none}
.lp h2,.lp h3,.lp h4{margin:0}

/* ========================================================== scroll + rhythm */
/* Smooth anchor jumps only where the landing canvas is rendered; the body
   class is the fallback for engines without :has(). */
html:has(.lp){scroll-behavior:smooth}
/* engines without :has() fall back to the body class */
.landing-body{scroll-behavior:smooth}

/* A jump must never hide a section title under the sticky bar: bar height
   (78px on wide screens) plus breathing room. */
.lp #overview,
.lp #essentials,
.lp #products,
.lp #factory,
.lp #quote{scroll-margin-top:96px}

/* Full-bleed bands: white / soft tint / one dark proof block. The sections
   separate by tint, so the inherited hairline between sections is dropped. */
.lp .section{padding:var(--space-5) 0}
.lp .section + .section{border-top:0}
@media(min-width:760px){
  .lp .section{padding:var(--space-6) 0}
}
.lp #essentials{background:var(--color-surface-soft)}
.lp .lp-cta{background:var(--color-glass)}

/* The hero opens the page under the sticky bar and needs the most air. */
.lp .section.lp-hero{padding-top:calc(var(--space-5) + var(--space-2));background:linear-gradient(180deg,var(--color-surface-soft) 0%,var(--color-surface) 100%)}
@media(min-width:960px){
  .lp .section.lp-hero{padding-top:var(--space-7)}
}

/* ========================================================== sticky nav
   The tone mirrors .site-header: translucent white, blur, hairline. */
.lp .lp-nav{position:sticky;top:0;z-index:70;border-bottom:1px solid var(--color-line);background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lp .lp-nav__inner{display:flex;align-items:center;gap:12px;min-height:72px;max-width:var(--wrap);margin:0 auto;padding:10px 20px}
@media(min-width:760px){
  .lp .lp-nav__inner{gap:var(--space-2);min-height:78px;padding:10px 28px}
}
/* brand — allowed to shrink so the anchors keep their room at 360px */
.lp .lp-nav__brand{display:flex;align-items:baseline;gap:8px;flex:0 1 auto;min-width:0;text-decoration:none;color:var(--color-ink)}
.lp .lp-nav__mark{font-size:1rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
/* the brand sub-line and the phone number only appear once the bar has room
   for them, so the five anchors are never squeezed under the button */
.lp .lp-nav__sub{display:none;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted);white-space:nowrap}
@media(min-width:1400px){
  .lp .lp-nav__sub{display:inline}
}
/* the five anchors stay usable on a phone: one horizontally swipeable row. The
   row keeps overflow-x:auto at every width, so it scrolls instead of clipping
   when the bar is tight (tablets, narrow laptops). */
.lp .lp-nav__nav{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lp .lp-nav__nav::-webkit-scrollbar{display:none}
.lp .lp-nav__list{display:flex;align-items:center;gap:20px;margin:0;padding:4px 2px;list-style:none;white-space:nowrap}
.lp .lp-nav__list a{display:inline-block;padding:4px 0;font-size:.91rem;font-weight:600;text-decoration:none;color:var(--color-ink);border-bottom:2px solid transparent;transition:color .18s ease,border-color .18s ease}
/* hover, keyboard focus and the active anchor (parity with .nav__link) */
.lp .lp-nav__list a:hover,
.lp .lp-nav__list a:focus-visible,
.lp .lp-nav__list a[aria-current]{border-bottom-color:var(--color-accent);color:var(--color-accent)}
@media(min-width:960px){
  .lp .lp-nav__nav{margin-left:auto;margin-right:var(--space-2)}
  .lp .lp-nav__list{gap:24px}
}
.lp .lp-nav__cta{flex:0 0 auto;padding:11px 16px;font-size:.86rem;white-space:nowrap}
/* the phone number would push the button wide on a small screen */
.lp .lp-nav__cta-num{display:none}
@media(min-width:760px){
  .lp .lp-nav__cta{padding:12px 22px;font-size:.9rem}
}
@media(min-width:1200px){
  .lp .lp-nav__cta-num{display:inline;margin-left:4px;font-weight:500;opacity:.85}
}
/* On a phone the bar becomes two rows — brand + button, then the anchor row.
   In one row the brand and the anchors overlap on a 360–430px screen. */
@media(max-width:759px){
  .lp .lp-nav__inner{flex-wrap:wrap;min-height:0;padding:10px 16px;gap:8px 12px}
  .lp .lp-nav__brand{flex:1 1 auto}
  .lp .lp-nav__cta{order:2}
  .lp .lp-nav__nav{order:3;flex:1 0 100%;margin-top:2px}
  .lp .lp-nav__list{gap:18px;padding:2px}
}
/* the bar is taller on a phone, so an anchor jump needs more clearance */
@media(max-width:759px){
  .lp #overview,
  .lp #essentials,
  .lp #products,
  .lp #factory,
  .lp #quote{scroll-margin-top:124px}
}

/* ========================================================== hero */
.lp .hero-grid{display:grid;gap:var(--space-4)}
@media(min-width:960px){
  .lp .hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--space-5);align-items:center}
}
/* .photo already supplies the block box, the crop and the radius */
.lp .lp-hero__media img{box-shadow:var(--shadow-lift)}
/* checklist + muted line read as one quick clarity block, not body copy */
.lp .lp-hero__copy .checklist{border-top:1px solid var(--color-line)}
.lp .lp-hero__copy .checklist li{font-size:.92rem;padding:10px 0 10px 30px}
.lp .lp-hero__copy .checklist li::before{top:19px}
.lp .lp-hero__copy .checklist li:last-child{border-bottom:0}
.lp .lp-hero__copy .small{padding-left:14px;border-left:3px solid var(--color-accent-soft);font-size:.86rem;color:var(--color-muted)}

/* ========================================================== spec table */
/* Two columns of rows from 760px. The design system keys the value column at
   230px, which leaves a two-up row almost no room, so keys are narrower here;
   one column of stacked key/value rows stays the mobile default. */
@media(min-width:760px){
  .lp .lp-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-5)}
  .lp .lp-spec .spec__row{grid-template-columns:minmax(0,140px) 1fr;gap:16px}
}
@media(min-width:1100px){
  .lp .lp-spec .spec__row{grid-template-columns:minmax(0,180px) 1fr;gap:24px}
}

/* ========================================================== image cards
   .grid--3 only goes three-up at 760px, where three cards are still cramped,
   so the landing card rows stay two-up until 1000px. */
@media(min-width:620px){
  .lp .lp-cards,
  .lp .lp-products,
  .lp .lp-services{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1000px){
  .lp .lp-cards,
  .lp .lp-products,
  .lp .lp-services{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* image flush with the rounded top of the card: no card padding, clipped */
.lp .lp-card,
.lp .lp-product{padding:0;display:flex;flex-direction:column;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.lp .lp-card:hover,
.lp .lp-product:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--color-line-strong)}
.lp .lp-card__media,
.lp .lp-product__media{margin:0;background:var(--color-glass);border-bottom:1px solid var(--color-line)}
.lp .lp-card__media img,
.lp .lp-product__media img{border:0;border-radius:0}
.lp .lp-card__media img{aspect-ratio:3/2}
.lp .lp-product__media img{aspect-ratio:4/3}
.lp .lp-card > .card__title,
.lp .lp-product > .card__title{padding:24px 24px 0}
.lp .lp-card > .card__body,
.lp .lp-product > .card__body{padding:0 24px 24px}
/* style.css .card__title{margin-bottom:8px} loses to the .lp heading reset */
.lp .card__title{margin-bottom:8px}

/* product cards: the spec list is pinned to the bottom so the row aligns */
.lp .lp-product > .product__specs{margin:auto 0 0;padding:14px 24px 24px;border-top:1px solid var(--color-line)}
.lp .lp-product > .product__specs div:first-child{border-top:0}
.lp .lp-product > .product__specs div:last-child{padding-bottom:0}
/* the design system drops card padding to 20px on phones; the inner blocks of
   an image card have to follow, since the card itself is padding:0 */
@media(max-width:759px){
  .lp .lp-card > .card__title,
  .lp .lp-product > .card__title{padding:20px 20px 0}
  .lp .lp-card > .card__body,
  .lp .lp-product > .card__body{padding:0 20px 20px}
  .lp .lp-product > .product__specs{padding:12px 20px 20px}
}

/* service cards: text only, the number is already carried by .card__num */
.lp .lp-service{transition:transform .2s ease,border-color .2s ease}
.lp .lp-service:hover{transform:translateY(-2px);border-color:var(--color-line-strong)}

/* ========================================================== proof block (dark) */
/* four proof numbers, label beneath the figure */
.lp .stats{gap:var(--space-4) var(--space-3)}
@media(min-width:520px){
  .lp .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:760px){
  .lp .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.lp .stat__num{font-size:clamp(1.75rem,4.4vw,2.5rem)}
.lp .stat__label{display:block;margin-top:4px}

/* factory photos: two columns of captioned figures */
.lp .lp-photos{gap:var(--space-3)}
@media(min-width:760px){
  .lp .lp-photos{gap:var(--space-4) var(--space-3)}
}
.lp .lp-photos img{aspect-ratio:3/2}
.lp .lp-photos figcaption,
.lp .lp-band figcaption{font-size:.86rem}
/* .photo-band figcaption ships --color-muted, which is below AA on the dark band */
.lp .section--dark .lp-photos figcaption,
.lp .section--dark .lp-band figcaption{color:var(--color-dark-muted)}

/* verification + certifications: side by side from 960px, stacked below */
@media(min-width:760px) and (max-width:959px){
  .lp .grid--2:has(> .lp-verify),
  .lp .grid--2:has(> .lp-certs){grid-template-columns:1fr}
}
@media(min-width:960px){
  .lp .grid--2:has(> .lp-verify),
  .lp .grid--2:has(> .lp-certs){grid-template-columns:repeat(2,minmax(0,1fr))}
}
.lp .lp-verify .checklist li:first-child{padding-top:0}
.lp .lp-verify .checklist li:last-child{padding-bottom:0;border-bottom:0}
/* up to four certification chips, two by two */
.lp .certrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lp .certrow .badge{min-width:0;width:100%;padding:13px 12px;font-size:.72rem;letter-spacing:.09em}
.lp .lp-certs .certrow + .small{margin-top:var(--space-2)}
.lp .section--dark .badge{background:rgba(255,255,255,.06);border-color:var(--color-dark-line);color:var(--color-dark-ink)}

/* the supplied band photo is 1600x500, wider than the system's 8/3 ratio */
.lp .lp-band img{aspect-ratio:16/5;min-height:200px}
.lp .lp-band figcaption{max-width:80ch}
@media(min-width:760px){
  .lp .lp-band img{min-height:280px}
}

/* ========================================================== quote (CTA)
   .contact-grid already becomes two columns at 960px (form left, aside right)
   and stays one column below. */
.lp .lp-form-card{padding:clamp(22px,3.4vw,40px)}
.lp .lp-form-card .field textarea{min-height:170px}
.lp .lp-form-card .form__actions .small{flex:1 1 220px;margin:0;font-size:.82rem}
/* WhatsApp card */
.lp .lp-wa{display:grid;gap:var(--space-2)}
.lp .lp-wa svg{width:28px;height:28px;fill:var(--color-accent);justify-self:start}
.lp .lp-wa p{margin:0;font-size:.94rem;line-height:1.6;color:var(--color-muted)}
.lp .lp-wa .btn{width:100%;text-align:center}
/* "what happens next" card */
.lp .lp-next .h3{margin:0 0 var(--space-2)}
.lp .lp-next .contact-list li:first-child{padding-top:0}
.lp .lp-next .contact-list li:last-child{padding-bottom:0;border-bottom:0}
/* the aside photo keeps a 3:2 box, so an upload cannot shift the column */
.lp .contact-grid .photo-band img{aspect-ratio:3/2}

/* ========================================================== landing footer */
.lp .lp-foot{padding:var(--space-4) 0 var(--space-3);background:var(--color-surface);border-top:1px solid var(--color-line)}
.lp .lp-foot__brand{margin:0 0 4px;font-size:.95rem;font-weight:700;letter-spacing:.01em}
.lp .lp-foot .small{max-width:74ch;font-size:.82rem;color:var(--color-muted)}
.lp .lp-foot a{color:var(--color-muted);text-decoration:none;border-bottom:1px solid var(--color-line-strong)}
.lp .lp-foot a:hover{color:var(--color-accent);border-bottom-color:var(--color-accent)}
@media(max-width:759px){
  /* keep the last line clear of the floating WhatsApp button */
  .lp .lp-foot{padding-bottom:96px}
}

/* ========================================================== fill-in tokens */
/* Company name, years, MOQ, address … still to be replaced by the owner.
   Marked clearly enough to be found at a glance, without looking broken. */
.lp .lp-todo{color:var(--color-accent);font-weight:600;border-bottom:1px dashed var(--color-accent);padding-bottom:1px}
.lp .section--dark .lp-todo{color:var(--color-accent-soft);border-bottom-color:var(--color-accent-soft)}

/* ========================================================== focus + motion */
/* The theme base already draws a :focus-visible ring; it is restated for the
   controls that add their own accent halo, which can swallow it. */
.lp a:focus-visible,
.lp button:focus-visible,
.lp .field input:focus-visible,
.lp .field textarea:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
/* the anchor row scrolls, so its ring sits a little closer */
.lp .lp-nav__list a:focus-visible{outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  html:has(.lp){scroll-behavior:auto}
  .landing-body{scroll-behavior:auto}
  .lp .btn,
  .lp .lp-card,
  .lp .lp-product,
  .lp .lp-service,
  .lp .lp-nav__list a{transition:none}
  .lp .btn:hover,
  .lp .lp-card:hover,
  .lp .lp-product:hover,
  .lp .lp-service:hover{transform:none}
}