/* ============================================================
   Cho Cho Industry (CCI) — Global Export page styles
   Loads AFTER css/styles.css and reuses its tokens/components:
   .wrap .section .eyebrow .h2 .ln
   Moved out of css/our-heritage.css when the Global Export
   section became its own page.
   All font-size values are even px per site convention.
   ============================================================ */

/* Shin Shin's light corporate blue. shin-shin.css owns this value but is not
   loaded on this page, so the one token it needs is restated here. */
:root{--ss-blue:#3f7fd6}

/* ============================================================
   BREADCRUMB — simple bar under the navbar
   (identical to css/news.css — same pixels/margins/padding)
   ============================================================ */
.crumbs{background:#fff}
.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:var(--ink-soft);font-weight:500;flex:none;transition:.15s}
.crumbs a:hover{color:var(--cci-blue)}
.crumbs__sep{color:var(--silver);flex:none}
.crumbs__current{color:var(--cci-blue);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   GLOBAL EXPORT — export markets, image (left) + copy (right)
   ============================================================ */
/* the breadcrumb bar now sits above this section, so the full-viewport
   target subtracts it as well as the navbar */
.roots{min-height:calc(100vh - var(--nav-h) - 48px);display:flex;flex-direction:column;
  justify-content:center;padding:64px 0}
/* align-items:stretch so the map panel matches the copy column's height */
.roots__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,4vw,56px);
  align-items:stretch}
/* the photo fills the frame edge to edge — no padding, no drop shadow.
   The <img> is absolutely positioned so its (very tall) intrinsic size can't
   drive the grid row: the panel takes its height from the copy column beside
   it and the photo covers whatever that turns out to be. */
.roots__media{position:relative;align-self:stretch;overflow:hidden;
  border-radius:var(--r);
  background:linear-gradient(160deg,#eef4fb 0%,#e3f1f4 55%,#eaf6f6 100%)}
.roots__media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  border-radius:0;box-shadow:none;display:block}
.roots__text .eyebrow{margin-bottom:12px}
.roots__text h2{margin-bottom:18px}
.roots__text p{color:var(--ink-soft);font-size:16px;line-height:1.75;margin:0 0 18px}
/* 7 markets on a 4-column grid → 4 chips on the top row, 3 on the bottom.
   max-content keeps each chip its natural width instead of stretching. */
.roots__markets{display:grid;grid-template-columns:repeat(4,max-content);
  justify-content:start;gap:10px;margin:6px 0 28px}
/* inline-flex + line-height:1 optically centres the label in the capsule —
   padding alone left it sitting high because of DM Sans's line box */
.chip{display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:0 18px;line-height:1;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:14px;color:var(--cci-blue);
  background:var(--cci-blue-50);border-radius:100px}
.roots__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding-top:26px;border-top:1px solid var(--line)}
/* scaled up so the three figures carry the full width of the rule above them */
.rstat__num{display:block;font-family:"DM Sans",sans-serif;font-weight:700;
  font-size:clamp(30px,3.2vw,44px);line-height:1.05;letter-spacing:-.02em;
  color:var(--cci-blue);white-space:nowrap}
.rstat__num em{color:var(--gold);font-style:normal}
.rstat__lbl{display:block;margin-top:6px;font-size:15px;color:var(--ink-soft);font-weight:500}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  /* the grid stacks here, so the copy column grows to ~905px and the authored
     lines leave 250-630px of dead space beside them. Flow them back into a
     paragraph; only the heading keeps its break — two lines reads as a heading
     at any width. */
  .roots__text p .ln{display:inline;text-wrap:pretty}
  .roots__grid{grid-template-columns:1fr}
  /* stacked: nothing beside it to take a height from, so give the frame its
     own ratio (the photo is absolutely positioned and would collapse to 0) */
  .roots__media{order:-1;aspect-ratio:4/3}
}

@media (max-width:720px){
  /* one-screen-per-section is a desktop pattern — on mobile let the section
     size to its own content instead of forcing a full-viewport gap */
  .roots{min-height:0}
  .roots__stats{grid-template-columns:1fr;gap:14px}
  /* four chips per row won't fit a phone — two per row instead */
  .roots__markets{grid-template-columns:repeat(2,max-content)}
}

/* ============================================================
   COUNTRY MARKETS — one block per export market, photo
   alternating left/right down the page.
   Deliberately reuses the #roots geometry: same two-column grid,
   same column ratio, same gap, same absolutely-positioned photo
   inside a radius-clipped panel, so the seven blocks read as
   continuations of the section above rather than a new module.
   All font-size values are even px per site convention, except
   where a token (--r) or clamp() is inherited from styles.css.
   ============================================================ */
/* the section's own bottom padding would double up with the first band's, so
   the bands own all the vertical rhythm below the head */
.markets{padding-bottom:0}
.markets__head{max-width:760px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.markets__head p{color:var(--ink-soft);font-size:16px;line-height:1.75;margin:0;
  text-wrap:pretty}

/* full-bleed ground behind each market. The band is edge to edge; the .wrap
   grid inside it keeps the content on the same 1320px column as #roots.
   Padding (not margin) so the tint covers the gap between markets. */
.mkt-band{padding:clamp(48px,5.5vw,76px) 0}
.mkt-band--tint{background:var(--cci-blue-50)}

/* .wrap is on the block itself, so the grid IS the wrapper — this keeps each
   market aligned to the same 1320px column as #roots without an extra div. */
.mkt{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,4vw,56px);
  align-items:stretch}
/* default = photo left. --flip moves the media panel to column 2 (Myanmar,
   Thailand, China, United States), producing the zig-zag. order works here
   because both children are direct grid items in source order. */
.mkt--flip .mkt__media{order:2}

/* identical treatment to .roots__media: the photo is absolutely positioned so
   its intrinsic height can't drive the row — the panel takes its height from
   the copy column beside it. min-height guards the short blocks. */
.mkt__media{position:relative;align-self:stretch;overflow:hidden;
  border-radius:var(--r);min-height:340px;
  background:linear-gradient(160deg,#eef4fb 0%,#e3f1f4 55%,#eaf6f6 100%)}
.mkt__media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block}
/* a missing photo leaves the gradient panel rather than a broken-image icon */
.mkt__media img.ph{display:none}

.mkt__text{align-self:center;min-width:0}
/* grid, not flex: the flag has to sit on the same row as the country name,
   not centre itself against the index label and the name together — a flex
   row would float it between the two lines. Column 1 is the flag, column 2
   carries the index label above the name; the flag lives in row 2 so it
   centres on the name itself. */
.mkt__head{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;column-gap:16px;margin-bottom:14px}
/* the flag PNGs already carry a circular alpha edge; the disc here is what
   the hairline ring and shadow follow, and it also guards against a
   replacement image that isn't pre-cut. The ring keeps the pale flags
   (Japan, Singapore, Korea) from dissolving into a white band. */
.mkt__flag{grid-column:1;grid-row:2;display:block;width:46px;height:46px;border-radius:50%;
  overflow:hidden;background:var(--white);
  box-shadow:0 0 0 1px rgba(21,21,27,.10),var(--shadow-sm)}
.mkt__flag img{display:block;width:100%;height:100%;object-fit:cover}
.mkt__index{grid-column:2;grid-row:1;display:block;font-family:"DM Sans",sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px}
.mkt__name{grid-column:2;grid-row:2;font-size:clamp(28px,3vw,40px);font-weight:700;color:var(--cci-blue);
  margin-bottom:0}
.mkt__lede{color:var(--ink-soft);font-size:16px;line-height:1.75;margin:0 0 26px;
  text-wrap:pretty}

/* the channel list is the point of these blocks, so it gets a ruled table feel:
   hairlines top and bottom of every row, a small gold dot as the marker. */
.mkt__ch-title{font-family:"DM Sans",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  margin:0 0 2px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mkt__ch-list{list-style:none;margin:0;padding:0}
/* block, not flex: the <b> label and the description that follows it are
   siblings in one text flow, so they must wrap as one paragraph — a flex row
   would make the label its own column and break the line awkwardly on
   narrow screens. The dot is positioned out of the flow instead. */
.mkt__ch-list li{position:relative;padding:12px 0 12px 18px;
  border-bottom:1px solid var(--line);font-size:15px;line-height:1.6;
  color:var(--ink-soft);text-wrap:pretty}
.mkt__ch-list li::before{content:"";position:absolute;left:0;
  top:calc(12px + .8em - 3px);width:6px;height:6px;
  border-radius:50%;background:var(--gold-soft)}
.mkt__ch-list li b{font-weight:600;color:var(--ink)}

/* markets we haven't opened yet keep the channel title but have nothing to
   list under it, so the status line itself fills that slot — set large and in
   the Shin Shin blue so the empty section reads as deliberate rather than as
   missing content. No rule of its own: the title above already draws one. */
.mkt__soon{font-family:"DM Sans",sans-serif;font-weight:700;
  font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:.01em;
  color:var(--ss-blue);margin:0;padding-top:20px}

/* online marketplaces, sitting under the channel list. White capsules so they
   read the same on the tinted bands as on the white ones. */
.mkt__plat{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
.mkt__plat-lbl{font-family:"DM Sans",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--silver)}
.plat{display:inline-flex;align-items:center;gap:8px;min-height:38px;
  padding:0 16px 0 8px;border:1px solid var(--line);border-radius:100px;
  background:var(--white);font-family:"DM Sans",sans-serif;font-weight:600;
  font-size:14px;line-height:1;color:var(--ink)}
/* the brand marks have their own silhouettes and aspect ratios (Shopee's
   bag is taller than wide), so contain rather than crop them */
.plat__ico{flex:none;width:22px;height:22px;display:block;object-fit:contain}
/* Shopee's mark is a solid filled bag that fills its whole box, so at a
   matched box size it reads noticeably heavier than Lazada's. Size it down
   to even the two out optically rather than mathematically. */
.plat__ico--shopee{width:18px;height:18px}
/* some platforms ship a wordmark rather than a glyph — the logo is the label,
   so the capsule loses the text and takes even padding on both sides */
.plat--logo{padding:0 16px}
.plat__logo{flex:none;height:15px!important;width:auto;display:block}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  /* same breakpoint as .roots__grid so both stack together */
  .mkt{grid-template-columns:1fr}
  /* stacked: the photo always leads, and the panel needs its own ratio because
     the absolutely-positioned <img> would otherwise collapse it to zero */
  .mkt__media,.mkt--flip .mkt__media{order:-1;aspect-ratio:4/3;min-height:0}
}

@media (max-width:720px){
  .markets__head{margin-bottom:36px}
  .mkt-band{padding:40px 0}
  .mkt{gap:24px}
  .mkt__head{gap:12px}
  .mkt__flag{width:38px;height:38px}
  .mkt__plat{gap:8px;margin-top:18px}
  .mkt__lede{font-size:15px;margin-bottom:22px}
  .mkt__ch-list li{font-size:14px}
}