/* ===== S1: Editorial hero ===== */
.gd-hero{padding:clamp(32px,5vw,64px) 0 var(--space-7)}
.gd-hero__grid{display:grid;gap:18px;grid-template-columns:1.2fr .8fr;align-items:start}
.gd-cover h1{font-family:Fraunces,serif;font-weight:900;font-size:clamp(30px,4.2vw,50px);line-height:1.05;color:var(--kiln);margin-bottom:8px}
.gd-search{display:grid;grid-template-columns:1fr auto;gap:10px;margin:14px 0 10px}
.gd-tags{display:flex;gap:8px;flex-wrap:wrap}
.gd-film{display:grid;gap:10px;grid-template-columns:1fr 1fr;align-content:start}
.gd-frame{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
.gd-frame--tall{grid-column:1/-1;aspect-ratio:16/10}
.gd-frame img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.gd-hero__grid{grid-template-columns:1fr}}

/* ===== S2: Ratios & grind cues ===== */
.gd-ratios{padding:var(--space-7) 0}
.gd-ratios__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.gd-scale{display:grid;gap:6px;max-width:520px;margin:8px 0}
.gd-scale__label{font-weight:700;color:var(--kiln)}
.gd-scale__out{font-family:"IBM Plex Mono",ui-monospace;font-size:13px;color:#6a5f57}
.gd-cues{display:grid;gap:6px;margin-top:10px}
.gd-ratios__aside{display:grid;gap:10px}
.gd-shot{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
@media (max-width:900px){.gd-ratios__grid{grid-template-columns:1fr}}

/* ===== S3: Methods index ===== */
.gd-methods{padding:var(--space-7) 0}
.gd-list{display:grid;gap:16px}
.gd-item{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:start;background:var(--paper);border-radius:14px;box-shadow:var(--shadow-1);padding:14px}
.gd-item:nth-child(even){grid-template-columns:.9fr 1.1fr}
.gd-item__ph{aspect-ratio:4/3;background:var(--foam);border-radius:12px;overflow:hidden}
.gd-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.gd-steps{border-top:1px dashed color-mix(in oklab, var(--foam) 65%, transparent);margin-top:10px;padding-top:10px}
.gd-steps__list{display:grid;gap:6px;margin:0}
@media (max-width:900px){.gd-item,.gd-item:nth-child(even){grid-template-columns:1fr}}

/* ===== S4 Pairing playbook ===== */
.gd-pair{padding:var(--space-7) 0}
.gd-pair__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.gd-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.gd-tab{appearance:none;border:2px solid color-mix(in oklab, var(--foam) 70%, transparent);background:transparent;color:var(--kiln);border-radius:999px;padding:8px 12px;font-weight:600;cursor:pointer}
.gd-tab[aria-selected="true"]{background:var(--leaf);border-color:color-mix(in oklab, var(--leaf) 70%, transparent);color:var(--on-accent)}
.gd-panels{margin-top:8px}
.gd-pairs{display:grid;gap:6px;margin:0}
.gd-pair__gallery{
  display:grid; gap:10px;
  grid-template-columns:2fr 1fr; grid-template-rows:auto auto;
  grid-template-areas:"a b" "a c";
}
.gd-pair__ph{background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
.gd-pair__ph--a{grid-area:a; aspect-ratio:16/11}
.gd-pair__ph--b{grid-area:b; aspect-ratio:4/3}
.gd-pair__ph--c{grid-area:c; aspect-ratio:4/3}
.gd-pair__ph img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.gd-pair__grid{grid-template-columns:1fr}}

/* ===== S5 Milk drinks map ===== */
.gd-milk{padding:var(--space-7) 0}
.gd-milk__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.milk-scale{
  position:relative; height:110px; border-radius:14px;
  background:linear-gradient(90deg,#e7efe9,#d9e8df 20%,#c6e0d3 40%,#b6d8c8 60%,#a7d0bd 80%,#9ac9b3);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--foam) 65%, transparent); margin:8px 0 10px;
}
.milk-stops{position:absolute;inset:6px 10px;display:grid;grid-template-columns:repeat(6,1fr);align-items:end;gap:8px;margin:0}
.milk-stops li{background:var(--paper);border-radius:10px;box-shadow:var(--shadow-1);padding:8px 10px;text-align:center}
.milk-stops b{display:block;color:var(--kiln)}
.milk-stops small{color:#6a5f57}
.gd-notes{display:grid;gap:6px;margin-top:8px}
.gd-milk__aside{display:grid;gap:12px}
.gd-milk__ph{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
@media (max-width:900px){.gd-milk__grid{grid-template-columns:1fr}}

/* ===== S6 Troubleshooting ===== */
.gd-trouble{padding:var(--space-7) 0}
.gd-trouble__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.gd-acc{background:var(--paper);border-radius:14px;box-shadow:var(--shadow-1);padding:12px;margin-bottom:10px}
.gd-acc > summary{cursor:pointer;font-weight:700;color:var(--kiln)}
.gd-acc[open]{outline:1px solid color-mix(in oklab, var(--foam) 60%, transparent)}
.gd-hints{display:grid;gap:6px;margin-top:8px}
.gd-trouble__gallery{display:grid;gap:12px}
.gd-trouble__ph{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
@media (max-width:900px){.gd-trouble__grid{grid-template-columns:1fr}}
/* ===== S7 Grind size visualizer ===== */
.gd-grind{padding:var(--space-7) 0}
.gd-grind__grid{display:grid;gap:18px;grid-template-columns:.9fr 1.1fr;align-items:start}
.gd-grind__film{display:grid;gap:10px}
.gd-grind__ph{aspect-ratio:4/3;background:var(--foam);border-radius:12px;overflow:hidden}
.gd-grind__ph img{width:100%;height:100%;object-fit:cover;display:block}
.gd-grid-hints{display:grid;gap:6px;margin:10px 0}
.gd-grind__legend{display:flex;gap:12px;align-items:center;margin-top:8px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot--fine{background:color-mix(in oklab, var(--kiln) 40%, transparent)}
.dot--medium{background:color-mix(in oklab, var(--copper) 55%, transparent)}
.dot--coarse{background:color-mix(in oklab, var(--leaf) 55%, transparent)}
@media (max-width:900px){.gd-grind__grid{grid-template-columns:1fr}}

/* ===== S8 Water builder (right stacked images) ===== */
.gd-water{padding:var(--space-7) 0}
.gd-water__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:center}
.gd-water__stack{position:relative;min-height:320px}
.gd-water__ph{position:absolute;inset:auto 0 0 auto;width:68%;aspect-ratio:4/3;border-radius:16px;background:var(--foam);box-shadow:var(--shadow-1);overflow:hidden}
.gd-water__ph--top{right:auto;left:0;transform:translateY(-16%) rotate(-3deg);z-index:1}
.gd-water__ph--bottom{transform:translateY(12%) rotate(4deg)}
.gd-water__ph img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){
  .gd-water__grid{grid-template-columns:1fr}
  .gd-water__stack{min-height:220px}
}

/* ===== S9 Iced methods rail (alternating) ===== */
.gd-iced{padding:var(--space-7) 0}
.iced-rail{display:grid;gap:12px}
.iced-tile{display:grid;gap:12px;grid-template-columns:1fr 1fr;align-items:center;background:var(--paper);border-radius:14px;box-shadow:var(--shadow-1);padding:12px}
.iced-tile--a{grid-template-columns:1fr 1fr}            /* image left */
.iced-tile--b{grid-template-columns:1fr 1fr}            /* image right (markup swapped) */
.iced-tile--c{grid-template-columns:1fr 1fr}            /* image on top on small screens */
.iced-ph{aspect-ratio:4/3;background:var(--foam);border-radius:12px;overflow:hidden}
.iced-ph img{width:100%;height:100%;object-fit:cover;display:block}
.iced-body{display:grid;gap:6px;align-content:start}
@media (max-width:900px){
  .iced-tile{grid-template-columns:1fr} /* C: image top automatically */
}
/* ===== S10 Brew timers strip ===== */
.gd-timers{padding:var(--space-7) 0}
.timers-grid{
  display:grid; gap:12px;
  grid-template-columns:2fr 1fr;
  grid-template-areas:
    "wide wide"
    "small1 small2";
}
.tm{display:grid;grid-template-rows:auto 1fr;background:var(--paper);border-radius:14px;box-shadow:var(--shadow-1);overflow:hidden}
.tm--wide{grid-area:wide}
.tm:nth-of-type(2){grid-area:small1}
.tm:nth-of-type(3){grid-area:small2}
.tm__media{background:var(--foam);aspect-ratio:16/9}
.tm__media img{width:100%;height:100%;object-fit:cover;display:block}
.tm__body{padding:12px 14px 14px}
.tm__nums{font-family:"IBM Plex Mono", ui-monospace;font-size:22px;letter-spacing:.02em;color:var(--kiln);margin:.25em 0}
.tm__meta{color:#6a5f57}
@media (max-width:800px){
  .timers-grid{grid-template-columns:1fr;grid-template-areas:"wide" "small1" "small2"}
}

/* ===== S11 Recipe flip cards ===== */
.gd-flip{padding:var(--space-7) 0}
.flip-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.flip{perspective:1000px}
.flip__inner{position:relative;transform-style:preserve-3d;transition:transform .5s}
.flip.is-flipped .flip__inner{transform:rotateY(180deg)}
.flip__face{
  position:relative; backface-visibility:hidden;
  background:var(--paper); border-radius:14px; box-shadow:var(--shadow-1); overflow:hidden; min-height:280px;
  display:grid; grid-template-rows:auto 1fr;
}
.flip__front .flip__media{aspect-ratio:4/3;background:var(--foam)}
.flip__media img{width:100%;height:100%;object-fit:cover;display:block}
.flip__body{padding:12px 14px 14px;display:grid;gap:6px;align-content:start}
.flip__back{position:absolute;inset:0;transform:rotateY(180deg);padding:12px 14px 14px;display:grid;gap:8px;align-content:start}
.flip__meta{color:#6a5f57}
@media (max-width:800px){.flip-grid{grid-template-columns:1fr}}

/* ===== S12 Origin × Method cheatsheet ===== */
.gd-matrix{padding:var(--space-7) 0}
.gd-matrix__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.mx-heat{display:grid;gap:6px;background:var(--paper);border-radius:14px;box-shadow:var(--shadow-1);padding:12px}
.mx-row{display:grid;grid-template-columns:1fr repeat(3,1fr);gap:6px}
.mx-cell{border-radius:10px;padding:8px 10px;text-align:center}
.mx-h{background:color-mix(in oklab, var(--leaf) 50%, transparent);color:var(--on-accent);font-weight:700}
.mx-m{background:color-mix(in oklab, var(--copper) 45%, transparent)}
.mx-l{background:color-mix(in oklab, var(--foam) 45%, transparent)}
.mx-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.gd-matrix__collage{position:relative;min-height:320px}
.mx-img{position:absolute;overflow:hidden}
.mx-img--a{left:0;top:0;width:52%;aspect-ratio:1/1;border-radius:50%}
.mx-img--b{right:0;top:12%;width:56%;aspect-ratio:4/3;border-radius:18px}
.mx-img--c{left:18%;bottom:0;width:58%;aspect-ratio:1/1;border-radius:50%}
.mx-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){
  .gd-matrix__grid{grid-template-columns:1fr}
  .gd-matrix__collage{min-height:260px}
}
/* ===== Chips in Origin × Method (S12) ===== */
.mx-tags{display:flex; gap:8px; flex-wrap:wrap}

.mx-tags .cra-chip{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  border:2px solid color-mix(in oklab, var(--foam) 70%, transparent);
  background:color-mix(in oklab, var(--foam) 22%, transparent);
  color:var(--kiln);
  font:600 13px/1 Inter, system-ui, sans-serif;
  cursor:pointer;
  transition:background .18s, border-color .18s, box-shadow .18s, transform .06s;
}
.mx-tags .cra-chip:hover{ background:color-mix(in oklab, var(--foam) 32%, transparent); }
.mx-tags .cra-chip:active{ transform:translateY(1px); }
.mx-tags .cra-chip:focus-visible{
  outline:3px solid color-mix(in oklab, var(--leaf) 65%, transparent);
  outline-offset:2px;
}
.mx-tags .cra-chip[aria-pressed="true"]{
  background:var(--leaf);
  border-color:color-mix(in oklab, var(--leaf) 70%, transparent);
  color:var(--on-accent);
}
.mx-tags .cra-chip[disabled]{ opacity:.6; cursor:not-allowed; }
/* S10: make hero image shorter + compact cards */
.tm--wide .tm__media{
  /* короче и с ограничением высоты */
  aspect-ratio: 21 / 9;
  max-height: clamp(200px, 30vh, 360px);
}
.tm:not(.tm--wide) .tm__media{
  aspect-ratio: 3 / 2;
  max-height: clamp(160px, 26vh, 280px);
}

/* на мобилке чуть выше, чтобы не терять детали */
@media (max-width: 800px){
  .tm--wide .tm__media{
    aspect-ratio: 16 / 10;
    max-height: 260px;
  }
}
/* ===== S13 Home brew lab ===== */
.gd-lab{padding:var(--space-7) 0}
.gd-lab__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.lab-ctrl{display:grid;gap:6px;max-width:520px;margin:8px 0}
.lab-ctrl__label{font-weight:700;color:var(--kiln)}
.lab-ctrl__out{font-family:"IBM Plex Mono",ui-monospace;color:#6a5f57}
.lab-toggles{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}

.gd-lab__collage{position:relative;min-height:360px}
.lab-img{position:absolute;overflow:hidden;border-radius:16px;background:var(--foam);box-shadow:var(--shadow-1)}
.lab-img--a{left:0;top:0;width:46%;aspect-ratio:3/4}
.lab-img--b{right:4%;top:6%;width:48%;aspect-ratio:16/10;border-radius:20px}
.lab-img--c{left:6%;bottom:0;width:38%;aspect-ratio:1/1;border-radius:50%}
.lab-img--d{right:0;bottom:4%;width:44%;aspect-ratio:4/3}
.lab-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){ .gd-lab__grid{grid-template-columns:1fr} .gd-lab__collage{min-height:280px} }

/* ===== S14 Tools wall ===== */
.gd-tools{padding:var(--space-7) 0}
.tools-grid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.tool{position:relative;background:var(--paper);border-radius:16px;box-shadow:var(--shadow-1);overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.tool__media{aspect-ratio:3/4;background:var(--foam)}
.tool__media img{width:100%;height:100%;object-fit:cover;display:block}
.tool__body{padding:12px 14px 14px}
.tool::before{
  content:attr(data-label);
  position:absolute; left:8px; top:8px;
  writing-mode:vertical-rl; text-orientation:mixed;
  background:var(--leaf); color:var(--on-accent);
  padding:6px 4px; border-radius:10px; font-weight:700; font-size:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
@media (max-width:900px){ .tools-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .tools-grid{grid-template-columns:1fr} }

/* ===== S15 FAQ mini ===== */
.gd-faqmini{padding:var(--space-7) 0}
.gd-faqmini__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.gd-faqmini__film{display:grid;gap:10px}
.faqm-ph{aspect-ratio:4/3;background:var(--foam);border-radius:14px;overflow:hidden}
.faqm-ph img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){ .gd-faqmini__grid{grid-template-columns:1fr} }
/* Global: запрет горизонтального скролла и безопасные медиа */
html, body { overflow-x: clip; }           /* вместо hidden — не ломает позиционирование */
.cra-main { overflow-x: clip; }
img, video { max-width: 100%; display: block; }
/* Anti-overflow для проблемных секций на 3-й странице */
.gd-hero .gd-film,
.gd-water__stack,
.gd-matrix__collage,
.gd-lab__collage {
  position: relative;
  overflow: hidden;       /* режем «вылеты» вращённых/сдвинутых фигур */
  isolation: isolate;     /* новый paint-контекст, чтобы тени не торчали за пределы */
}

.flip { contain: paint; } /* 3D-карточки не создают «шире вьюпорта» */

.iced-rail { overflow: hidden; } /* на узких экранах rail не двигает страницу */

/* На очень узких экранах сжимает hero-поиск, чтобы кнопка не выталкивала контейнер */
@media (max-width: 380px){
  .gd-search { grid-template-columns: minmax(0,1fr) auto; }
  .gd-search .cra-btn { padding-inline: 10px; }
}
/* S5 — Milk drinks: safe sizing */
.gd-milk__aside{
  display: grid;
  gap: 12px;
  align-content: start;
  overflow: hidden;      /* ничего не вылезает за секцию */
  isolation: isolate;    /* тени внутри */
}
.gd-milk__ph{
  width: min(520px, 100%);   /* не распирает колонку */
  aspect-ratio: 4 / 3;
  max-height: clamp(180px, 32vh, 340px);
  margin-inline: auto;       /* аккуратное центрирование */
  border-radius: 18px;
  background: var(--foam);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.gd-milk__ph img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* без искажений */
  object-position: center;
  display: block;
}

/* На узких экранах делаем их ещё компактнее */
@media (max-width: 720px){
  .gd-milk__ph{ aspect-ratio: 3 / 2; max-height: 260px; }
}

/* Универсальная страховка для всех guide-изображений */
.gd-hero .gd-frame img,
.gd-pair__ph img,
.gd-trouble__ph img,
.gd-grind__ph img,
.gd-water__ph img,
.iced-ph img,
.tm__media img,
.flip__media img,
.mx-img img,
.lab-img img,
.tool__media img,
.faqm-ph img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* --- S2: Ratios — ограничим ширину колонки с фото и высоту кадров --- */
.gd-ratios__grid{
  grid-template-columns: 1.1fr minmax(260px, 460px);  /* правая колонка не шире 460px */
}
.gd-shot{
  width: min(100%, 440px);
  max-height: clamp(180px, 30vh, 320px);
  margin-inline: auto;          /* центрируем в колонке */
  border-radius: 16px;
  overflow: hidden;
}
.gd-shot img{ width:100%; height:100%; object-fit:cover; display:block; }

/* --- S3: Methods — фикс ширины медиа-колонки и компактные фото --- */
.gd-item{
  align-items: stretch;
  grid-template-columns: 1.1fr minmax(260px, 420px);  /* текст + узкая колонка фото */
}
.gd-item:nth-child(even){
  grid-template-columns: minmax(260px, 420px) 1.1fr;  /* зеркально для чётных */
}
.gd-item__ph{
  width: 100%;
  max-width: 420px;
  max-height: clamp(200px, 34vh, 360px);
  margin-inline: auto;
  border-radius: 12px;
  overflow: hidden;
}
.gd-item__ph img{ width:100%; height:100%; object-fit:cover; display:block; }

/* — универсальная страховка для всех guide-картинок на странице — */
.gd-hero .gd-frame img,
.gd-pair__ph img,
.gd-milk__ph img,
.gd-trouble__ph img,
.gd-grind__ph img,
.gd-water__ph img,
.iced-ph img,
.tm__media img,
.flip__media img,
.mx-img img,
.lab-img img,
.tool__media img,
.faqm-ph img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* мобилка: оставляем на всю ширину, но не выше необходимости */
@media (max-width: 900px){
  .gd-item__ph{ max-width: 100%; }
  .gd-ratios__grid{ grid-template-columns: 1fr; }
}