/* ============================================================================
   BLOCKS — Latino Ceramics component library
   One block = one labelled section below = one render fn in blocks.js =
   one card in styleguide.html. Inner blocks are BACKGROUND-AGNOSTIC: they use
   tokens/currentColor by default and carry their dark treatment under .on-dark
   (the contrast contract). Section wrappers own the background.
   ========================================================================== */

/* ============ latino/site-header (nav) — GLOBAL ============ */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);padding-block:12px;}
.nav-logo img{height:clamp(42px,4.6vw,50px);width:auto;}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px);list-style:none;margin:0;padding:0;}
.nav-links a{font-size:15px;font-weight:500;color:var(--text-base);position:relative;padding-block:6px;}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--primary);transition:right .25s ease;}
.nav-links a:hover::after{right:0;}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-phone{font-size:15px;}
.nav-phone .btn{padding:12px 20px;font-size:15px;}
.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.nav-burger span{display:block;width:24px;height:2px;background:var(--text-base);margin:5px 0;border-radius:2px;}
@media(max-width:920px){
  .nav-links{display:none;}
  .nav-phone .label-long{display:none;}
}

/* ============ latino/hero — GLOBAL (variant B baked in) ============ */
.hero{position:relative;overflow:hidden;background:var(--bg-dark);}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;min-height:min(86vh,780px);padding-block:clamp(56px,8vw,104px);padding-bottom:clamp(120px,14vw,170px);}
.hero-wrap{max-width:min(1120px,100%);}
.hero h1{font-size:var(--fs-display);font-weight:900;color:#fff;letter-spacing:-.025em;line-height:.97;margin-bottom:var(--s5);}
.hero .lead{color:rgba(255,255,255,.88);max-width:560px;margin-bottom:var(--s5);}
.hero-rating{display:flex;align-items:center;gap:14px;margin-bottom:var(--s7);flex-wrap:wrap;}
.hero-rating .score{font-weight:700;color:#fff;font-size:18px;}
.hero-rating .rev{color:rgba(255,255,255,.78);font-size:15px;}
.hero-rating .divider{width:1px;height:18px;background:rgba(255,255,255,.3);}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.hero-overline{font-size:13px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.82);margin:0 0 20px;display:flex;align-items:center;gap:12px;}
.hero-overline::before{content:"";width:9px;height:9px;background:var(--accent2-on-dark);transform:rotate(45deg);border-radius:1.5px;flex:none;}
/* photo bleed + blue gradient wash (variant B) */
.hero-photo{display:block;position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 62%;}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(8,31,56,.84) 0%, rgba(15,61,107,.62) 26%, rgba(15,61,107,.36) 44%,
    rgba(15,61,107,.12) 60%, rgba(15,61,107,0) 74%);
}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top, rgba(8,31,56,.34), transparent 32%);}

.stars{display:inline-flex;gap:3px;}
.stars svg{width:20px;height:20px;}

/* ============ latino/trust-bar — SPECIFIC ============
   White slab that overlaps the hero photo. Repeater of stat items. */
.trust{position:relative;z-index:5;}
.trust-band{
  position:relative;margin-top:clamp(-104px,-7.5vw,-56px);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 30px 70px rgba(8,31,56,.18), 0 2px 6px rgba(8,31,56,.07);
  display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;
}
.trust-band::after{content:"";position:absolute;inset:9px;border:1px solid rgba(15,42,69,.08);border-radius:calc(var(--radius-lg) - 5px);pointer-events:none;}
.trust-item{
  padding:clamp(26px,3vw,40px) clamp(22px,2.6vw,36px);
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;gap:12px;
}
.trust-item:first-child{border-left:0;}
.trust-num{font-family:var(--font-head);font-weight:700;font-size:clamp(36px,3.6vw,52px);color:var(--text-base);line-height:.95;letter-spacing:-.02em;display:flex;align-items:baseline;}
.trust-num .plus{color:var(--accent2);}
/* equal-height label zone keeps numbers on one baseline (kept from v1 — v1 does this better) */
.trust-foot{display:flex;flex-direction:column;justify-content:flex-start;gap:5px;min-height:40px;}
.trust-foot .stars{gap:2px;}
.trust-foot .stars svg{width:15px;height:15px;}
.trust-label{font-size:12.5px;color:var(--text-muted);font-weight:600;letter-spacing:.07em;text-transform:uppercase;line-height:1.5;}
@media(max-width:880px){
  .trust-band{grid-template-columns:1fr 1fr;}
  .trust-item:nth-child(3){border-left:0;}
  .trust-item:nth-child(n+3){border-top:1px solid var(--line);}
  .trust-foot{min-height:0;}
}
@media(max-width:440px){
  .trust-band{grid-template-columns:1fr;}
  .trust-item{border-left:0;}
  .trust-item:nth-child(n+2){border-top:1px solid var(--line);}
}

/* ============ latino/image-card-grid (was cat-grid) — REUSABLE ============
   Composable rows of image cards with size variants + a list-card variant. */
.card-grid{display:grid;gap:var(--s5);}
.card-grid__row{display:grid;gap:var(--s5);}
.card-grid__row.is-feature{grid-template-columns:1.55fr 1fr;}
.card-grid__row.is-trio{grid-template-columns:1fr 1fr 1fr;}
.image-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;display:block;
  background:var(--bg-subtle);box-shadow:var(--shadow-card);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.image-card--sm{aspect-ratio:1/1;}
.image-card--hero,.image-card--med{min-height:clamp(360px,40vw,520px);}
.image-card--hero .image-card__meta{padding:30px 30px;}
.image-card--hero .image-card__meta h3{font-size:clamp(28px,3.4vw,46px);}
.image-card:hover{transform:translateY(-8px) scale(1.012);box-shadow:var(--shadow-hover);}
.image-card::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.5);border-radius:calc(var(--radius-lg) - 6px);z-index:2;pointer-events:none;mix-blend-mode:screen;}
.image-card__img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .55s cubic-bezier(.2,.7,.2,1);}
.image-card:hover .image-card__img{transform:scale(1.07);}
.image-card__overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(8,31,56,.82) 0%, rgba(8,31,56,.18) 48%, rgba(8,31,56,0) 70%);z-index:1;}
.image-card__meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 22px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;}
.image-card__meta h3{color:#fff;font-size:var(--fs-h3);font-weight:600;}
.image-card__arrow{flex:none;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);display:grid;place-items:center;color:#fff;transition:background .25s ease, transform .25s ease;}
.image-card:hover .image-card__arrow{background:var(--primary);transform:translateX(2px);}
.image-card__arrow svg{width:18px;height:18px;}
/* list-card variant — intrinsically navy (catalogue overflow) */
.image-card--list{position:relative;background:var(--bg-dark);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:26px;box-shadow:var(--shadow-card);}
.image-card--list::after{border-color:rgba(255,255,255,.3);mix-blend-mode:normal;}
.image-card--list h3{color:#fff;font-size:var(--fs-h3);font-weight:600;margin:0 0 12px;}
.image-card--list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.image-card--list li{font-size:14.5px;color:rgba(255,255,255,.82);padding:8px 0;border-top:1px solid rgba(255,255,255,.14);}
.image-card--list .list-card__cta{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#fff;margin-top:14px;}
.image-card--list .list-card__cta svg{width:16px;height:16px;transition:transform .25s ease;}
.image-card--list:hover .list-card__cta svg{transform:translateX(3px);}
@media(max-width:860px){
  .card-grid__row.is-feature{grid-template-columns:1fr;}
  .card-grid__row.is-trio{grid-template-columns:repeat(2,1fr);}
  .image-card--hero,.image-card--med{min-height:300px;}
  .image-card--list{grid-column:1/-1;aspect-ratio:auto;}
}
@media(max-width:520px){.card-grid__row.is-trio{grid-template-columns:1fr;}}

/* ============ latino/testimonial-grid (was rev-grid) — REUSABLE ============ */
.review-feature{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:var(--s8);}
.review-feature .eyebrow{margin-bottom:var(--s4);}
.review-feature__score{font-family:var(--font-head);font-weight:800;line-height:.82;color:var(--text-base);font-size:clamp(120px,21vw,260px);letter-spacing:-.03em;}
.review-feature .stars{margin-top:8px;}
.review-feature .stars svg{width:clamp(30px,4vw,46px);height:clamp(30px,4vw,46px);}
.review-feature__sub{margin-top:18px;font-size:var(--fs-lead);color:var(--text-muted);max-width:520px;}
.review-feature__sub strong{color:var(--text-base);font-weight:700;}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);}
.testimonial{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:38px 30px 30px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow-card);overflow:hidden;}
.testimonial::before{content:"\201C";position:absolute;top:-30px;left:16px;font-family:var(--font-head);font-weight:800;font-size:150px;line-height:1;color:var(--accent2);opacity:.16;pointer-events:none;}
.testimonial .stars,.testimonial__quote,.testimonial__who{position:relative;}
.testimonial__quote{font-family:var(--font-head);font-size:20px;line-height:1.42;color:var(--text-base);font-weight:500;font-style:italic;}
.testimonial__who{display:flex;align-items:center;gap:12px;margin-top:auto;}
.testimonial__avatar{width:42px;height:42px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none;}
.testimonial__name{font-weight:600;font-size:15px;color:var(--text-base);}
.testimonial__src{font-size:13px;color:var(--text-muted);}
@media(max-width:860px){.testimonials{grid-template-columns:1fr;}}

/* ============ latino/numbered-steps (was exp-stack) — REUSABLE ============
   Optional media column (exp-layout) wraps the steps + heading. */
.media-split{display:grid;grid-template-columns:40% 1fr;gap:clamp(28px,5vw,64px);align-items:stretch;}
.media-split__photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:440px;background-size:cover;background-position:center;box-shadow:var(--shadow-card);}
.media-split__body{display:flex;flex-direction:column;justify-content:center;gap:var(--s6);}
.media-split__body .sec-head{margin-bottom:0;max-width:none;}
.steps{display:flex;flex-direction:column;gap:var(--s6);}
.step{display:flex;flex-direction:column;gap:14px;padding-top:var(--s6);border-top:1px solid var(--line);}
.step:first-child{padding-top:0;border-top:0;}
.step__n{font-family:var(--font-head);font-size:20px;color:var(--accent2);font-weight:700;}
.step h3{font-size:clamp(24px,2.6vw,32px);font-weight:700;}
.step p{font-size:var(--fs-lead);color:var(--text-muted);line-height:1.55;}
.on-dark .step{border-top-color:rgba(255,255,255,.18);}
.on-dark .step__n{color:var(--accent2-on-dark);}
.on-dark .step p{color:rgba(255,255,255,.78);}
@media(max-width:820px){.media-split{grid-template-columns:1fr;gap:var(--s7);}.media-split__photo{min-height:300px;}}

/* ============ latino/icon-card-grid (was trade-cols) — REUSABLE ============
   Background-agnostic: light by default, dark treatment under .on-dark. */
.icon-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);}
.icon-card{display:flex;flex-direction:column;gap:10px;}
.icon-card__icon{width:46px;height:46px;border-radius:10px;background:rgba(15,42,69,.05);border:1px solid var(--line);display:grid;place-items:center;color:var(--primary);}
.icon-card__icon svg{width:24px;height:24px;}
.icon-card h4{margin:0;font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--text-base);}
.icon-card p{font-size:14px;color:var(--text-muted);}
.on-dark .icon-card__icon{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--accent);}
.on-dark .icon-card h4{color:#fff;}
.on-dark .icon-card p{color:rgba(255,255,255,.7);}
@media(max-width:820px){.icon-cards{grid-template-columns:1fr;gap:var(--s5);}}

/* ============ latino/stat — REUSABLE ============ */
.stat{background:none;border:0;padding:0;text-align:center;}
.stat__num{font-family:var(--font-head);font-size:clamp(116px,16vw,232px);font-weight:800;color:var(--text-base);line-height:.84;letter-spacing:-.03em;}
.stat__num .plus{color:var(--accent2);}
.stat__cap{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-top:16px;}
.on-dark .stat__num{color:#fff;}
.on-dark .stat__num .plus{color:var(--accent2-on-dark);}
.on-dark .stat__cap{color:rgba(255,255,255,.66);}

/* trade layout: 2-col grid pairing content with the big stat */
#trade{--diag:clamp(26px,5vw,72px);position:relative;clip-path:polygon(0 var(--diag),100% 0,100% 100%,0 100%);padding-top:calc(var(--section-y) + var(--diag));}
.split-2{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;}
.split-2 .icon-cards{margin-block:var(--s7);}
@media(max-width:820px){.split-2{grid-template-columns:1fr;gap:var(--s8);}}

/* ============ latino/chip-list (was areas-list) — REUSABLE ============ */
.chip-host{text-align:center;}
.chip-host h2{font-size:clamp(24px,2.8vw,34px);color:var(--text-base);margin-bottom:var(--s6);}
.chip-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;max-width:920px;margin-inline:auto;}
.chip{background:#fff;border:1px solid rgba(26,109,171,.18);color:var(--primary);border-radius:999px;padding:9px 18px;font-size:15px;font-weight:500;transition:background .2s ease, color .2s ease, transform .2s ease;}
.chip:hover{background:var(--primary);color:#fff;transform:translateY(-2px);}
.chip--lead{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700;font-size:16px;padding:11px 24px;box-shadow:0 6px 16px rgba(26,109,171,.28);}
.chip--lead:hover{background:var(--primary-ink);border-color:var(--primary-ink);color:#fff;}
.on-dark .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff;}
.on-dark .chip:hover{background:#fff;color:var(--primary);}

/* tile-grid texture (decorative section background option) */
.tile-host{position:relative;}
.tile-host > .container{position:relative;z-index:1;}
.tile-host::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(15,42,69,.07) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, rgba(15,42,69,.07) 1.5px, transparent 1.5px);
  background-size:clamp(132px,14vw,184px) clamp(132px,14vw,184px);
  background-position:center top;
}

/* ============ latino/map-contact (was visit) — SPECIFIC ============ */
.map-contact{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:stretch;}
.map-contact__map{border-radius:var(--radius-lg);overflow:hidden;min-height:380px;position:relative;box-shadow:var(--shadow-card);border:1px solid var(--line);background:#e8eef3;}
.map-contact__map iframe{width:100%;height:100%;min-height:380px;border:0;display:block;filter:saturate(.92);}
.map-contact__info{display:flex;flex-direction:column;justify-content:center;gap:var(--s5);}
.map-contact__info h2{font-size:var(--fs-h2);}
.info-rows{display:flex;flex-direction:column;}
.info-row{display:grid;grid-template-columns:minmax(86px,120px) 1fr;gap:16px;padding:15px 0;border-top:1px solid var(--line);align-items:baseline;}
.info-rows .info-row:last-of-type{border-bottom:1px solid var(--line);}
.info-row .vt{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);}
.info-row .vv{font-size:16.5px;font-weight:500;color:var(--text-base);line-height:1.55;}
.info-row .vv a{font-family:var(--font-head);font-size:clamp(20px,1.9vw,24px);font-weight:700;letter-spacing:-.01em;}
.info-row .vv a:hover{color:var(--primary);}
@media(max-width:820px){.map-contact{grid-template-columns:1fr;}}

/* ============ latino/cta-banner (was social2) — REUSABLE ============ */
.cta-banner{display:grid;grid-template-columns:minmax(0,1.35fr) auto;gap:clamp(24px,4vw,64px);align-items:center;}
.cta-banner h2{font-size:clamp(26px,3vw,38px);margin:0 0 10px;}
.cta-banner .lead{font-size:17px;}
.cta-banner__ctas{display:flex;gap:14px;flex-wrap:wrap;}
@media(max-width:760px){.cta-banner{grid-template-columns:1fr;}}

/* ============ latino/site-footer — GLOBAL ============ */
.footer{padding-block:var(--s9) var(--s7);}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s7);padding-bottom:var(--s7);border-bottom:1px solid rgba(255,255,255,.14);}
.footer-logo img{height:36px;margin-bottom:18px;}
.footer-blurb{color:rgba(255,255,255,.66);font-size:15px;max-width:320px;}
.footer h5{font-family:var(--font-body);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2-on-dark);margin:0 0 18px;font-weight:600;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.footer-col a,.footer-col li{color:rgba(255,255,255,.78);font-size:15px;}
.footer-col a:hover{color:#fff;}
.footer-socials{display:flex;gap:12px;margin-top:20px;}
.footer-socials a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:#fff;transition:background .2s ease, border-color .2s ease;}
.footer-socials a:hover{background:var(--primary);border-color:var(--primary);}
.footer-socials svg{width:20px;height:20px;}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:var(--s5);color:rgba(255,255,255,.55);font-size:13px;}
@media(max-width:760px){.footer-top{grid-template-columns:1fr 1fr;}.footer-logo{grid-column:1/-1;}}