/* =========================================================================
   Teamfootball — блог (inc/blog.php): сторінка «Блог» і рубрика, стаття, «Товари зі статті», «Читай також», статті
   внизу сторінки товару. Одна картка запису для всіх списків; фото товару (студійний кадр на білому) лежить на світлій
   підкладці зі змішуванням, як у картках каталогу й плитках головної, і обрізається по висоті так, що пара лишається
   цілою. Змішування замкнене в зоні фото (isolation), і в ній нічого не анімується: Safari губить mix-blend-mode,
   щойно змішуваний елемент стає окремим композитним шаром.
   Стаття: текст — колонкою 44rem, фото й товари — на 64rem.
   ====================================================================== */

/* ---- Картка запису ---------------------------------------------------- */
.tf-post-card { position: relative; display: grid; align-content: start; gap: var(--tf-space-4); padding: 0; background: none; border: 0; border-radius: 0; }
.tf-post-card__media { display: block; overflow: hidden; aspect-ratio: var(--tf-media-editorial); border-radius: var(--tf-radius-l); background: var(--tf-surface-subtle); isolation: isolate; }
.tf-post-card__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tf-post-card__media--product img { object-position: 50% 62%; filter: brightness(1.08) contrast(1.08); mix-blend-mode: multiply; }
.tf-post-card__body { display: grid; align-content: start; gap: var(--tf-space-2); min-inline-size: 0; }
.tf-post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-1) var(--tf-space-2); margin: 0; font-family: var(--tf-font-mono); font-size: var(--tf-size-label); letter-spacing: var(--tf-ls-label); text-transform: uppercase; color: var(--tf-text-muted); }
.tf-post-card__rubric { color: var(--tf-text); font-weight: 700; }
.tf-post-card__sep { opacity: 0.6; }
.tf-post-card .tf-post-card__title { margin: 0; font-size: var(--tf-size-heading-small); line-height: 1.05; overflow-wrap: anywhere; }
.tf-post-card__title a { color: var(--tf-text); text-decoration: none; }
/* Уся картка — посилання заголовка (фото — дубль для миші, прихований від клавіатури й читачів екрана). */
.tf-post-card__title a::after { content: ""; position: absolute; inset: 0; }
.tf-post-card:hover .tf-post-card__title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.tf-post-card__title a:focus-visible { outline: none; }
.tf-post-card__title a:focus-visible::after { outline: 3px solid var(--tf-focus); outline-offset: 4px; }
.tf-post-card__lede { display: -webkit-box; overflow: hidden; margin: 0; font-size: var(--tf-size-small); line-height: 1.5; color: var(--tf-text-muted); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.tf-post-card__more { display: inline-flex; align-items: center; gap: var(--tf-space-2); margin: var(--tf-space-2) 0 0; font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 700; letter-spacing: var(--tf-ls-label); text-transform: uppercase; color: var(--tf-text); }
.tf-post-card__more svg { inline-size: var(--tf-icon); block-size: var(--tf-icon); flex: none; }

/* Сітка карток: «Читай також», статті внизу сторінки товару, сторінка блогу після першого запису. */
.tf-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tf-space-7) var(--tf-space-6); margin: 0; padding: 0; list-style: none; }
.tf-post-grid > li { min-inline-size: 0; }

/* ---- Сторінка «Блог» і рубрика -------------------------------------- */
.tf-blog-header { display: grid; gap: var(--tf-space-4); margin-block-end: var(--tf-space-7); padding-block: var(--tf-space-2) var(--tf-space-6); border-block-end: var(--tf-bw-control) solid var(--tf-text); }
.tf-blog-header .tf-breadcrumbs { padding-block: 0; }
.tf-blog-header__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: var(--tf-space-6); align-items: end; }
.tf-blog-header h1 { margin: 0; font-size: var(--tf-size-display); line-height: 0.9; overflow-wrap: anywhere; }
.tf-blog-header__aside { display: grid; gap: var(--tf-space-4); }
.tf-blog-header__lede { margin: 0; font-size: var(--tf-size-body); line-height: 1.55; color: var(--tf-text-muted); }
.tf-blog-rubrics ul { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); margin: 0; padding: 0; list-style: none; }
.tf-blog-rubrics a { display: inline-flex; align-items: center; min-block-size: var(--tf-target); padding-inline: 0.875rem; border: var(--tf-bw) solid var(--tf-text-muted); border-radius: var(--tf-radius-pill); color: var(--tf-text); font-weight: 700; text-decoration: none; white-space: nowrap; }
.tf-blog-rubrics a:hover { border-color: var(--tf-text); }
.tf-blog-rubrics a[aria-current="page"] { border-color: var(--tf-text); background: var(--tf-text); color: var(--tf-on-inverse); }

.tf-blog-list { display: grid; gap: var(--tf-space-8); }
/* Перша сторінка: найновіший запис на дві третини, поруч — два наступні одне під одним. */
.tf-blog-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--tf-space-7); align-items: start; }
.tf-blog-top--single { grid-template-columns: minmax(0, 1fr); }
.tf-blog-side { display: grid; gap: var(--tf-space-6); margin: 0; padding: 0; list-style: none; }
.tf-blog-side > li { min-inline-size: 0; }
.tf-blog-side > li + li { padding-block-start: var(--tf-space-6); border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
.tf-blog-side .tf-post-card__lede { -webkit-line-clamp: 2; }
.tf-post-card--lead .tf-post-card__media { aspect-ratio: 16 / 10; }
.tf-post-card--lead .tf-post-card__body { gap: var(--tf-space-3); }
.tf-post-card--lead .tf-post-card__title { font-size: var(--tf-size-heading); line-height: 0.98; }
.tf-post-card--lead .tf-post-card__lede { max-inline-size: 60ch; font-size: var(--tf-size-body); -webkit-line-clamp: 4; }
.tf-blog-top--single .tf-post-card--lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--tf-space-7); align-items: center; }
.tf-blog-empty { margin: 0; color: var(--tf-text-muted); }
.tf-blog-pagination { justify-content: center; margin-block-start: 0; }

/* ---- Стаття ----------------------------------------------------------- */
.tf-content-page.tf-post { gap: 0; max-inline-size: 64rem; }
.tf-post .tf-prose { max-inline-size: none; } /* Ширину тримають діти: текст — 44rem, товари — на всю статтю. */
/* Заголовки розділів інфо-сторінок «Номер на спині» мають margin з нульовим inline — у статті колонка по центру. */
.tf-variant-content-number .tf-content-page.tf-post .tf-prose > h2 { margin-inline: auto; }
.tf-post .tf-prose > h3 { margin-block: 1.6em 0.4em; font-size: var(--tf-size-heading-small); line-height: 1.1; }
.tf-post .tf-prose > h2 + h3 { margin-block-start: 0.6em; }
.tf-post > .tf-post-header,
.tf-post .tf-prose > *,
.tf-post-hero > figcaption { inline-size: 100%; max-inline-size: var(--tf-content-max); margin-inline: auto; }
.tf-post-header { display: grid; gap: var(--tf-space-4); padding-block-start: var(--tf-space-2); }
.tf-post-header .tf-breadcrumbs { padding-block: 0; }
.tf-post-header__title { margin: 0; font-size: var(--tf-size-heading); line-height: 0.98; overflow-wrap: anywhere; }
.tf-post-header__lede { margin: 0; font-size: var(--tf-size-lede); line-height: 1.5; color: var(--tf-text-muted); }
.tf-post-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-1) var(--tf-space-2); margin: 0; padding-block-start: var(--tf-space-3); border-block-start: var(--tf-bw-divider) solid var(--tf-border); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); letter-spacing: var(--tf-ls-label); text-transform: uppercase; color: var(--tf-text-muted); }
.tf-post-header__author { color: var(--tf-text); font-weight: 700; }

/* Головне фото — ширше за текст, 16:9; фото товару — на підкладці, пара цілою. */
.tf-post-hero { display: grid; gap: var(--tf-space-3); margin: var(--tf-space-6) 0 var(--tf-space-7); }
.tf-post-hero__frame { overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--tf-radius-l); background: var(--tf-surface-subtle); isolation: isolate; }
.tf-post-hero__frame img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tf-post-hero--product .tf-post-hero__frame img { object-position: 50% 62%; filter: brightness(1.08) contrast(1.08); mix-blend-mode: multiply; }
.tf-post-hero figcaption { font-size: var(--tf-size-caption); color: var(--tf-text-muted); }

/* Вставні фото в тексті (core/image з файлом репозиторію, scripts/blog.php): на всю ширину статті, як головне фото,
   підпис під ним — джерело («Фото: Puma»). */
.tf-post .tf-prose > .wp-block-image { max-inline-size: none; margin: var(--tf-space-6) auto var(--tf-space-7); }
.tf-post .tf-prose > .wp-block-image img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--tf-radius-l); background: var(--tf-surface-subtle); }
.tf-post .tf-prose > .wp-block-image figcaption { margin: var(--tf-space-3) 0 0; font-size: var(--tf-size-caption); color: var(--tf-text-muted); text-align: start; }

/* Текст: таблиця порівняння — роздільники рядків, як у прозі; на вузькому екрані таблиця прокручується. */
.tf-post .tf-prose .wp-block-table { margin: 0 auto 1em; overflow-x: auto; }
.tf-post .tf-prose .wp-block-table table { inline-size: 100%; border-collapse: collapse; font-size: var(--tf-size-small); font-variant-numeric: var(--tf-numeric); }
.tf-post .tf-prose .wp-block-table :is(th, td) { padding: var(--tf-space-3); border: 0; border-block-end: var(--tf-bw-divider) solid var(--tf-border); vertical-align: top; text-align: start; }
.tf-post .tf-prose .wp-block-table thead th { border-block-end: var(--tf-bw-control) solid var(--tf-text); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); letter-spacing: var(--tf-ls-label); text-transform: uppercase; color: var(--tf-text-muted); }
.tf-post .tf-prose .wp-block-table tbody th { font-weight: 700; color: var(--tf-text); }
.tf-post .tf-prose .wp-block-table figcaption { margin-block-start: var(--tf-space-2); font-size: var(--tf-size-caption); color: var(--tf-text-muted); }
.tf-post .tf-prose > .wp-block-details { margin-block-start: var(--tf-space-6); }
.tf-post .tf-prose .wp-block-details a[rel~="nofollow"] { overflow-wrap: anywhere; }
.tf-post .tf-prose > .tf-page-credits { margin-block-start: var(--tf-space-4); padding-block-start: var(--tf-space-3); border-block-start: var(--tf-bw-divider) solid var(--tf-border); }

/* Відео товару в статті: квадратний ролик бренду, не ширший за текст (на телефоні — на всю колонку), підпис і посилання на товар під ним. */
.tf-post-video { display: grid; gap: var(--tf-space-2); margin-block: var(--tf-space-6); }
.tf-post .tf-prose > .tf-post-video { max-inline-size: 28rem; margin-inline: auto; }
.tf-post-video video { display: block; inline-size: 100%; block-size: auto; border-radius: var(--tf-radius-l); overflow: hidden; background: var(--tf-surface-subtle); }
.tf-post-video figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tf-space-1) var(--tf-space-4); font-size: var(--tf-size-caption); color: var(--tf-text-muted); }
.tf-post-video figcaption a { display: inline-flex; align-items: center; min-block-size: var(--tf-target); font-weight: 700; }

/* Товари зі статті — на всю ширину статті, картки каталогу чотири в ряд. */
.tf-post .tf-prose > .tf-post-products { max-inline-size: none; }
.tf-post-products { display: grid; gap: var(--tf-space-5); margin-block: var(--tf-space-7); }
.tf-prose .tf-post-products > h2 { margin: 0; }
.tf-post-products__all { margin: 0; }
.tf-post-products__all a { display: inline-flex; align-items: center; gap: var(--tf-space-2); min-block-size: var(--tf-target); font-weight: 700; color: var(--tf-text); text-decoration: none; }
.tf-post-products__all a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.tf-post-products__all svg { inline-size: var(--tf-icon); block-size: var(--tf-icon); flex: none; }
.tf-prose .tf-post-products .tf-card a { color: inherit; text-decoration: none; } /* Картка — як у каталозі, без стилю посилань тексту. */
.tf-prose .tf-post-products .tf-card .tf-card__name:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.tf-prose .tf-post-products .tf-card :is(p, h3, ul) { margin: 0; }
.tf-prose .tf-post-products .tf-grid { margin: 0; padding: 0; }

/* Читай також / статті на сторінці товару */
.tf-post-related { display: grid; gap: var(--tf-space-5); max-inline-size: 64rem; margin: var(--tf-space-9) auto 0; }
.tf-pdp__posts { display: grid; gap: var(--tf-space-5); margin-block-start: var(--tf-space-8); }
.tf-post-related .tf-section-head,
.tf-pdp__posts .tf-section-head { margin: 0; }
.tf-post-related .tf-section-head h2,
.tf-pdp__posts .tf-section-head h2 { margin-block-start: var(--tf-space-2); }

/* ---- Адаптив ---------------------------------------------------------- */
@media (max-width: 63.99rem) {
	.tf-blog-header__row { grid-template-columns: minmax(0, 1fr); gap: var(--tf-space-4); align-items: start; }
	.tf-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tf-blog-top { grid-template-columns: minmax(0, 1fr); gap: var(--tf-space-7); }
	.tf-blog-side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tf-space-6); }
	.tf-blog-side > li + li { padding-block-start: 0; border-block-start: 0; }
	.tf-blog-top--single .tf-post-card--lead { grid-template-columns: minmax(0, 1fr); gap: var(--tf-space-4); }
}
@media (max-width: 47.99rem) {
	.tf-blog-header { margin-block-end: var(--tf-space-5); padding-block-end: var(--tf-space-5); }
	.tf-blog-header h1 { font-size: var(--tf-size-heading); }
	.tf-blog-list { gap: var(--tf-space-6); }
	.tf-post-card--lead .tf-post-card__title { font-size: var(--tf-size-heading-medium); }
	/* Списки на телефоні — рядки: мініатюра ліворуч, текст праворуч. */
	.tf-blog-top { gap: var(--tf-space-5); }
	:is(.tf-post-grid, .tf-blog-side) { grid-template-columns: minmax(0, 1fr); gap: 0; }
	:is(.tf-post-grid, .tf-blog-side) > li { padding-block: var(--tf-space-4); border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
	:is(.tf-post-grid, .tf-blog-side) > li + li { padding-block-start: var(--tf-space-4); border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
	:is(.tf-post-grid, .tf-blog-side) > li:last-child { border-block-end: var(--tf-bw-divider) solid var(--tf-border); }
	:is(.tf-post-grid, .tf-blog-side) .tf-post-card { grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--tf-space-4); align-items: start; }
	:is(.tf-post-grid, .tf-blog-side) .tf-post-card__media { aspect-ratio: 4 / 3; }
	:is(.tf-post-grid, .tf-blog-side) .tf-post-card__media--product img { object-position: 50% 60%; }
	:is(.tf-post-grid, .tf-blog-side) .tf-post-card .tf-post-card__title { font-size: 1.25rem; }
	:is(.tf-post-grid, .tf-blog-side) .tf-post-card__lede { -webkit-line-clamp: 2; }
	.tf-post-hero { margin-block: var(--tf-space-5) var(--tf-space-6); }
	.tf-post .tf-prose > .wp-block-image { margin-block: var(--tf-space-5) var(--tf-space-6); }
	.tf-post-related { margin-block-start: var(--tf-space-8); }
}

/* ---- «Номер на спині»: лінії замість заокруглень --------------------- */
.tf-variant-content-number :is(.tf-post-card__media, .tf-post-hero__frame, .tf-post .tf-prose > .wp-block-image img) { border-radius: 0; }
.tf-variant-content-number .tf-post .tf-prose .tf-post-products > h2 { padding-block-start: var(--tf-space-3); border-block-start: var(--tf-bw-control) solid var(--tf-text); font-size: var(--tf-size-heading-medium); }
.tf-variant-content-number .tf-post-related,
.tf-variant-content-number .tf-pdp__posts { padding-block-start: var(--tf-space-4); border-block-start: var(--tf-bw-control) solid var(--tf-text); }
@media (min-width: 48rem) {
	.tf-variant-content-number .tf-post-grid > li { padding-block-start: var(--tf-space-4); border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
}