/* ============================================================
   Cho Cho Industry (CCI) — Contact page styles
   Loads AFTER css/styles.css and reuses its tokens/components:
   .wrap .section .eyebrow .h2 .btn .link-arrow .tag
   .contact__grid .contact__info .contact__list .contact__form .field
   ============================================================ */

/* ============================================================
   BREADCRUMB — same LAYOUT as css/news-article.css (height/gap/font/
   wrap padding & position). The default blue bar is kept for any page that
   still uses it; on this page the crumbs ride ON TOP of the banner artwork
   (.crumbs--overlay-gold), whose cream top-left corner takes the brown/gold
   text of the Cho's Kitchen palette.
   ============================================================ */
.crumbs{background:linear-gradient(180deg,var(--cci-blue-700) 0%,var(--cci-blue) 100%)}
.crumbs__inner{display:flex;align-items:center;gap:8px;height:48px;
  font-family:"DM Sans",sans-serif;font-size:14px;white-space:nowrap;overflow:hidden}
.crumbs a{color:rgba(255,255,255,.72);font-weight:500;flex:none;transition:.15s}
.crumbs a:hover{color:#fff}
.crumbs__sep{color:rgba(255,255,255,.42);flex:none}
.crumbs__current{color:var(--gold-soft);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis}

/* overlay variant — transparent bar sitting over the banner */
.crumbs--overlay-gold{position:absolute;top:0;left:0;right:0;z-index:5;
  background:transparent}
.crumbs--overlay-gold a{color:var(--ck-brown-mid,#674921)}
.crumbs--overlay-gold a:hover{color:var(--ck-brown-deep,#2e2112)}
.crumbs--overlay-gold .crumbs__sep{color:var(--ck-gold,#c9a227)}
.crumbs--overlay-gold .crumbs__current{color:var(--ck-gold-bright,#e3a50e)}

/* ============================================================
   PAGE BANNER — full-bleed artwork; the title / strapline are part of the
   artwork itself, so there is no text layer and no scrim over it.
   Heights match the live site: 550 / 260 / 170 with a center-top crop.
   ============================================================ */
.chero{position:relative;overflow:hidden;min-height:550px;background:var(--cci-blue)}
/* BANNER — full-bleed photography (change the file in contact.html) */
.chero__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:center top}

/* ============================================================
   ENQUIRY — info + form (grid comes from styles.css .contact__grid)
   ============================================================ */
.contact__list strong{font-family:"DM Sans",sans-serif;color:var(--ink)}
.contact__list a:hover{color:var(--cci-blue)}

/* brand-separated social — Cho Cho Industry gets its own contact__list
   row; Cho's Kitchen and ShinShin share the row after it as two columns
   (own title, own icons), all in the CCI brand blue */
.social-row{display:inline-flex;gap:8px;margin-top:8px}
.social-row a{width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.social-row svg{width:17px;height:17px;fill:#fff}
.social-row .ig{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.social-row .ig .dot{fill:#fff;stroke:none}
.social-row--blue a{background:var(--cci-blue)}
.social-row--blue a:hover{background:var(--cci-blue-700);transform:translateY(-2px)}

/* two brand columns sharing one contact__list row */
.social-cols{display:flex;gap:32px;flex-wrap:wrap}
.social-col{display:flex;flex-direction:column}

/* ============================================================
   LOCATIONS — address cards + embedded map
   ============================================================ */
/* intro: one sentence per line (each still wraps naturally on small screens) */
.lead-center--lines span{display:block}
.lead-center--lines span+span{margin-top:4px}

/* cards (left) + map (right) */
.loc-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:stretch}
.loc-list{display:flex;flex-direction:column;gap:20px}
.loc{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 28px;transition:.25s;flex:1;
}
.loc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--cci-blue-500)}
/* the card whose pin the map is showing */
.loc.is-active{border-color:var(--cci-blue-500);box-shadow:var(--shadow-sm)}
.loc h3{font-size:20px;margin-top:4px}
.loc p{color:var(--ink-soft);font-size:16px;margin:0;flex:1}
.loc .link-arrow{margin-top:8px}

/* embedded Google Map — Head Office, stretches to the card column height */
.map{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  background:#fff;min-height:440px;
}
.map iframe{display:block;width:100%;flex:1 1 auto;min-height:400px;border:0}
/* CTA is a footer strip UNDER the map (not floating over the iframe) so it
   can never overlap Google's own on-map controls / marker */
.map__open{position:static;margin:0;width:100%;justify-content:center;
  border-radius:0;box-shadow:none;padding:16px 24px;border-top:1px solid var(--line)}

/* ============================================================
   CTA BANNER — Moneta-style card on CCI blue + stacked packs
   ============================================================ */
.cta{padding:0 0 108px}
.cta__inner{
  position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;
  background:var(--cci-blue);border-radius:var(--r);padding:64px;
  overflow:hidden;box-shadow:var(--shadow);
}
/* soft gold glow behind the packs, like the ref's texture */
.cta__inner::before{content:"";position:absolute;right:-120px;top:-140px;
  width:460px;height:460px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(231,199,90,.25),transparent 72%)}
.cta__text{position:relative;z-index:1}
.cta__text .h2{margin-bottom:16px}
.cta__text .h2 em{font-style:italic;color:var(--gold-soft)}
/* the word "CCI" in the heading is set as the logo itself. Sizing in em locks
   it to the heading's clamped font-size at every breakpoint, and the negative
   vertical-align drops it onto the baseline of the italic words either side.
   cci-logo-outline.png is the white-outlined mark — the flat blue logo would
   disappear into the CTA's blue panel. */
.cta__title-logo{display:inline-block;width:auto;height:1.05em;max-height:none;
  margin:0 .12em;vertical-align:-.12em;object-fit:contain}
.cta__text p{color:rgba(255,255,255,.85);font-size:16px;max-width:420px;margin:0 0 30px}

/* flat geometric decor — burst-section style blocks, static (no animation) */
.cta__decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.cd{position:absolute}
.cd--dots{right:2%;bottom:12%;width:clamp(92px,10vw,132px);height:clamp(60px,7vw,90px);
  background-image:radial-gradient(var(--gold-soft) 2.3px,transparent 2.5px);
  background-size:18px 18px}
.cd--ring{left:46%;bottom:10%;width:clamp(40px,5vw,68px);height:clamp(40px,5vw,68px);
  border:6px solid var(--gold-soft);border-radius:50%}

/* noodle packs — overlapping fan, kept inside the card */
.cta__packs{position:relative;z-index:1;min-height:260px}
.pk{position:absolute;width:52%;height:auto;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.32))}
.pk--1{left:0;bottom:4%;transform:rotate(-12deg);z-index:1}
.pk--2{left:24%;bottom:8%;transform:rotate(3deg);z-index:2}
.pk--3{left:48%;bottom:2%;transform:rotate(13deg);z-index:3}

/* ============================================================
   RESPONSIVE — same breakpoints as styles.css
   ============================================================ */
@media (max-width:1100px){
  .loc-layout{grid-template-columns:1fr}
  .map{min-height:360px}
  .cta__inner{padding:48px}
}
/* tablet & down — the banner keeps its centre, it just gets shorter */
@media (max-width:1024px){
  .chero{min-height:260px}
}
@media (max-width:767px){
  .chero{min-height:170px}
}
@media (max-width:720px){
  .map,.map iframe{min-height:320px}
  .map__open{padding:13px 20px;font-size:14px}
  .cta{padding:0 0 68px}
  .cta__inner{grid-template-columns:1fr;padding:36px 28px 0;gap:20px}
  .cta__packs{min-height:220px;margin-top:8px}
  .pk{width:52%}
  /* hide decor that would sit under the text on small screens */
  .cd--ring{display:none}
}