/* ==========================================================================
   imotigreece-design — Основа
   Нормализация, типография, контейнер, секции, мрежа, eyebrow.
   Стойности: само var(--ig-...). Спецификация: design/DESIGN.md
   ========================================================================== */

/* --- Нормализация -------------------------------------------------------
   Темата носи bootstrap reset (box-sizing, margin-нули), затова тук само
   това, което той не покрива. */
html {
	-webkit-text-size-adjust: 100%;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* --- Тяло --------------------------------------------------------------- */
body.imotigreece-design {
	background-color: var(--ig-surface);
	color: var(--ig-text);
	font-family: var(--ig-font-body);
	font-size: var(--ig-fs-body);
	font-weight: 400;
	line-height: var(--ig-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* --- Заглавия (DESIGN.md §3) -------------------------------------------
   Playfair Display само >=28px → h1/h2. Всичко под 28px е Golos Text. */
body.imotigreece-design h1,
body.imotigreece-design h2,
body.imotigreece-design h3,
body.imotigreece-design h4,
body.imotigreece-design h5,
body.imotigreece-design h6 {
	margin: 0 0 var(--ig-s-4);
	color: var(--ig-text);
	font-family: var(--ig-font-body);
	font-weight: 600;
	text-wrap: balance;
}

body.imotigreece-design h1 {
	font-family: var(--ig-font-display);
	font-size: var(--ig-fs-hero);
	font-weight: 600;
	line-height: var(--ig-lh-tight);
	letter-spacing: -0.015em;
}

body.imotigreece-design h2 {
	font-family: var(--ig-font-display);
	font-size: var(--ig-fs-display);
	font-weight: 600;
	line-height: var(--ig-lh-display);
	letter-spacing: -0.01em;
}

body.imotigreece-design h3 {
	font-size: var(--ig-fs-section);
	line-height: var(--ig-lh-heading);
	letter-spacing: 0.01em;
}

body.imotigreece-design h4 {
	font-size: var(--ig-fs-subhead);
	line-height: 1.4;
}

body.imotigreece-design h5 {
	font-size: var(--ig-fs-body-sm);
	line-height: 1.4;
}

body.imotigreece-design h6 {
	font-size: var(--ig-fs-small);
	line-height: 1.4;
	color: var(--ig-text-secondary);
}

/* --- Текст -------------------------------------------------------------- */
body.imotigreece-design p {
	margin: 0 0 1.25rem;
	text-wrap: pretty;
}

body.imotigreece-design strong,
body.imotigreece-design b {
	font-weight: 700;
}

body.imotigreece-design em,
body.imotigreece-design i {
	font-style: italic;
}

body.imotigreece-design small {
	font-size: var(--ig-fs-small);
	color: var(--ig-text-tertiary);
}

/* --- Линкове ------------------------------------------------------------ */
body.imotigreece-design a {
	color: var(--ig-link);
	text-decoration: none;
	transition: color var(--ig-t-base) ease;
}

body.imotigreece-design a:hover {
	color: var(--ig-link-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* Пръстен при клавиатурен фокус — само :focus-visible, не при мишка */
body.imotigreece-design a:focus-visible,
body.imotigreece-design [tabindex]:focus-visible {
	outline: none;
	border-radius: var(--ig-radius-sm);
	box-shadow: 0 0 0 3px var(--ig-focus-ring);
}

/* --- Списъци в съдържание (не в навигацията) --------------------------- */
body.imotigreece-design .ig-section ul,
body.imotigreece-design .ig-section ol,
body.imotigreece-design .entry-content ul,
body.imotigreece-design .entry-content ol {
	margin: 0 0 1.25rem;
	padding-left: 1.35em;
}

body.imotigreece-design .ig-section li,
body.imotigreece-design .entry-content li {
	margin-bottom: var(--ig-s-2);
}

body.imotigreece-design .ig-section li::marker,
body.imotigreece-design .entry-content li::marker {
	color: var(--ig-accent-dark);
}

/* --- Цитат (редакторски) ------------------------------------------------ */
body.imotigreece-design blockquote {
	margin: var(--ig-s-6) 0;
	padding-left: var(--ig-s-5);
	border-left: 3px solid var(--ig-accent);
	font-family: var(--ig-font-display);
	font-size: clamp(1.75rem, 2.2vw, 2rem);
	font-weight: 500;
	font-style: italic;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--ig-text);
	quotes: none;
}

body.imotigreece-design blockquote p {
	margin: 0;
}

body.imotigreece-design blockquote cite,
body.imotigreece-design blockquote footer {
	display: block;
	margin-top: var(--ig-s-3);
	font-family: var(--ig-font-body);
	font-size: var(--ig-fs-small);
	font-style: normal;
	font-weight: 500;
	color: var(--ig-text-tertiary);
}

/* --- Таблици в съдържание ---------------------------------------------- */
body.imotigreece-design .ig-section table,
body.imotigreece-design .entry-content table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

body.imotigreece-design .ig-section th,
body.imotigreece-design .ig-section td,
body.imotigreece-design .entry-content th,
body.imotigreece-design .entry-content td {
	padding: var(--ig-s-3) var(--ig-s-4) var(--ig-s-3) 0;
	border-bottom: 1px solid var(--ig-border-subtle);
	vertical-align: top;
}

body.imotigreece-design .ig-section th,
body.imotigreece-design .entry-content th {
	font-size: var(--ig-fs-meta);
	font-weight: 600;
	color: var(--ig-text-tertiary);
}

/* --- Фигури ------------------------------------------------------------- */
body.imotigreece-design figure {
	margin: 0 0 1.25rem;
}

body.imotigreece-design figure img {
	border-radius: var(--ig-radius-lg);
}

body.imotigreece-design figcaption {
	margin-top: var(--ig-s-2);
	font-size: var(--ig-fs-caption);
	font-weight: 500;
	line-height: 1.4;
	color: var(--ig-text-tertiary);
}

/* --- Контейнер ---------------------------------------------------------- */
.ig-container {
	width: 100%;
	max-width: var(--ig-container);
	margin-inline: auto;
	padding-inline: var(--ig-gutter);
}

@media (min-width: 576px) {
	.ig-container { --ig-gutter: 24px; }
}
@media (min-width: 768px) {
	.ig-container { --ig-gutter: 32px; }
}
@media (min-width: 1024px) {
	.ig-container { --ig-gutter: 40px; }
}
@media (min-width: 1280px) {
	.ig-container { --ig-gutter: 48px; }
}

/* --- Контейнер на темата (Bootstrap `.container`) -----------------------
   Темата дава max-width 1170 (съдържание 1140), докато хедърът и героят са
   наложени на 1280 (DESIGN.md §5). Затова вътрешното съдържание не съвпада
   по ширина нито с хедъра, нито с героя. Изравняваме го към същите
   стойности като .ig-container: max-width 1280, gutter 16 → 24 → 32 → 40 → 48
   (DESIGN.md §5, §8). Хедърът има собствено правило с равна специфичност в
   header.css и се зарежда след този файл — неговото остава в сила. */
body.imotigreece-design .container {
	width: 100%;
	max-width: var(--ig-container);   /* 1280px */
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ig-gutter);
	padding-right: var(--ig-gutter);
}

@media (min-width: 576px) {
	body.imotigreece-design .container { --ig-gutter: 24px; }
}
@media (min-width: 768px) {
	body.imotigreece-design .container { --ig-gutter: 32px; }
}
@media (min-width: 1024px) {
	body.imotigreece-design .container { --ig-gutter: 40px; }
}
@media (min-width: 1280px) {
	body.imotigreece-design .container { --ig-gutter: 48px; }
}

/* --- Секции ------------------------------------------------------------- */
.ig-section {
	padding-block: var(--ig-section-y);
}

.ig-section--alt {
	background-color: var(--ig-surface-alt);
}

.ig-section--dark {
	background-color: var(--ig-surface-dark);
	color: var(--ig-text-on-dark);
}

/* Ролите се сменят от .ig-on-dark (tokens.css), който се добавя в markup-а */

/* --- Мрежа -------------------------------------------------------------- */
.ig-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px 28px;
}

@media (min-width: 768px) {
	.ig-grid--2,
	.ig-grid--3,
	.ig-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.ig-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ig-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ig-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Eyebrow ------------------------------------------------------------ */
.ig-eyebrow {
	display: block;
	margin: 0 0 var(--ig-s-3);
	font-family: var(--ig-font-body);
	font-size: var(--ig-fs-eyebrow);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ig-accent-dark);
}

.ig-on-dark .ig-eyebrow,
.ig-section--dark .ig-eyebrow {
	color: var(--ig-accent-light);
}

/* --- Заглавна част на секция ------------------------------------------- */
.ig-section-head {
	max-width: 46rem;
	margin-bottom: var(--ig-s-6);
}

.ig-section-head > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Банер на вътрешните страници — `.page-title` на темата

   Темата носи <h1>/<h2> на всяка страница извън началната в този банер върху
   снимка. Тя сама боядисва заглавието в бяло (`.page-title h1`), но нашето
   `body.imotigreece-design h1` е с по-висока специфичност и печелеше — затова
   заглавието излизаше почти черно (#16191B) върху тъмна снимка: контраст
   2.34:1 при измерени rgb(22,25,27) 64px. Тук банерът се превръща в тъмна
   секция по DESIGN.md: тъмната повърхност (#122A38) като подложка, overlay в
   същия цвят вместо чисто черно, бяло заглавие Display Large и четими
   breadcrumbs. Playfair остава само >=28px (DESIGN.md §3, §7).

   Всички селектори носят `body.imotigreece-design`, за да надделяват над
   правилата на темата с по-висока специфичност (`.page-title h1`,
   `.breadcrumbs li a` и т.н.) — темата не се пипа.
   -------------------------------------------------------------------------- */

/* Височина на банeра — темата подава padding-а като inline стил
   (`page_title_padding` = 80/30), затова е нужен !important.

   Защо се пипа: хедърът е плаващ (`.float-header` → position:absolute, 80px,
   z-index 999) и НЕ заема място в потока. Горната част на банeра остава под
   него и тези 80px `padding-top` се изяждат от хедъра: видимата лента падаше
   до 87px, а 44px Playfair заглавие и breadcrumbs-ите бяха притиснати точно до
   долния му ръб (загл. top == 80 == дъното на хедъра).

   Новите стойности дават на банeра собствена височина: хедър (80px) + 64px
   дишане отгоре + 64px отдолу. Заглавието и breadcrumbs-ите са в `display:
   table` (темата) и се центрират вертикално в съдържателната кутия, тоест в
   средата на видимата лента (~185px при 1440).

   Под 992px темата минава на мобилен хедър, който Е в потока и НЕ застъпва
   банeра (page-title започва под него) — там padding-ът на темата е достатъчен
   и не се пипа. */
@media (min-width: 992px) {
	body.imotigreece-design .page-title {
		padding-top: calc(80px + var(--ig-s-8)) !important; /* 144px */
		padding-bottom: var(--ig-s-8) !important;           /* 64px */
	}
}

/* Подложка: тъмната повърхност и за страниците със снимка, и за тези без нея */
body.imotigreece-design .page-title,
body.imotigreece-design .page-title:not(.page-title-background) {
	background-color: var(--ig-surface-dark);
	color: var(--ig-text-on-dark);
}

/* Затъмняване на снимката: цвят на тъмната повърхност (#122A38), не чисто
   черно. При .78 непрозрачност дори чисто бял пиксел на снимката дава
   контраст 7.3:1 с бяло заглавие — проверено с измерване на реалния кадър. */
body.imotigreece-design .page-title .page-title-background::before {
	background-color: rgba(18, 42, 56, .78);
}

body.imotigreece-design .page-title .page-title-background {
	background-position: center center;
}

/* Заглавие — Display Large (Playfair 600, clamp 32→44px), бяло */
body.imotigreece-design .page-title h1,
body.imotigreece-design .page-title h2 {
	margin: 0 0 var(--ig-s-2);
	font-family: var(--ig-font-display);
	font-size: var(--ig-fs-display);
	font-weight: 600;
	line-height: var(--ig-lh-display);
	letter-spacing: -0.01em;
	color: var(--ig-text-on-dark);
	text-wrap: balance;
}

/* Подзаглавие (описание на категория/архив) — Golos Text 16px */
body.imotigreece-design .page-title p {
	margin-bottom: 0;
	font-family: var(--ig-font-body);
	font-size: var(--ig-fs-body);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--ig-text-on-dark-soft);
	text-wrap: pretty;
}

/* Breadcrumbs — 12px UPPERCASE 600; междинните стъпки са .80 бяло (5.4:1
   върху най-светлия възможен кадър), текущата страница е чисто бяло. */
body.imotigreece-design .page-title .breadcrumbs li a,
body.imotigreece-design .page-title .breadcrumbs li span {
	font-family: var(--ig-font-body);
	font-size: var(--ig-fs-caption);
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ig-text-on-dark-soft);
}

body.imotigreece-design .page-title .breadcrumbs li a:hover,
body.imotigreece-design .page-title .breadcrumbs li a:focus {
	color: var(--ig-text-on-dark);
	text-decoration-color: var(--ig-accent-light);
}

/* Текущата страница — последният <span> в списъка */
body.imotigreece-design .page-title .breadcrumbs li:last-child span {
	color: var(--ig-text-on-dark);
}

/* Иконата „къща" пред breadcrumbs: темата я боядисва в акцента, който в
   контекст „имоти" е превързан към primary (#1B3A4B) — невидим върху тъмно. */
body.imotigreece-design .page-title .breadcrumbs::before {
	color: var(--ig-accent-light);
}

body.imotigreece-design .page-title .breadcrumbs li::after {
	color: rgba(255, 255, 255, .55);
}

/* Статус на имота в банера (вариант „image" на единичния имот) */
body.imotigreece-design .page-title .property-status span {
	background-color: var(--ig-accent-dark);
}

/* Пръстен при клавиатурен фокус — върху тъмно пръстенът трябва да е светъл */
body.imotigreece-design .page-title a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .65);
	border-radius: var(--ig-radius-sm);
}