/* ===== Section 1: HERO ===== */
.cra-hero{padding:clamp(36px,5vw,72px) 0 var(--space-7);position:relative}
.cra-hero__grid{
  display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;
}
.cra-hero__copy h1{
  font-family:Fraunces, serif;font-weight:900;font-size:clamp(28px,4.4vw,56px);line-height:1.05;color:var(--kiln);
  margin-bottom:12px;
}
.cra-hero__ctas{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.cra-search{display:grid;grid-template-columns:1fr auto;gap:10px;margin:16px 0 12px}

.cra-hero__gallery{
  display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:12px;
}
.cra-hero__ph--tall{grid-column:span 2}
.cra-hero__ph img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-card)}

/* Roast Spectrum */
.cra-spectrum{margin-top:16px;display:grid;gap:8px;max-width:520px}
.cra-spectrum__label{font-weight:600}
.cra-spectrum__range{
  appearance:none;width:100%;height:14px;border-radius:999px;border:2px solid var(--foam);
  background:
    linear-gradient(90deg,#f7e0c6 0%, #e6b98c 25%, #c88b53 50%, #7c4b30 75%, #3b2c25 100%);
}
.cra-spectrum__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--paper);border:3px solid var(--copper);box-shadow:var(--shadow-1);
}
.cra-spectrum__range::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--paper);border:3px solid var(--copper)
}
.cra-spectrum__hint{font-size:12px;color:#6a5f57}
.cra-spectrum__value{font-family:"IBM Plex Mono", ui-monospace;font-size:13px;color:var(--kiln)}

/* ===== Section 2: Origins ===== */
.cra-origins{padding:var(--space-7) 0}
.cra-origins__grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(4,1fr);
}
.cra-origin--lg{grid-column:span 2}
@media (max-width:900px){
  .cra-hero__grid{grid-template-columns:1fr}
  .cra-hero__ph--tall{grid-column:auto}
  .cra-origins__grid{grid-template-columns:repeat(2,1fr)}
  .cra-origin--lg{grid-column:span 2}
}
@media (max-width:600px){
  .cra-origins__grid{grid-template-columns:1fr}
}

/* ===== Section 3: Brew Pairing ===== */
.cra-brew{padding:var(--space-7) 0}
.cra-brew__grid{
  display:grid;gap:16px;grid-template-columns:repeat(3,1fr);
}
.cra-recipe{display:grid;grid-template-rows:auto 1fr;background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-1);overflow:hidden}
.cra-recipe__media{aspect-ratio:4/3;background:var(--foam)}
.cra-recipe__body{padding:14px 14px 16px}
.cra-recipe__title{font-weight:700;color:var(--kiln)}
.cra-metrics{display:grid;grid-template-columns:repeat(3,auto);gap:12px 16px;margin:10px 0}
.cra-metrics dt{font-size:12px;color:#6a5f57}
.cra-metrics dd{margin:0}
.cra-metrics code{font-family:"IBM Plex Mono", ui-monospace;font-weight:600}

@media (max-width:900px){
  .cra-brew__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .cra-brew__grid{grid-template-columns:1fr}
}

/* Brew Pair Ring */
.cra-brew-ring{margin-top:18px;display:grid;gap:12px;justify-items:center}
.cra-ring{width:220px;height:220px}
.cra-ring__bg{fill:transparent;stroke:color-mix(in oklab, var(--foam) 60%, transparent);stroke-width:12}
.cra-ring__seg{fill:color-mix(in oklab, var(--leaf) 20%, transparent);transition:opacity .18s cubic-bezier(.2,.7,0,1)}
.cra-ring__seg.is-active{fill:var(--leaf)}
.cra-ring__controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.cra-chip{padding:8px 12px;border-radius:999px;border:2px solid var(--leaf);background:transparent}
.cra-chip[aria-pressed="true"]{background:var(--leaf);color:var(--paper)}

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .cra-card,.cra-btn,.cra-ring__seg{transition:none}
}
/* было: .cra-btn, .cra-btn:visited { ... } */
.cra-btn{
  -webkit-appearance:none;
  appearance:none;
  background:transparent;        /* важно: убираем светлый фон браузера */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:2px solid var(--copper);
  color:var(--kiln);
  text-decoration:none;
}
.cra-btn:hover{
  box-shadow:0 0 0 3px color-mix(in oklab, var(--copper) 35%, transparent);
}
/* ===== Section 4: Atlas teaser ===== */
.cra-atlas{padding:var(--space-7) 0}
.cra-atlas__grid{
  display:grid;gap:18px;
  grid-template-columns:1.3fr .7fr;
  align-items:start;
}
.cra-atlas__map{
  position:relative;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-1);
  background:linear-gradient(180deg, color-mix(in oklab, var(--foam) 35%, transparent), transparent 60%), var(--paper);
  padding:12px;
}
.cra-map{width:100%;aspect-ratio:16/9;display:block}
.cra-land{fill:color-mix(in oklab, var(--leaf) 18%, transparent);stroke:color-mix(in oklab, var(--leaf) 50%, transparent);stroke-width:1.5}

/* Pins */
.cra-pin{
  position:absolute;width:16px;height:16px;border-radius:50%;
  background:var(--copper);box-shadow:0 0 0 3px color-mix(in oklab, var(--copper) 30%, transparent);
  border:2px solid var(--paper);cursor:pointer;transition:transform .16s, box-shadow .16s;
}
.cra-pin:focus-visible{outline:3px solid color-mix(in oklab, var(--leaf) 70%, transparent);outline-offset:2px}
.cra-pin:hover{transform:scale(1.06)}
/* pin positions (relative to .cra-atlas__map) */
.cra-pin--na{top:22%;left:22%}
.cra-pin--sa{top:58%;left:32%}
.cra-pin--eu{top:28%;left:54%}
.cra-pin--af{top:48%;left:53%}
.cra-pin--as{top:34%;left:70%}
.cra-pin--oc{top:66%;left:82%}

.cra-atlas__aside{display:grid;gap:12px}
.cra-stats{
  background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-1);padding:14px 14px 16px;
}
.cra-stats__title{font-weight:700;color:var(--kiln);margin-bottom:4px}
.cra-stats__region{color:#6a5f57}
.cra-stats__dl{display:grid;grid-template-columns:repeat(2,auto);gap:10px 16px;margin:10px 0 14px}
.cra-mini-gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cra-mini{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}

@media (max-width: 900px){
  .cra-atlas__grid{grid-template-columns:1fr}
}

/* ===== Section 5: Spotlight roasters ===== */
.cra-spot{padding:var(--space-7) 0}
.cra-spot__grid{
  display:grid;gap:16px;grid-template-columns:repeat(3,1fr);
}
.cra-spot__card{display:grid;grid-template-rows:auto 1fr;background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-1);overflow:hidden}
.cra-spot__media{aspect-ratio:4/3;background:var(--foam)}
.cra-spot__body{padding:14px 14px 16px}
.cra-spot__title{font-weight:700;color:var(--kiln)}
.cra-spot__meta{color:#6a5f57;margin-top:2px}
.cra-spot__actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}

@media (max-width: 900px){
  .cra-spot__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 600px){
  .cra-spot__grid{grid-template-columns:1fr}
}

/* Compare bar */
.cra-comparebar{
  margin-top:12px;padding:12px 14px;border-radius:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:color-mix(in oklab, var(--foam) 30%, transparent);border:1px solid color-mix(in oklab, var(--foam) 70%, transparent);
}
.cra-comparebar__txt{margin:0}

/* ===== Section 6: Processing methods ===== */
.cra-process{padding:var(--space-7) 0}
.cra-process__grid{
  display:grid;gap:16px;grid-template-columns:2fr 1fr 1fr;
}
.cra-proc{display:grid;grid-template-rows:auto 1fr;background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-1);overflow:hidden}
.cra-proc--lg{grid-column:span 1}
.cra-proc--flat{box-shadow:none;border:2px dashed color-mix(in oklab, var(--leaf) 35%, transparent)}
.cra-proc__media{aspect-ratio:4/3;background:var(--foam)}
.cra-proc__body{padding:14px 14px 16px}
.cra-proc__pair{margin-top:6px;color:#6a5f57}

@media (max-width: 900px){
  .cra-process__grid{grid-template-columns:1fr}
}
/* ===== Section 7: Flavor notes ===== */
.cra-notes{padding:var(--space-7) 0}
.cra-notes__grid{
  display:grid;gap:16px;grid-template-columns:repeat(3,1fr);
}
.cra-note{
  display:grid;grid-template-rows:auto 1fr;background:var(--paper);border-radius:var(--radius-card);
  box-shadow:var(--shadow-1);overflow:hidden
}
.cra-note__media{aspect-ratio:4/3;background:var(--foam)}
.cra-note__body{padding:14px 14px 16px}
.cra-note h3{font-weight:700;color:var(--kiln);margin-bottom:6px}

/* mini flavor wheel */
.cra-wheel{width:60px;height:60px;margin:4px 0 8px}
.cra-wheel svg{width:100%;height:100%}
.w-bg{fill:transparent;stroke:color-mix(in oklab, var(--foam) 60%, transparent);stroke-width:4}
.w-seg{fill:color-mix(in oklab, var(--leaf) 20%, transparent)}
.w-seg--citrus{fill:color-mix(in oklab, #ffb84d 55%, var(--leaf) 10%)}
.w-seg--floral{fill:color-mix(in oklab, #ff8ad6 45%, var(--leaf) 10%)}
.w-seg--choc{fill:color-mix(in oklab, #6b4b3a 60%, var(--leaf) 10%)}
.w-seg--caramel{fill:color-mix(in oklab, #c68b59 60%, var(--leaf) 10%)}
.w-seg--berry{fill:color-mix(in oklab, #a83a6f 55%, var(--leaf) 10%)}
.w-seg--sweet{fill:color-mix(in oklab, #e06a6a 55%, var(--leaf) 10%)}
.w-seg--other{fill:color-mix(in oklab, var(--leaf) 18%, transparent)}

@media (max-width: 900px){
  .cra-notes__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 600px){
  .cra-notes__grid{grid-template-columns:1fr}
}

/* ===== Section 8: Shipping ===== */
.cra-ship{padding:var(--space-7) 0}
.cra-ship__grid{display:grid;gap:18px;grid-template-columns:1fr .9fr;align-items:start}
.cra-ship__gallery{display:grid;gap:12px}
.cra-ship__ph{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
.cra-checks{display:grid;gap:8px;margin:8px 0 12px}
.cra-checks li{display:flex;gap:8px;align-items:flex-start}
.check-ico{width:18px;height:18px;border-radius:50%;display:inline-block;background:radial-gradient(circle at 30% 30%, var(--leaf) 0 40%, transparent 41%), conic-gradient(var(--leaf) 0 75%, transparent 75% 100%);box-shadow:inset 0 0 0 2px color-mix(in oklab, var(--leaf) 55%, transparent)}
@media (max-width: 900px){
  .cra-ship__grid{grid-template-columns:1fr}
}

/* ===== Section 9: Reviews ===== */
.cra-reviews{padding:var(--space-7) 0}
.cra-rev__list{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.cra-rev{
  display:grid;gap:10px;align-content:start;background:var(--paper);border-radius:var(--radius-card);
  box-shadow:var(--shadow-1);padding:14px 14px 16px
}
.cra-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--foam)}
.cra-avatar img{width:100%;height:100%;object-fit:cover}
.cra-crema{
  --p:.8;
  width:56px;height:56px;border-radius:50%;
  background:
    radial-gradient(circle 18px at 50% 50%, color-mix(in oklab, var(--kiln) 14%, transparent) 0 48%, transparent 49% 100%),
    conic-gradient(var(--copper) calc(var(--p)*1turn), color-mix(in oklab, var(--foam) 60%, transparent) 0);
  border:2px solid color-mix(in oklab, var(--foam) 70%, transparent);
}
.cra-crema--90{--p:.90}
.cra-crema--85{--p:.85}
.cra-crema--78{--p:.78}
.cra-rev blockquote{margin:0;color:#4a3e36}
.cra-rev cite{font-style:normal;color:#6a5f57}

@media (max-width: 900px){
  .cra-rev__list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 600px){
  .cra-rev__list{grid-template-columns:1fr}
}
/* ===== Section 10: Taste profile ===== */
.cra-profile{padding:var(--space-7) 0}
.cra-profile__grid{
  display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start;
}
.cra-group{display:grid;gap:8px;margin:10px 0}
.cra-group legend{font-weight:700;color:var(--kiln)}
.cra-chips{display:flex;flex-wrap:wrap;gap:8px}
.cra-prof-range{display:grid;gap:6px;max-width:520px}
.cra-prof__value{font-family:"IBM Plex Mono", ui-monospace;font-size:13px;color:var(--kiln)}
.cra-profile__actions{display:flex;gap:12px;align-items:center;margin-top:8px}
.cra-profile__count{font-size:13px;color:#6a5f57}
.cra-profile__gallery{display:grid;gap:12px}
.cra-profile__ph{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}

@media (max-width: 900px){
  .cra-profile__grid{grid-template-columns:1fr}
}

/* ===== Section 11: Label decoder ===== */
.cra-label{padding:var(--space-7) 0}
.cra-label__grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.cra-label__card{display:grid;grid-template-rows:auto 1fr;background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-1);overflow:hidden}
.cra-label__media{aspect-ratio:4/3;background:var(--foam)}
.cra-label__body{padding:14px 14px 16px}
.cra-label__body h3{font-weight:700;color:var(--kiln)}
.cra-list{display:grid;gap:6px;margin:8px 0 0;color:#4a3e36}
@media (max-width: 900px){
  .cra-label__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 600px){
  .cra-label__grid{grid-template-columns:1fr}
}

/* ===== Section 12: Events ===== */
.cra-events{padding:var(--space-7) 0}
.cra-events__list{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.cra-event{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:start;background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-1);padding:12px}
.cra-event__media{width:140px;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--foam)}
.cra-event__body{display:grid;gap:6px}
.cra-event__title{font-weight:700;color:var(--kiln)}
.cra-event__meta{color:#6a5f57;font-size:14px}
.cra-event__desc{color:#4a3e36}

@media (max-width: 900px){
  .cra-events__list{grid-template-columns:1fr}
  .cra-event{grid-template-columns:100px 1fr}
  .cra-event__media{width:100px}
}
/* ===== Section 13: Water ===== */
.cra-water{padding:var(--space-7) 0}
.cra-water__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.cra-water__ctrl{display:grid;gap:6px;max-width:520px;margin:6px 0 10px}
.cra-water__out{font-family:"IBM Plex Mono", ui-monospace;font-size:13px;color:var(--kiln)}
.cra-water__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cra-water__ph{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
@media (max-width:900px){
  .cra-water__grid{grid-template-columns:1fr}
}

/* ===== Section 14: Tools ===== */
.cra-tools{padding:var(--space-7) 0}
.cra-tools__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.cra-tools__gallery{display:grid;gap:12px}
.cra-tools__ph{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
@media (max-width:900px){
  .cra-tools__grid{grid-template-columns:1fr}
}

/* ===== Section 15: Timeline ===== */
.cra-chain{padding:var(--space-7) 0}
.cra-chain__wrap{display:grid;gap:12px}
.cra-chain__rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(85%,380px);gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;
}
.cra-step{
  scroll-snap-align:center;background:var(--paper);border-radius:var(--radius-card);
  box-shadow:var(--shadow-1);overflow:hidden;display:grid;grid-template-rows:auto 1fr;
}
.cra-step__media{aspect-ratio:4/3;background:var(--foam)}
.cra-step__body{padding:14px 14px 16px}
.cra-chain__nav{display:flex;gap:10px;justify-content:center}
@media (max-width:600px){
  .cra-chain__rail{grid-auto-columns:85%}
}

/* ===== Section 16: Join ===== */
.cra-join{padding:var(--space-7) 0}
.cra-join__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.cra-join__form{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:520px}
.cra-join__note{margin-top:8px;color:#6a5f57}
.cra-join__gallery{display:grid;gap:12px}
.cra-join__ph{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
@media (max-width:900px){
  .cra-join__grid{grid-template-columns:1fr}
}
/* === Home: hero gallery fix === */
.home-hero__grid,
.cra-hero__grid { /* если у тебя другой класс сетки — оба селектора подстраховывают */
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: center;
}

/* сетка картинок справа */
.home-hero__gallery,
.cra-hero__gallery{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;                 /* устраняет “слипание” и чёрную полоску */
  align-items: stretch;
}

/* карточки-носители изображений */
.home-hero__ph,
.cra-hero__ph{
  background: var(--foam);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* верхние две — портретные, нижняя — широкая */
.home-hero__ph:not(.home-hero__ph--wide):not(.home-hero__ph--tall),
.cra-hero__ph:not(.cra-hero__ph--wide):not(.cra-hero__ph--tall){
  aspect-ratio: 3 / 4;
}
.home-hero__ph.home-hero__ph--wide,
.home-hero__ph.home-hero__ph--tall,
.cra-hero__ph.cra-hero__ph--wide,
.cra-hero__ph.cra-hero__ph--tall{
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

/* сами изображения — заполняют контейнер без искажений */
.home-hero__ph > img,
.cra-hero__ph > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* адаптив */
@media (max-width: 900px){
  .home-hero__grid, .cra-hero__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  /* чуть более приземистые, чтобы не были "башнями" на мобилке */
  .home-hero__ph:not(.home-hero__ph--wide):not(.home-hero__ph--tall),
  .cra-hero__ph:not(.cra-hero__ph--wide):not(.cra-hero__ph--tall){
    aspect-ratio: 4 / 5;
  }
}

/* === Универсальный безопасный фит для всех медиа-блоков страницы === */
figure[class*="__ph"] > img,
figure[class*="__media"] > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
figure[class*="__ph"],
figure[class*="__media"]{
  background: var(--foam);
  border-radius: var(--radius-card);
  overflow: hidden;
}