/* =============================================================
 * millings.css — стили только для страницы /gallery/millings.
 * Поверх catalog.css (page-hero / cta-block берём оттуда).
 * ============================================================= */

/* ──────── СТИКИ-ТУЛБАР: поиск + чипы групп ──────── */
.mill-toolbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-grey-200);
}
.mill-toolbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  flex-wrap: wrap;
}
.mill-toolbar__search {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;                  /* было 8/14 — стало воздушнее, текст не клеится к иконке */
  background: var(--color-white);
  border: 1.5px solid var(--color-grey-300);   /* было 1px — заметнее граница */
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.mill-toolbar__search:hover {
  border-color: var(--color-grey-650);
}
.mill-toolbar__search:focus-within {
  border-color: var(--color-text);
  color: var(--color-text);
  box-shadow: 0 0 0 4px rgba(20, 18, 16, 0.08);   /* мягкий ring подтверждает фокус */
}
.mill-toolbar__search input {
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--fs-base);                /* было fs-sm — крупнее и читабельнее */
  font-weight: var(--fw-medium);
  width: 100%;
  color: var(--color-text);
  caret-color: var(--color-accent);          /* видимый коралловый курсор */
  padding: 2px 0;
  letter-spacing: 0;
}
.mill-toolbar__search input::placeholder {
  color: var(--color-text-secondary);
  font-weight: var(--fw-regular);
  opacity: 0.85;
}
/* placeholder приглушается, когда юзер уже сфокусирован — намекает что можно писать */
.mill-toolbar__search:focus-within input::placeholder {
  opacity: 0.55;
}
.mill-toolbar__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Чип группы — миниатюрная пилюля с номером + count */
.mill-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-full);
  text-decoration: none;
  font-size: var(--fs-sm);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.mill-chip__num {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--color-grey-150);
  border-radius: var(--radius-full);
  font-weight: var(--fw-semibold);
  font-size: 12px;
}
.mill-chip__count {
  color: var(--color-text-secondary);
  font-size: 12px;
}
/* перебиваем глобальное a:hover { text-decoration: underline } из reset.css */
.mill-chip,
.mill-chip:hover,
.mill-chip:focus,
.mill-chip:active,
.mill-chip * { text-decoration: none !important; }

@media (hover: hover) {
  .mill-chip:hover { border-color: var(--color-text); }
  .mill-chip:hover .mill-chip__num { background: var(--color-accent); color: #fff; }
}

/* фокусный ring — мягкий box-shadow вместо чёрной outline-рамки от браузера */
.mill-chip:focus { outline: none; }
.mill-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 18, 16, 0.18);
  border-color: var(--color-text);
}

/* ──────── ЛЕГЕНДА ──────── */
.mill-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-grey-150);
  border-radius: var(--radius-md);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-7);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.mill-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ──────── TAG (унифицированный для легенды и карточек) ──────── */
.mill-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mill-tag--out {
  /* контрастный тёмно-красный текст на светлом фоне (≥4.5:1):
     был accent-text на rgba(220,52,31,0.08) = 2.46:1 — фейл WCAG. */
  background: rgba(220, 52, 31, 0.10);
  border-color: rgba(220, 52, 31, 0.35);
  color: #a32414;
}

/* ──────── ЗАГОЛОВОК ГРУППЫ ──────── */
.mill-group { margin-top: var(--sp-8); scroll-margin-top: 88px; }
.mill-group:first-of-type { margin-top: var(--sp-2); }

.mill-group__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-4);
  align-items: end;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--color-grey-200);
}
.mill-group__num {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 56px;
  line-height: 0.9;
  font-weight: 300;
  color: var(--color-grey-300);
  letter-spacing: -0.02em;
}
.mill-group__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  margin: 0;
  letter-spacing: -0.015em;
}
.mill-group__sub {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin: 4px 0 0;
}
.mill-group__top {
  align-self: end;
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-full);
  text-decoration: none;
  color: var(--color-text-secondary);
  font-size: 18px;
  line-height: 1;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) {
  .mill-group__top:hover { border-color: var(--color-text); color: var(--color-text); }
}

/* ──────── СЕТКА КАРТОЧЕК ──────── */
.mill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-4);
}
@media (max-width: 768px) {
  .mill-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
  .mill-group__num { font-size: 40px; }
}

.mill-card {
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
@media (hover: hover) {
  .mill-card:hover {
    border-color: var(--color-grey-300);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(20, 18, 16, 0.08);
  }
}
/* «Нет в наличии»: приглушаем только фото (grayscale + opacity),
   текст и бейдж оставляем читаемыми — иначе текст #1d1d1d × 0.55 ≈ #838383
   (3.79:1) фейлит WCAG AA по контрасту. */
.mill-card.is-out .mill-card__media { opacity: 0.4; filter: grayscale(0.5); }
.mill-card.is-out .mill-card__name { color: var(--color-text-secondary); }

.mill-card__media {
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--color-grey-150);
  overflow: hidden;
  position: relative;
}
.mill-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: var(--sp-2);
  transition: transform var(--duration-normal) var(--ease-out);
}
@media (hover: hover) {
  .mill-card:hover .mill-card__media img { transform: scale(1.03); }
}

.mill-card__body {
  padding: var(--sp-3) var(--sp-3) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
  border-top: 1px solid var(--color-grey-150);
}
.mill-card__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin: 0;
  line-height: 1.3;
  /* «Мыло квадрат с радиусом» — режем на 2 строки если очень длинно */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mill-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}

/* ──────── скрываемые при поиске ──────── */
.mill-card.is-search-hidden { display: none; }
.mill-group.is-search-empty { display: none; }