/*
Theme Name: Kazannov
Description: kazannov.ru — гид по Казани для гостей. Фото-обложки, мозаика объектов, маршруты на 1/2/3 дня, лента выездов по Татарстану. Палитра: белый камень, изумруд куполов, золото, кирпич.
Version: 1.0.0
Text Domain: kazannov
*/

:root {
	--stone: #f4f0e8;
	--paper: #fffdf9;
	--ink: #1e1b16;
	--text: #2e2a24;
	--muted: #6e675c;
	--line: #e3dccf;
	--emerald: #0f6a5b;
	--emerald-deep: #0a4d42;
	--gold: #c39433;
	--gold-soft: #f6ecd4;
	--brick: #8e3b2b;
	--ui: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--read: "Literata", Georgia, "Times New Roman", serif;
	--w: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--stone); color: var(--text); font: 400 18px/1.7 var(--read); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--emerald); text-underline-offset: 3px; }
a:hover { color: var(--emerald-deep); }
h1, h2, h3 { font-family: var(--ui); color: var(--ink); font-weight: 500; line-height: 1.18; letter-spacing: -.005em; }
.wrap { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 16px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 50; background: #fff; padding: 6px 10px; }
.ph { display: block; width: 100%; height: 100%; background: linear-gradient(160deg, #cfc4ad, #9fb3a6); }

/* ---------- Шапка ---------- */
.site { font-family: var(--ui); background: var(--stone); border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.site--over { position: absolute; left: 0; right: 0; top: 0; background: transparent; border-bottom: 0; }
.site__row { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-size: 22px; font-weight: 500; letter-spacing: .01em; }
.logo .star { color: var(--gold); }
.logo em { font-style: normal; color: var(--emerald); margin-left: 4px; }
.site--over .logo, .site--over .menu a { color: #fff; }
.site--over .logo em { color: var(--gold-soft); }
.site__nav { margin-left: auto; min-width: 0; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px 18px; flex-wrap: wrap; justify-content: flex-end; }
.menu a { color: var(--text); text-decoration: none; font-size: 16px; padding: 4px 0; border-bottom: 1.5px solid transparent; }
.menu a:hover, .menu .current-menu-item > a { border-bottom-color: var(--gold); }

/* ---------- Главная ---------- */
.hero { position: relative; min-height: 640px; display: flex; align-items: flex-end; color: #fff; background: var(--emerald-deep); overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 30, 26, .55) 0%, rgba(10, 30, 26, .05) 30%, rgba(10, 30, 26, .15) 55%, rgba(10, 30, 26, .82) 100%); }
.hero__in { position: relative; z-index: 1; padding-top: 120px; padding-bottom: 56px; }
.hero__t { color: #fff; font-size: 52px; max-width: 15em; margin: 0 0 14px; font-weight: 500; }
.hero__lead { max-width: 36em; margin: 0 0 24px; font-size: 19px; opacity: .92; }
.hero__days { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-family: var(--ui); }
.hero__days span { font-size: 16px; opacity: .85; margin-right: 4px; }
.hero__days a { color: var(--ink); background: var(--gold-soft); padding: 9px 18px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 16px; }
.hero__days a:hover { background: #fff; }

.blk { margin-top: 64px; }
.blk__h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.blk__t { font-size: 32px; margin: 0; display: flex; align-items: center; gap: 12px; }
.blk__t::before { content: ""; width: 12px; height: 12px; background: var(--gold); transform: rotate(45deg); flex: none; }
.blk__a { font-family: var(--ui); font-size: 16px; white-space: nowrap; }

/* Фото-плитки с подписью поверх */
.tile { position: relative; display: block; overflow: hidden; border-radius: 6px; color: #fff; text-decoration: none; background: #b9ae98; min-height: 220px; }
.tile img, .tile .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tile:hover img { transform: scale(1.03); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(15, 20, 18, .78)); }
.tile__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.tile__cat { font-family: var(--ui); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-soft); }
.tile__t { font-family: var(--ui); font-size: 19px; font-weight: 500; line-height: 1.25; }
.tile--big .tile__t { font-size: 28px; }

.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 12px; }
.mosaic .tile--big { grid-column: span 2; grid-row: span 2; }
.mosaic .tile:nth-child(n+6) { grid-column: span 2; }
.mosaic .tile:nth-child(even):last-child:nth-child(n+6) { grid-column: span 4; }

.routes { margin-top: 64px; background: var(--emerald); color: #fff; padding: 48px 0 56px; }
.routes .blk__t { color: #fff; }
.routes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.route { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n d" "t t" "e e"; column-gap: 10px; padding: 22px 24px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px; color: #fff; text-decoration: none; }
.route:hover { background: rgba(255, 255, 255, .06); border-color: var(--gold); }
.route__n { grid-area: n; font-family: var(--ui); font-size: 64px; line-height: .9; color: var(--gold); font-weight: 500; }
.route__d { grid-area: d; align-self: end; font-family: var(--ui); font-size: 20px; }
.route__t { grid-area: t; font-family: var(--ui); font-size: 19px; font-weight: 500; margin-top: 16px; line-height: 1.3; }
.route__ex { grid-area: e; font-size: 15px; opacity: .8; margin-top: 6px; line-height: 1.5; }

.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 23%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.strip .tile { aspect-ratio: 3 / 4; scroll-snap-align: start; min-height: 0; }

.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.col__t { font-size: 20px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--emerald); }
.col__t a { color: var(--ink); text-decoration: none; }
.col ul { list-style: none; margin: 0; padding: 0; font-size: 17px; }
.col li { padding: 6px 0; border-bottom: 1px solid var(--line); line-height: 1.4; }
.col li a { color: var(--text); text-decoration: none; }
.col li a:hover { color: var(--emerald); }
.find-row { margin-top: 36px; max-width: 560px; }
.kfind { display: flex; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 4px; font-family: var(--ui); }
.kfind input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 16px var(--ui); padding: 8px 14px; }
.kfind input:focus { outline: none; }
.kfind button { border: 0; background: var(--emerald); color: #fff; font: 500 15px var(--ui); padding: 0 18px; border-radius: 999px; cursor: pointer; }

/* ---------- Рубрика ---------- */
.phead { padding-top: 40px; padding-bottom: 12px; }
.phead__k { font-family: var(--ui); color: var(--muted); margin: 0 0 4px; font-size: 15px; }
.phead__t { font-size: 44px; margin: 0 0 10px; }
.phead__d { color: var(--muted); max-width: 40em; }
.phead__d p { margin: 0 0 12px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; margin-top: 16px; }
.card__img { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: #cfc4ad; margin-bottom: 12px; }
.card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__t { font-size: 21px; margin: 0 0 6px; }
.card__t a { color: var(--ink); text-decoration: none; }
.card__t a:hover { color: var(--emerald); }
.card__ex { margin: 0; font-size: 16px; color: var(--muted); line-height: 1.55; }
.empty { color: var(--muted); }
.pagination { margin-top: 32px; font-family: var(--ui); }
.pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination .page-numbers { padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); text-decoration: none; }
.pagination .current { background: var(--emerald); color: #fff; border-color: var(--emerald); }

/* ---------- Статья ---------- */
.story__hero { position: relative; aspect-ratio: 16 / 7; max-height: 580px; min-height: 360px; display: flex; align-items: flex-end; color: #fff; background: var(--emerald-deep); overflow: hidden; }
.story__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(12, 22, 19, .8)); }
.story__hero--plain { aspect-ratio: auto; min-height: 260px; }
.story__cap { position: relative; z-index: 1; padding-bottom: 36px; }
.story__cat { font-family: var(--ui); display: inline-block; color: var(--ink); background: var(--gold-soft); padding: 3px 12px; border-radius: 999px; font-size: 14px; text-decoration: none; margin-bottom: 12px; }
.story__t { color: #fff; font-size: 48px; margin: 0; max-width: 18em; }
.story__body { max-width: 760px; }
.story__meta { font-family: var(--ui); color: var(--muted); font-size: 15px; margin: 20px 0 18px; }
.inart { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 32px; padding-bottom: 20px; border-bottom: 1px solid var(--line); font-family: var(--ui); font-size: 15px; }
.inart__t { color: var(--muted); margin-right: 4px; }
.inart a { background: var(--paper); border: 1px solid var(--line); padding: 4px 12px; border-radius: 999px; color: var(--ink); text-decoration: none; }
.inart a:hover { border-color: var(--emerald); color: var(--emerald); }
.story__note { margin-top: 36px; font-size: 15px; color: var(--muted); font-style: italic; }
.pg { max-width: 800px; padding-top: 40px; }

.content > * { margin-top: 0; margin-bottom: 1.1em; }
.content h2 { font-size: 30px; margin: 1.7em 0 .55em; }
.content h3 { font-size: 22px; margin: 1.4em 0 .45em; }
.content ul, .content ol { padding-left: 1.3em; }
.content li { margin-bottom: .35em; }
.content li::marker { color: var(--gold); }
.content blockquote { margin: 0 0 1.2em; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold); font-style: italic; }
.content blockquote p { margin: 0; }
.content figure { margin: 1.4em 0; }
.content figure img { border-radius: 6px; width: 100%; }
.content figcaption, .wp-element-caption { font-family: var(--ui); font-size: 14px; color: var(--muted); margin-top: 8px; }
.content hr { border: 0; height: 12px; margin: 2em 0; background: radial-gradient(circle, var(--gold) 2px, transparent 3px) center / 24px 12px repeat-x; }

/* Коротко об объекте */
.facts { margin: 0 0 1.4em; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--emerald); border-radius: 6px; padding: 8px 20px; font-family: var(--ui); font-size: 16px; }
.facts > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); }

/* Дни маршрута */
.content h2.day { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-top: 18px; border-top: 2px solid var(--gold); }
.day__n { font-size: 15px; text-transform: uppercase; letter-spacing: .1em; color: var(--brick); background: var(--gold-soft); padding: 4px 10px; border-radius: 4px; font-weight: 600; }
.day__sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
h2.day + p + ul, h2.day + ul { list-style: none; padding-left: 0; border-left: 2px solid var(--line); margin-left: 6px; }
h2.day + p + ul li, h2.day + ul li { position: relative; padding-left: 20px; font-family: var(--ui); font-size: 17px; }
h2.day + p + ul li::before, h2.day + ul li::before { content: ""; position: absolute; left: -7px; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--emerald); border: 2px solid var(--stone); }

.tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl table { width: 100%; border-collapse: collapse; font-family: var(--ui); font-size: 16px; min-width: 460px; }
.tbl th { text-align: left; font-weight: 500; padding: 10px 12px; border-bottom: 2px solid var(--emerald); }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.wp-block-table { margin: 0 0 1.2em; }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.trio .tile { aspect-ratio: 4 / 3; min-height: 0; }

.slot { margin: 28px 0; }
.offer { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 16px 20px; font-family: var(--ui); }
.offer__note { font-size: 12px; color: var(--muted); }
.offer__title { margin: 2px 0; font-weight: 500; }
.offer__text { margin: 0; font-size: 15px; color: var(--muted); }
.offer__btn { background: var(--emerald); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.nf { padding-top: 56px; max-width: 640px; }

/* ---------- Подвал ---------- */
.foot { margin-top: 80px; background: var(--emerald-deep); color: rgba(255, 255, 255, .78); font-family: var(--ui); font-size: 15px; padding-bottom: 24px; }
.foot__orn { height: 10px; background: linear-gradient(135deg, var(--gold) 25%, transparent 25%) -5px 0 / 20px 10px, linear-gradient(225deg, var(--gold) 25%, transparent 25%) -5px 0 / 20px 10px; opacity: .9; }
.foot__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; align-items: start; padding-top: 32px; }
.logo--foot { color: #fff; }
.logo--foot em { color: var(--gold-soft); }
.foot__t { margin: 0; max-width: 40em; line-height: 1.55; }
.foot__l { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.foot__l a { color: #fff; text-decoration: none; }
.foot__l a:hover { color: var(--gold-soft); }
.foot__c { margin-top: 20px; font-size: 13px; opacity: .7; }

/* ---------- ≤920 ---------- */
@media (max-width: 920px) {
	.site__row { flex-wrap: wrap; gap: 0; min-height: 0; padding-top: 14px; }
	.site__nav { margin: 8px -16px 0; padding: 0 16px 10px; flex-basis: calc(100% + 32px); overflow-x: auto; scrollbar-width: none; }
	.site__nav::-webkit-scrollbar { display: none; }
	.menu { flex-wrap: nowrap; justify-content: flex-start; }
	.menu a { white-space: nowrap; }
	.hero { min-height: 560px; }
	.hero__t { font-size: 40px; }
	.mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
	.mosaic .tile:nth-child(n+6) { grid-column: auto; }
	.mosaic .tile:nth-child(even):last-child, .mosaic .tile:nth-child(even):last-child:nth-child(n+6) { grid-column: span 2; }
	.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.strip { grid-auto-columns: minmax(200px, 38%); }
	.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.story__t { font-size: 38px; }
	.foot__row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.foot__l { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
}

/* ---------- ≤560 ---------- */
@media (max-width: 560px) {
	body { font-size: 17px; }
	.logo { font-size: 20px; }
	.hero { min-height: 520px; }
	.hero__in { padding-top: 130px; padding-bottom: 32px; }
	.hero__t { font-size: 30px; }
	.hero__lead { font-size: 17px; }
	.blk { margin-top: 48px; }
	.blk__t { font-size: 25px; }
	.mosaic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 190px; gap: 8px; }
	.mosaic .tile--big { grid-column: span 2; grid-row: span 1; }
	.tile { min-height: 0; }
	.tile__cap { padding: 10px 12px; }
	.tile__t { font-size: 16px; }
	.tile--big .tile__t { font-size: 21px; }
	.tile__cat { font-size: 11px; }
	.routes { padding: 36px 0 40px; }
	.routes__grid, .cards, .cols, .trio { grid-template-columns: minmax(0, 1fr); }
	.route { padding: 18px 20px; }
	.route__n { font-size: 48px; }
	.strip { grid-auto-columns: 62%; }
	.phead__t { font-size: 32px; }
	.story__hero { aspect-ratio: 4 / 5; max-height: 520px; min-height: 340px; }
	.story__t { font-size: 28px; }
	.content h2 { font-size: 24px; }
	.facts { padding: 4px 14px; }
	.facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.trio .tile { aspect-ratio: 16 / 9; }
	.offer { flex-direction: column; align-items: flex-start; }
}