/* ==========================================================================
   photos.css — список фотоальбомов /photos/ и /photos/page/{n}/.

   ИСТОЧНИК: html_flat/starco_photos_concept.html — тот самый файл, из
   которого собран base.css. Поэтому здесь ЗАМЕТНО МЕНЬШЕ правил, чем в
   концепте: шапка, подвал, кнопки, .eyebrow, крошки и типографика уже
   лежат в base.css один раз на всю тему, и повторять их нельзя — второе
   такое же правило после base.css ничего не меняет, зато создаёт второе
   место, где его надо править.

   ЧЕГО ЗДЕСЬ НЕТ И ПОЧЕМУ:

   .gallery-head / .section-title / .section-copy — второй заголовок
   («Альбомы. Последние события») под первым. В движке заголовок раздела
   ровно один: s_pages.header, он уже стоит в шапке. Второй пришлось бы
   зашить в шаблон мимо админки.

   .archive / .archive-card / .pages / .page — полоса «Страницы архива»
   с собственными квадратными номерами. Номера рисует общий
   pagination.tpl, его пилюли описаны в base.css; текст панели —
   редакторский, под конкретное число страниц.

   .cta — сквозная полоса «35 лет истории». Она есть почти во всех
   концептах, то есть это хвост подвала или отдельная группа блоков,
   а не часть фотоархива; см. отчёт фазы 10.

   ОДНОИМЁННЫЙ КЛАСС. .album-count здесь и в album.css — РАЗНЫЕ вещи
   (плитка списка против подписи в шапке альбома). Файлы никогда не
   грузятся вместе: photos.css живёт на /photos/, album.css — на
   /photos/{слаг}/.
   ========================================================================== */

/* ------------------------------------------------------- шапка раздела -- */
/* .page-head — общий контейнер тёмной шапки во всех шаблонах темы. В
   base.css его нет намеренно: фон, отступы и «призрак» отличаются на
   каждой странице (см. шапку base.css про .hero). Хлебные крошки в
   base.css уже белые — они рассчитаны ровно на этот тёмный фон. */
.page-head {
	position: relative;
	overflow: hidden;
	padding: 145px 0 60px;
	color: #fff;
	background:
		radial-gradient(circle at 84% 18%, rgba(230, 192, 76, .12), transparent 18%),
		radial-gradient(circle at 14% 80%, rgba(217, 8, 18, .11), transparent 23%),
		linear-gradient(128deg, var(--navy2), var(--navy) 52%, #0a518f);
}
.page-head:before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(118deg, transparent 0 88px, rgba(255, 255, 255, .025) 89px 90px);
}
.page-head:after {
	content: "PHOTO";
	position: absolute;
	right: -15px;
	bottom: -62px;
	font-size: clamp(145px, 17vw, 285px);
	font-weight: 950;
	line-height: .76;
	letter-spacing: -.09em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, .05);
	pointer-events: none;
}

/* z-index обязателен: иначе штриховка :before накрывает крошки, и по
   ссылкам в них нельзя кликнуть. */
.page-head .container { position: relative; z-index: 2; }
.hero-copy { max-width: 920px; }

.hero-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #cce6ff;
}
.hero-kicker strong {
	background: var(--red);
	padding: 8px 12px;
	border-radius: 999px;
	color: #fff;
}

.page-head h1 {
	margin: 25px 0 20px;
	font-size: clamp(54px, 6.6vw, 96px);
	line-height: .84;
	letter-spacing: -.065em;
	font-weight: 950;
	text-transform: uppercase;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/* Вводный текст страницы — HTML из TinyMCE, поэтому цвет и размер
   задаются потомкам, а не самому контейнеру. */
.page-intro {
	max-width: 740px;
	font-size: 18px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .72);
}
.page-intro p { margin: 0 0 12px; }
.page-intro p:last-child { margin-bottom: 0; }
.page-intro a { text-decoration: underline; }

/* -------------------------------------------------------------- полоса -- */
.gallery {
	padding: 48px 0 98px;
	background: linear-gradient(180deg, #fff, #f7fafc);
}

/* ------------------------------------------------------- фильтр и поиск -- */
/* Класс активного чипа — .is-active: его вешает design/t1/js/filter.js
   (в концепте был .active, но общий модуль пишет по своей конвенции). */
.gallery-tools {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 24px;
}
.filter-btn {
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--blue);
	padding: 11px 15px;
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
	transition: .2s;
}
.filter-btn:hover { border-color: var(--blue); }
.filter-btn.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }

.gallery-search {
	margin-left: auto;
	min-width: 260px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	padding: 12px 17px;
	outline: none;
}
.gallery-search:focus { border-color: var(--blue); }

/* --------------------------------------------------------------- сетка -- */
/* grid-auto-flow:dense — из-за плиток .is-wide/.is-tall: без него дырка
   от неподошедшей по ширине плитки так и остаётся дыркой. */
.album-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-flow: dense;
	grid-auto-rows: 260px;
	gap: 14px;
}

.album-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 24px;
	background: var(--navy);
	color: #fff;
	isolation: isolate;
	transition: .3s;
}
.album-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

/* Форма плитки — s_albums.layout */
.album-card.is-wide { grid-column: span 2; }
.album-card.is-tall { grid-row: span 2; }

/* filter.js прячет карточки атрибутом hidden */
.album-card[hidden] { display: none; }

/* Обложка и затемнение уезжают под содержимое: .album-card изолирован,
   поэтому отрицательный z-index не проваливает их под саму плитку.
   .album-media остаётся заливкой, когда обложка не загружена. */
.album-media { position: absolute; inset: 0; background: #0d3d67; z-index: -3; }
.album-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .5s;
}
.album-card:hover .album-img { transform: scale(1.035); }

.album-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 29, 61, .02) 25%, rgba(4, 29, 61, .88) 100%);
	z-index: -1;
}

.album-top {
	position: absolute;
	left: 18px;
	right: 18px;
	top: 17px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 2;
}
.album-year {
	border-radius: 999px;
	background: rgba(4, 29, 61, .7);
	backdrop-filter: blur(8px);
	padding: 8px 10px;
	font-size: 10px;
	font-weight: 950;
	letter-spacing: .1em;
}
.album-arrow {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--red);
	font-size: 17px;
	font-weight: 950;
}

.album-info { position: absolute; left: 21px; right: 21px; bottom: 19px; z-index: 2; }
.album-date {
	display: block;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #cce6ff;
}
.album-info h2 {
	margin: 8px 0 10px;
	font-size: 24px;
	line-height: 1.03;
	letter-spacing: -.035em;
	text-wrap: balance;
	word-break: normal;
	hyphens: none;
}
.is-wide .album-info h2 { font-size: 30px; }

.album-count {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-size: 11px;
	font-weight: 800;
	color: rgba(255, 255, 255, .68);
}
.album-count b { font-size: 20px; color: var(--gold); }

/* ------------------------------------------------------------- счётчик -- */
.gallery-status {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: center;
	margin-top: 22px;
	font-size: 12px;
	color: var(--muted);
}

/* --------------------------------------------------------- брейкпоинты -- */
@media (max-width: 1180px) {
	.album-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
	.page-head { padding: 130px 0 50px; }
	.page-head h1 { font-size: 65px; }
	.gallery { padding: 38px 0 78px; }
	.gallery-search { margin-left: 0; width: 100%; }
	.album-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 250px; }
}

@media (max-width: 560px) {
	.page-head { padding: 120px 0 43px; }
	.page-head h1 { font-size: 50px; }
	.page-intro { font-size: 16px; }
	.album-grid { grid-template-columns: 1fr; grid-auto-rows: 330px; }
	.album-card.is-wide, .album-card.is-tall { grid-column: auto; grid-row: auto; }
	.album-info h2, .is-wide .album-info h2 { font-size: 25px; }
	.gallery-status { flex-direction: column; align-items: flex-start; }
}