/* ===========================================================================
   СТОРІНКА «ВІДГУКИ»
   ---------------------------------------------------------------------------
   Підключається лише там, де стоїть шаблон template-vidhuky.php. Тут тільки
   розкладка цієї сторінки: колір, шрифт і кегль беруться токенами зі
   style.css, базова типографіка — з page.css, тож він має йти першим.

   Тла кремового немає ніде: сторінка біла, і єдина зафарбована смуга —
   темна секція Google на --gtk-ink.
   =========================================================================== */

/* 1. Шапка сторінки — на білому, як «Контакти» */
.gtk-vidhuky__hero { padding-block: var(--gtk-section-gap); }
.gtk-vidhuky__hero .gtk-container { max-width: 1160px; }
.gtk-vidhuky__title { font-size: clamp(38px, 5.4vw, 72px); line-height: 1.06; max-width: 16ch; margin: 0 0 24px; }
.gtk-vidhuky__lead { margin: 0; }

/* 2. Google — темна секція */
.gtk-vidhuky__google-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.gtk-vidhuky__widget-note { font-size: 14px; line-height: 1.55; color: var(--gtk-text-inv); max-width: 56ch; margin: 0 0 34px; }
.gtk-vidhuky__g-summary { display: flex; align-items: baseline; gap: 22px; margin-bottom: 36px; }
.gtk-vidhuky__g-big { font-family: var(--gtk-font-display); font-size: clamp(64px, 6vw, 96px); line-height: 1; font-weight: 500; color: var(--gtk-cream); font-feature-settings: 'tnum'; }
.gtk-vidhuky__g-sub { font-size: 12.5px; letter-spacing: var(--gtk-track-kicker); text-transform: uppercase; color: var(--gtk-text-inv); }
.gtk-vidhuky__g-sub .gtk-vidhuky__stars { display: block; margin-bottom: 8px; }
.gtk-vidhuky__g-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; }
.gtk-vidhuky__g-card { padding-top: 22px; border-top: 1px solid var(--gtk-line-inv); }
.gtk-vidhuky__g-card p { font-size: var(--gtk-small); line-height: var(--gtk-lh-small); color: var(--gtk-cream); margin: 10px 0 12px; }
.gtk-vidhuky__g-card footer { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gtk-text-inv); }
.gtk-vidhuky__g-card footer b { font-weight: 500; color: var(--gtk-bronze-on-ink); }
.gtk-section--ink .gtk-vidhuky__stars-off { color: rgba(242, 230, 217, 0.22); }

.gtk-vidhuky__cta h2 { max-width: 14ch; }
.gtk-vidhuky__cta p { max-width: 44ch; }
.gtk-vidhuky__cta .gtk-btn { margin: 30px 0 22px; }
.gtk-vidhuky__hint { font-size: var(--gtk-small); line-height: var(--gtk-lh-small); }
.gtk-vidhuky__alt { font-size: var(--gtk-small); line-height: var(--gtk-lh-small); margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--gtk-line-inv); }
.gtk-vidhuky__alt a { color: var(--gtk-bronze-on-ink); border-bottom: 1px solid currentColor; }
.gtk-vidhuky__alt a:hover { color: var(--gtk-cream); }

/* 3. Архів */
.gtk-vidhuky__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: clamp(44px, 6vw, 80px); }
.gtk-vidhuky__head h2 { margin: 0; max-width: 16ch; }

/* Зведення в одній рамці — як факти на «Про нас» */
.gtk-vidhuky__facts { display: grid; grid-template-columns: repeat(3, auto); margin: 0; padding: 0; list-style: none; border: 1px solid var(--gtk-line); }
.gtk-vidhuky__fact { padding: 22px 30px 24px; border-left: 1px solid var(--gtk-line); min-width: 150px; }
.gtk-vidhuky__fact:first-child { border-left: 0; }
.gtk-vidhuky__fact-value { display: block; font-family: var(--gtk-font-display); font-size: clamp(30px, 3.1vw, 42px); line-height: 1.05; color: var(--gtk-ink); font-weight: 500; font-feature-settings: 'tnum'; margin-bottom: 8px; }
.gtk-vidhuky__fact-value small { font-size: 0.55em; color: var(--gtk-bronze-text); }
.gtk-vidhuky__fact-note { display: block; font-size: 14px; line-height: 1.55; color: var(--gtk-text); }

.gtk-vidhuky__list { column-count: 2; column-gap: clamp(40px, 5vw, 96px); }
.gtk-vidhuky__item { break-inside: avoid; padding: 0 0 40px; margin: 0 0 40px; border-bottom: 1px solid var(--gtk-line); }
.gtk-vidhuky__item.is-hidden { display: none; }
.gtk-vidhuky__stars { font-size: 13px; letter-spacing: 0.16em; color: var(--gtk-bronze); }
.gtk-vidhuky__stars-off { color: var(--gtk-line-strong); }
.gtk-vidhuky__text { font-family: var(--gtk-font-display); font-size: clamp(22px, 2.3vw, 30px); line-height: 1.36; color: var(--gtk-ink); font-weight: 500; letter-spacing: var(--gtk-track-display); margin: 14px 0 18px; text-wrap: pretty; }
.gtk-vidhuky__text::before { content: "«"; }
.gtk-vidhuky__text::after { content: "»"; }
.gtk-vidhuky__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; letter-spacing: 0.02em; }
.gtk-vidhuky__name { color: var(--gtk-bronze-text); font-weight: 500; }
.gtk-vidhuky__date { color: var(--gtk-text-muted); font-feature-settings: 'tnum'; }
.gtk-vidhuky__reply { margin: 18px 0 0; padding-left: 22px; border-left: 1px solid var(--gtk-bronze); font-size: var(--gtk-small); line-height: var(--gtk-lh-small); color: var(--gtk-text); }
.gtk-vidhuky__reply-who { display: block; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gtk-bronze-text); margin-bottom: 4px; }

.gtk-vidhuky__more { text-align: center; padding-top: 16px; }
.gtk-vidhuky__more.is-done { display: none; }

@media (max-width: 900px) {
	.gtk-vidhuky__google-grid { grid-template-columns: 1fr; gap: 48px; }
	.gtk-vidhuky__g-cards { grid-template-columns: 1fr; }
	.gtk-vidhuky__list { column-count: 1; }
	.gtk-vidhuky__facts { grid-template-columns: repeat(3, 1fr); width: 100%; }
	.gtk-vidhuky__fact { padding: 18px 16px 20px; min-width: 0; }
}