/* ==========================================================================
   Портфолио — заголовок страницы и сетка плиток с «туманом»
   Опорный кадр 1920 × 3020:

     заголовок     x 98   y 170   48px Muller Medium / 1.12
     подзаголовок         y 232   20px Muller Medium / 1.12
     сетка плиток         y 366…2275, во всю ширину кадра

   Сетка в макете нарисована двумя разными раскладками, поэтому и здесь она
   собрана из двух блоков — колонки у них не совпадают:

     верхний (954 высотой)   806 | 304 | 434 | 374   ряды 376 | 578
     нижний  (955 высотой)   383 | 426 | 305 | 807   ряды 379 | 576

   В каждом блоке одна плитка занимает оба ряда: сверху — левая (интерьер),
   снизу — правая (бренд-бук).

   Высоту блокам задаёт aspect-ratio, а ряды и колонки разложены во fr: так
   вся сетка тянется за шириной экрана и не требует единиц vw, которые
   сломались бы на экранах шире 1920.

   Между плитками в макете идут тонкие чёрные линии, включая верхнюю и нижнюю
   границы сетки. Отдельных элементов для них нет: линии — это чёрный фон,
   просвечивающий в зазорах grid и в рамках сверху и снизу.
   ========================================================================== */

:root {
  /* Линии между плитками: в макете 3px при ширине 1920 */
  --gallery-line: 2px;

  /* Размытие тумана — 10px при 1920: на узком экране плитки мельче, и туман густеет вместе с ними */
  --gallery-blur: clamp(0.375rem, 0.5208vw, 0.625rem);

  /* Кегль плашки с информацией — 20px при 1920 */
  --work-fs: clamp(0.75rem, 1.0417vw, 1.25rem);

  /* Плашка чуть темнее белого — единственное место в проекте, где нужен этот тон */
  --work-plate: #f5f5f5;
}

/* --- Заголовок и подзаголовок --------------------------------------------
   Шапка на всех страницах position: absolute, поэтому верхнее поле здесь
   отсчитывается от края документа: 170 до базовой линии заголовка.
   -------------------------------------------------------------------------- */

.portfolio__head {
  padding-top: clamp(6rem, 8.8542vw, 10.625rem);
  padding-bottom: clamp(2.5rem, 5.8333vw, 7rem);
  padding-left: clamp(1.25rem, 5.1042vw, 6.125rem);
  padding-right: var(--container-pad);
}

.portfolio__title {
  font-size: clamp(1.75rem, 2.5vw, 3rem);
  font-weight: var(--fw-medium);
  line-height: 1.12;
}

.portfolio__note {
  margin-top: clamp(0.25rem, 0.4167vw, 0.5rem);
  font-size: clamp(0.875rem, 1.0417vw, 1.25rem);
  font-weight: var(--fw-medium);
  line-height: 1.12;
}

/* --- Сетка ---------------------------------------------------------------- */

.portfolio__grids {
  display: grid;
  gap: var(--gallery-line);
  background-color: var(--bg-inverse);
  border-block: var(--gallery-line) solid var(--border-strong);
}

.portfolio__grid {
  display: grid;
  gap: var(--gallery-line);
}

.portfolio__grid--top {
  aspect-ratio: 1920 / 954;
  grid-template-columns: 806fr 304fr 434fr 374fr;
  grid-template-rows: 376fr 578fr;
}

.portfolio__grid--bottom {
  aspect-ratio: 1920 / 955;
  grid-template-columns: 383fr 426fr 305fr 807fr;
  grid-template-rows: 379fr 576fr;
}

/* --- Плитка ----------------------------------------------------------------
   Чёрный фон — подложка на время загрузки фотографии: в зазорах между
   плитками и без того чёрный, поэтому пустая плитка не мигает белым.
   -------------------------------------------------------------------------- */

.work {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-inverse);
}

.work--tall {
  grid-row: span 2;
}

/*
   Кадрирование берётся из макета: object-position сдвигает снимок туда же,
   куда он сдвинут в Figma внутри своей рамки. По умолчанию — центр.
*/
.work__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work__photo--right {
  object-position: 100% 50%;
}

.work__photo--left {
  object-position: 0 50%;
}

.work__photo--left-top {
  object-position: 0 0;
}

/* --- Туман -----------------------------------------------------------------
   В макете это плёнка #d9d9d9 20% с размытием подложки на 10px. Размытие
   сделано backdrop-filter, а не filter на самой фотографии: фильтр размыл бы
   и края кадра, и по периметру плитки проступила бы светлая кайма.

   Уходит туман по opacity — так плёнка и размытие гаснут одним движением.
   -------------------------------------------------------------------------- */

.work__fog {
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--color-grey-dark) 20%, transparent);
  backdrop-filter: blur(var(--gallery-blur));
  -webkit-backdrop-filter: blur(var(--gallery-blur));
  transition: opacity 0.45s ease;
}

.work:hover .work__fog,
.work:focus-within .work__fog {
  opacity: 0;
}

/* --- Плашка с информацией --------------------------------------------------
   Опорные размеры (по большой плитке при ширине 1920):

     плашка       808 × 107, #f5f5f5, прижата к низу кадра
     заголовок    20px Muller Medium / 1.12
     описание     13px Muller Light / 1.12, ширина 497
     год          13px Muller Light, у правого края

   Кегль задан на самой плашке — поля и ширина описания считаются от него
   в em, поэтому плашка целиком масштабируется вместе с текстом.

   Заголовок занимает всю ширину, описание и год стоят в одной строке и
   выровнены по нижнему краю: год в макете лежит на последней строке описания.
   -------------------------------------------------------------------------- */

.work__info {
  position: absolute;
  inset-inline: 0;
  bottom: 0;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 1em;
  row-gap: 0.9em;

  padding: 0.75em 0.85em 0.55em;
  font-size: var(--work-fs);
  background-color: var(--work-plate);

  opacity: 0;
  translate: 0 100%;
  transition: opacity 0.35s ease, translate 0.35s ease;
}

.work:hover .work__info,
.work:focus-within .work__info {
  opacity: 1;
  translate: 0 0;
}

.work__title {
  grid-column: 1 / -1;
  font-size: 1em;
  font-weight: var(--fw-medium);
  line-height: 1.12;
}

.work__desc {
  max-width: 24.85em; /* 497 при кегле 20 */
  font-size: 0.65em;
  font-weight: var(--fw-light);
  line-height: 1.12;
}

.work__year {
  font-size: 0.65em;
  font-weight: var(--fw-light);
  line-height: 1.12;
  white-space: nowrap;
}

/* --- Кнопка «Присоединиться» -----------------------------------------------
   В макете 681 × 97 по центру кадра: 111 от сетки плиток и 173 до подвала.
   Ширину даёт сам текст — размеры .btn совпадают с макетными.
   -------------------------------------------------------------------------- */

.portfolio__cta {
  display: flex;
  justify-content: center;
  padding-block: clamp(2.5rem, 5.7813vw, 6.9375rem) clamp(3rem, 9.0104vw, 10.8125rem);
  padding-inline: var(--container-pad);
}

/* display: flex перебил бы hidden, которым скрипт прячет блок под форму */
.portfolio__cta[hidden] {
  display: none;
}

/* Фокус на блок ставит браузер при возврате из формы — рамка тут лишняя */
.portfolio__cta:focus {
  outline: none;
}

/* --- Планшет ---------------------------------------------------------------
   Раскладка макета держится, пока плитки шире примерно 250px. Ниже 900
   колонки уравниваются: сетка становится в два столбца с квадратными
   ячейками, а плитки на два ряда остаются вытянутыми — сетка не рассыпается
   на одинаковые квадраты и сохраняет ритм макета.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .portfolio__grid--top,
  .portfolio__grid--bottom {
    aspect-ratio: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: 44vw;
  }
}

/* --- Мобильные -------------------------------------------------------------
   В одну колонку: плитка на два ряда сравнялась бы с двумя обычными и
   выглядела бы дырой, поэтому span снимается.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .portfolio__grid--top,
  .portfolio__grid--bottom {
    grid-template-columns: 1fr;
    grid-auto-rows: 130vw;
  }

  .work--tall {
    grid-row: auto;
  }

  /*
     Плитка теперь во всю ширину экрана, и пропорции макета можно не держать:
     кегль фиксируется, а описание с годом подтягиваются ближе к заголовку —
     13px из макета на телефоне уже не читаются.
  */
  .work__info {
    font-size: 1.125rem;
  }

  .work__desc,
  .work__year {
    font-size: 0.72em;
  }
}

/* --- Экраны без курсора ----------------------------------------------------
   Навести курсор здесь нечем, поэтому туман снят, а плашки показаны сразу:
   иначе плитки остались бы размытыми навсегда.
   -------------------------------------------------------------------------- */

@media (hover: none) {
  .work__fog {
    opacity: 0;
  }

  .work__info {
    opacity: 1;
    translate: 0 0;
  }
}