/* Section 03 — TEREA by Country. Editable HTML text and arrows; separate image art assets. */
:root{--s3-ink:#0c2748;--s3-coral:#ff5b54;--s3-teal:#009c9b}
.terea-countries,.terea-countries *,.terea-countries *::before,.terea-countries *::after{box-sizing:border-box}
.terea-countries{width:100%;max-width:1440px;margin:0 auto;padding:0 5% 29px 4.25%;background:#fff;font-family:"Inter Display","Inter",Arial,Helvetica,sans-serif;color:var(--s3-ink);-webkit-font-smoothing:antialiased}
.terea-countries__heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.terea-countries h2{font-weight:900;letter-spacing:-.047em;line-height:1.08;font-size:clamp(29px,3.4vw,49px);margin:0;color:var(--s3-ink)}
.terea-countries h2 span{color:var(--s3-coral);margin-left:.13em}
.terea-countries__all{display:inline-flex;gap:7px;align-items:center;text-decoration:none;color:#00989a;font-size:clamp(11px,1.08vw,15px);font-weight:750;white-space:nowrap}
.terea-countries__all:hover{color:#01686b}
.terea-countries__all svg{width:1.18em;height:1.18em;transition:transform .2s}
.terea-countries__all:hover svg{transform:translateX(3px)}
.terea-countries__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,.9vw,13px)}
.terea-country{position:relative;isolation:isolate;display:block;min-width:0;aspect-ratio:1.105/1;max-height:245px;overflow:hidden;background:#f6ecf1;border-radius:clamp(13px,1.65vw,22px);color:var(--s3-ink);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(10,30,60,.025);container-type:inline-size;transition:transform .2s,box-shadow .2s}
.terea-country:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(12,39,72,.15)}
.terea-country:focus-visible,.terea-countries__all:focus-visible{outline:3px solid var(--s3-coral);outline-offset:4px}
.terea-country__scenery{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.terea-country__text{position:absolute;top:7%;left:8.7%;right:4%;z-index:2;display:flex;flex-direction:column;gap:4px;line-height:1.03;pointer-events:none}
.terea-country__name{font-size:clamp(19px,12.2cqi,36px);font-weight:900;letter-spacing:-.055em;white-space:nowrap;line-height:1.07}
.terea-country--kazakhstan .terea-country__name{font-size:clamp(17px,10.25cqi,32px)}
.terea-country--switzerland .terea-country__name{font-size:clamp(17px,10.5cqi,32px)}
.terea-country--indonesia .terea-country__name{font-size:clamp(19px,11.55cqi,35px)}
.terea-country__description{font-size:clamp(10px,6.62cqi,18px);line-height:1.17;letter-spacing:-.023em;font-weight:520}
.terea-country__carton{position:absolute;z-index:3;width:76%;height:auto;right:3%;bottom:1%;overflow:visible;filter:drop-shadow(0 2px 2px rgba(14,20,47,.2));pointer-events:none}
.terea-country__arrow{position:absolute;z-index:4;left:6.5%;bottom:9%;width:15.5cqi;height:15.5cqi;max-width:45px;max-height:45px;border-radius:50%;background:rgba(255,255,255,.98);color:#102a4a;display:grid;place-items:center;box-shadow:0 2px 7px rgba(11,28,42,.1);transition:transform .2s}
.terea-country__arrow svg{width:61%;height:61%}
.terea-country:hover .terea-country__arrow{transform:translateX(3px)}
.terea-countries__swipe{display:none}
@media(max-width:830px){
  .terea-countries{padding:16px 4.5% 35px}
  .terea-countries__heading{margin-bottom:19px}
  .terea-countries h2{font-size:clamp(30px,4.6vw,39px)}
  .terea-countries__all{font-size:12px}
  .terea-countries__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
  .terea-country{max-height:none;aspect-ratio:1.17/1}
  .terea-country__name{font-size:clamp(19px,11.9cqi,33px)}
}
@media(max-width:600px){
  .terea-countries{padding:18px 0 30px}
  .terea-countries__heading{padding:0 18px;margin-bottom:15px;align-items:flex-start;gap:8px;flex-wrap:wrap}
  .terea-countries h2{font-size:clamp(27px,7vw,35px)}
  .terea-countries__all{font-size:12px;margin-top:6px}
  .terea-countries__grid{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:18px;scrollbar-width:thin;padding:0 18px 14px;-webkit-overflow-scrolling:touch}
  .terea-country{flex:0 0 min(70vw,270px);max-width:270px;aspect-ratio:1.14/1;scroll-snap-align:start;border-radius:19px}
  .terea-country__name{font-size:clamp(23px,10.2cqi,31px)}
  .terea-country--kazakhstan .terea-country__name{font-size:clamp(20px,9.5cqi,28px)}
  .terea-country--switzerland .terea-country__name{font-size:clamp(20px,9.8cqi,29px)}
  .terea-country__description{font-size:clamp(12px,5.55cqi,16px)}
  .terea-country__arrow{width:15cqi;height:15cqi}
  .terea-countries__swipe{display:block;font-size:12px;text-align:center;color:#477b89;margin:0;padding:2px 12px 0;font-weight:700;letter-spacing:.01em}
  .terea-countries__swipe span{font-size:16px}
}
@media(max-width:340px){
  .terea-countries__heading{flex-direction:column;gap:3px}
  .terea-countries__all{margin:0}
  .terea-country{flex-basis:76vw}
}
@media(prefers-reduced-motion:reduce){.terea-country,.terea-country__arrow,.terea-countries__all svg{transition:none}}

/* Five country-themed generated product collages with transparent white knockouts. */
.terea-country--japan{background:linear-gradient(160deg,#ffe1d8 5%,#ffd6df 68%,#f978a0 100%)}
.terea-country--uae{background:linear-gradient(155deg,#fffabe 0%,#fff8a9 49%,#6dd8b3 100%)}
.terea-country--kazakhstan{background:linear-gradient(160deg,#c0f1fb 0%,#a8e9f5 55%,#5ac1e4 100%)}
.terea-country--indonesia{background:linear-gradient(160deg,#ffe8d6 0%,#ffdabf 64%,#b8d994 100%)}
.terea-country--switzerland{background:linear-gradient(160deg,#efd6fa 0%,#e9cbf6 55%,#ca8cda 100%)}
.terea-country__picture{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1;pointer-events:none}
.terea-country__artwork{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block;pointer-events:none}
.terea-country__text{z-index:3}
.terea-country__arrow{z-index:4}
/* Protect readable headings without adding text to the images. */
.terea-country::after{content:"";position:absolute;left:0;right:0;top:0;height:47%;z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(255,248,247,.45),rgba(255,248,247,0))}
@media(max-width:600px){.terea-country::after{height:49%}}

/* Use each card's own pastel ink-safe fade so live text stays legible over the imagery. */
.terea-country::after{height:67%;background:linear-gradient(to bottom,rgba(255,247,244,.98) 0%,rgba(255,247,244,.94) 32%,rgba(255,247,244,0) 100%)}
.terea-country--japan::after{background:linear-gradient(to bottom,#ffe2d9 0%,rgba(255,226,217,.96) 32%,rgba(255,226,217,0) 100%)}
.terea-country--uae::after{background:linear-gradient(to bottom,#fffbba 0%,rgba(255,251,186,.96) 32%,rgba(255,251,186,0) 100%)}
.terea-country--kazakhstan::after{background:linear-gradient(to bottom,#c3f1f9 0%,rgba(195,241,249,.96) 32%,rgba(195,241,249,0) 100%)}
.terea-country--indonesia::after{background:linear-gradient(to bottom,#ffe6d5 0%,rgba(255,230,213,.96) 32%,rgba(255,230,213,0) 100%)}
.terea-country--switzerland::after{background:linear-gradient(to bottom,#f1dbfa 0%,rgba(241,219,250,.96) 32%,rgba(241,219,250,0) 100%)}