/* ===========================================================================
   СТОРІНКА «ДОСТАВКА Й ОПЛАТА»
   ---------------------------------------------------------------------------
   Сторінка зібрана в редакторі зі звичайних блоків WordPress — власник
   править тексти й міняє фото сам, без розробника. Тому селектори тут
   чіпляються за пару «клас теми + клас блока»: `gtk-dostavka__steps` власник
   бачить у панелі «Додатковий клас CSS», а `wp-block-columns` ставить сам
   редактор.

   Базова типографіка, кнопки, кікери й шапки секцій описані в style.css та
   page.css і сюди не переїхали. Токенів теж немає: усі --gtk-* приходять зі
   style.css.

   Файл вантажиться на всіх сторінках — він малий, а окрема умова
   is_page_template() зникла разом із власним шаблоном.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Спільне для секцій зі стандартних блоків
   ---------------------------------------------------------------------------
   Ядро дає кожній групі власні відступи між дітьми (--wp--style--block-gap).
   Усередині наших сіток вони зайві: проміжок задає сама сітка, а зайвий
   margin-block-start у першого елемента з'їдає верхній край рамки.
   --------------------------------------------------------------------------- */
.gtk-dostavka__facts > *,
.gtk-dostavka__pack > *,
.gtk-dostavka__faq > * { margin-block-start: 0; }

/* Шапка секції — той самий флекс, що на решті сайту; тут лише те, чого
   style.css не знає про вкладену групу редактора. */
.gtk-section__head.wp-block-group { margin-bottom: var(--gtk-head-gap); }
.gtk-dostavka__head-main { max-width: 40ch; }
.gtk-dostavka__head-main > * { margin-block-start: 0; }
.gtk-section__head.wp-block-group > p {
	max-width: 360px;
	padding-bottom: 8px;
	margin: 0;
	font-size: var(--gtk-small);
	line-height: var(--gtk-lh-small);
}

/* ---------------------------------------------------------------------------
   0. Лід і зведення
   --------------------------------------------------------------------------- */

.gtk-dostavka__intro { padding-block: clamp(36px, 5vw, 72px); }

.gtk-dostavka__intro .gtk-lead { margin: 0 0 clamp(32px, 4vw, 48px); }

/*
 * Зведення — одна рамка на чотири клітинки, а не чотири окремі картки.
 *
 * Лінії всередині малюються межами самих клітинок: зовнішня рамка одна, а
 * ліва й верхня межі вмикаються лише там, де клітинка не стоїть скраю. Так
 * на стику не подвоюється товщина, і сітка лишається волосяною.
 */
.gtk-dostavka__facts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border: 1px solid var(--gtk-line);
	/*
	 * Ширина обмежена, хоч рамка й стоїть сама в рядку.
	 *
	 * У макеті зведення займало праву колонку поруч із лідом — приблизно
	 * 520 пікселів на екрані 1440. Лід переїхав у шапку сторінки, і без
	 * стелі рамка розповзалася на весь контейнер: чотири короткі рядки
	 * всередині півтори тисячі пікселів читалися як порожня таблиця.
	 */
	max-width: 560px;
}

.gtk-dostavka__fact {
	padding: 22px 28px 24px;
	border-left: 1px solid var(--gtk-line);
	border-top: 1px solid var(--gtk-line);
}

.gtk-dostavka__fact:nth-child(-n+2) { border-top: 0; }
.gtk-dostavka__fact:nth-child(odd) { border-left: 0; }

.gtk-dostavka__fact > * { margin-block-start: 0; }

.gtk-dostavka__fact-value {
	font-family: var(--gtk-font-display);
	font-size: clamp(30px, 3.1vw, 42px);
	line-height: 1.05;
	color: var(--gtk-ink);
	font-weight: 500;
	/* tnum — щоб «50» і «~10» стояли на однаковій ширині цифри. */
	font-feature-settings: 'tnum';
	margin: 0 0 6px;
}

.gtk-dostavka__fact-value small {
	font-size: .55em;
	color: var(--gtk-bronze-text);
}

.gtk-dostavka__fact-note {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   1. Кроки замовлення
   --------------------------------------------------------------------------- */

/*
 * Колонки редактора стають сіткою.
 *
 * Стандартний блок «Колонки» — це флекс, і п'ять колонок у ньому тягнуться
 * за вмістом: крок із довгим абзацом ставав удвічі ширшим за сусіда. Сітка
 * дає рівні смуги незалежно від тексту, а власник і далі бачить звичайний
 * блок «Колонки» з п'ятьма колонками всередині.
 *
 * Номер малює лічильник, а не розмітка: вписані руками «01», «02» довелося
 * б правити щоразу, коли крок додають або міняють місцями.
 */
.gtk-dostavka__steps.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	counter-reset: step;
	border-top: 1px solid var(--gtk-line-strong);
	margin-bottom: 0;
}

.gtk-dostavka__steps > .wp-block-column {
	counter-increment: step;
	padding: 26px 28px 0 0;
	border-right: 1px solid var(--gtk-line);
	margin-right: 28px;
	flex-basis: auto;
}

.gtk-dostavka__steps > .wp-block-column:last-child {
	border-right: 0;
	margin-right: 0;
}

.gtk-dostavka__steps > .wp-block-column::before {
	content: "0" counter(step);
	display: block;
	font-family: var(--gtk-font-display);
	font-size: clamp(34px, 3.2vw, 46px);
	line-height: 1;
	color: var(--gtk-bronze-text);
	font-weight: 500;
	font-feature-settings: 'tnum';
	margin-bottom: 18px;
}

.gtk-dostavka__steps > .wp-block-column > * { margin-block-start: 0; }
.gtk-dostavka__steps h3 { margin: 0 0 10px; font-size: var(--gtk-h3); }

.gtk-dostavka__steps p {
	margin: 0;
	font-size: var(--gtk-small);
	line-height: var(--gtk-lh-small);
}

.gtk-dostavka__step-when {
	display: block;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gtk-text-muted);
	margin-bottom: 8px !important;
}

/* ---------------------------------------------------------------------------
   2. Способи доставки
   --------------------------------------------------------------------------- */

/* Блок «Таблиця» загортає таблицю у figure — клас теми лишається на ньому. */
.gtk-dostavka__table.wp-block-table { margin: 0; }

.gtk-dostavka__table table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--gtk-line);
	font-size: var(--gtk-small);
	line-height: var(--gtk-lh-small);
}

.gtk-dostavka__table th,
.gtk-dostavka__table td {
	padding: 22px 26px;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-top: 1px solid var(--gtk-line);
	border-left: 1px solid var(--gtk-line);
	word-break: normal;
}

.gtk-dostavka__table th:first-child,
.gtk-dostavka__table td:first-child { border-left: 0; }

.gtk-dostavka__table thead th {
	border-top: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gtk-text-muted);
	padding-block: 16px;
}

/*
 * Перша клітинка рядка — назва способу.
 *
 * Це <td>, а не <th scope="row">: стандартний блок «Таблиця» вміє робити
 * заголовки лише в шапці, а вписаний руками <th> редактор при першому ж
 * збереженні перепише назад. Вигляд заголовка дає стиль.
 */
.gtk-dostavka__table tbody td:first-child {
	font-family: var(--gtk-font-display);
	font-size: var(--gtk-h3);
	font-weight: 500;
	color: var(--gtk-ink);
	letter-spacing: var(--gtk-track-display);
	line-height: 1.25;
	width: 22%;
}

.gtk-dostavka__table tbody td:first-child small {
	display: block;
	font-family: var(--gtk-font-body);
	font-size: 13px;
	letter-spacing: .02em;
	color: var(--gtk-text-muted);
	margin-top: 6px;
}

/* <br> перед підзаголовком потрібен лише редактору: у верстці рядок і так
   блоковий, а зайвий перенос додає порожню стрічку. */
.gtk-dostavka__table tbody td:first-child br { display: none; }

.gtk-dostavka__note {
	font-size: var(--gtk-small);
	line-height: var(--gtk-lh-small);
	color: var(--gtk-text-muted);
	max-width: 70ch;
	margin: 22px 0 0;
}

/* ---------------------------------------------------------------------------
   3. Пакування
   --------------------------------------------------------------------------- */

.gtk-dostavka__pack {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 48px) clamp(20px, 2.4vw, 36px);
}

/*
 * Знімок у волосяній рамці, без полів.
 *
 * Паспарту тут колись було — щоб звести до спільного знаменника кадри,
 * зняті на виробництві в різних умовах. Воно працювало проти них: фото й
 * так стоїть у сітці з п'ятьма сусідками, а поле крало в нього ширину.
 */
.gtk-dostavka__pack figure.wp-block-image {
	margin: 0;
	display: grid;
	gap: 16px;
}

.gtk-dostavka__pack figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 1px solid var(--gtk-line);
}

/* Підпис: назва серифом, далі звичайний текст. Ліворуч, а не по центру:
   по центру його ставить ядро, і в сітці з трьох колонок це читається як
   галерея, а не як пояснення. */
.gtk-dostavka__pack figcaption {
	margin: 0;
	text-align: left;
	font-size: var(--gtk-small);
	line-height: var(--gtk-lh-small);
	color: var(--gtk-text);
}

.gtk-dostavka__pack figcaption strong {
	display: block;
	font-family: var(--gtk-font-display);
	font-size: var(--gtk-h3);
	font-weight: 500;
	color: var(--gtk-ink);
	letter-spacing: var(--gtk-track-display);
	line-height: 1.25;
	margin-bottom: 6px;
}

/* Перенос після назви потрібен лише редактору — тут назва вже блокова. */
.gtk-dostavka__pack figcaption strong + br { display: none; }

/* ---------------------------------------------------------------------------
   4. У день доставки
   --------------------------------------------------------------------------- */

.gtk-dostavka__day.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 clamp(28px, 3.5vw, 64px);
	margin-bottom: 0;
}

.gtk-dostavka__day > .wp-block-column {
	padding-top: 24px;
	border-top: 1px solid var(--gtk-line-inv);
	flex-basis: auto;
}

.gtk-dostavka__day > .wp-block-column > * { margin-block-start: 0; }
.gtk-dostavka__day h3 { margin: 0 0 12px; font-size: var(--gtk-h3); }

.gtk-dostavka__day p {
	margin: 0;
	font-size: var(--gtk-small);
	line-height: var(--gtk-lh-small);
}

.gtk-dostavka__day-lead {
	max-width: 62ch;
	margin: 0 0 clamp(36px, 4.5vw, 56px);
}

/* ---------------------------------------------------------------------------
   5. Часті питання
   --------------------------------------------------------------------------- */

/*
 * Розкриває сам браузер: стандартний блок «Деталі» — це <details>, і жодного
 * скрипта тут немає. Власний трикутник ядра прибраний, замість нього плюс,
 * який повертається в хрестик: так не смикається ширина рядка.
 */
.gtk-dostavka__faq {
	border-top: 1px solid var(--gtk-line-strong);
	max-width: 960px;
}

.gtk-dostavka__faq .wp-block-details {
	border-bottom: 1px solid var(--gtk-line);
	margin: 0;
}

.gtk-dostavka__faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	gap: 24px;
	align-items: baseline;
	padding: 22px 0;
	font-family: var(--gtk-font-display);
	font-size: var(--gtk-h3);
	font-weight: 500;
	color: var(--gtk-ink);
	letter-spacing: var(--gtk-track-display);
	line-height: 1.3;
}

.gtk-dostavka__faq summary::marker { content: ""; }
.gtk-dostavka__faq summary::-webkit-details-marker { display: none; }

.gtk-dostavka__faq summary::after {
	content: "+";
	flex: none;
	color: var(--gtk-bronze-text);
	font-size: 26px;
	line-height: 1;
	font-weight: 400;
	transition: transform var(--gtk-transition);
}

.gtk-dostavka__faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.gtk-dostavka__faq summary:hover { color: var(--gtk-bronze-text); }

.gtk-dostavka__faq .wp-block-details p {
	padding: 0 48px 26px 0;
	margin: 0;
	font-size: var(--gtk-small);
	line-height: var(--gtk-lh-small);
	max-width: 66ch;
}

/* ---------------------------------------------------------------------------
   6. Заклик до прорахунку
   --------------------------------------------------------------------------- */

.gtk-dostavka__cta-grid.wp-block-columns {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	gap: 40px clamp(40px, 6vw, 120px);
	align-items: center;
	margin-bottom: 0;
}

.gtk-dostavka__cta-grid > .wp-block-column { flex-basis: auto; }
.gtk-dostavka__cta-grid > .wp-block-column > * { margin-block-start: 0; }

.gtk-dostavka__cta h2 {
	max-width: 16ch;
	margin: 0 0 20px;
}

.gtk-dostavka__cta p { max-width: 52ch; }

/* Друга колонка — контакти за лінією. */
.gtk-dostavka__cta-grid > .wp-block-column:last-child {
	border-top: 1px solid var(--gtk-line-inv);
	padding-top: 24px;
}

.gtk-dostavka__cta-phone {
	font-family: var(--gtk-font-display);
	font-size: clamp(30px, 3vw, 40px);
	line-height: 1.1;
	margin: 0 0 6px;
	font-feature-settings: 'tnum';
}

.gtk-dostavka__cta-phone a {
	color: var(--gtk-cream);
	font-weight: 500;
}

.gtk-dostavka__cta-phone a:hover { color: var(--gtk-bronze-on-ink); }

.gtk-dostavka__cta-who {
	font-size: 13px;
	letter-spacing: .04em;
	margin: 0 0 26px;
}

.gtk-dostavka__cta-hours {
	margin: 0;
	font-size: var(--gtk-small);
	line-height: var(--gtk-lh-small);
}

/*
 * Кнопка редактора вдягається в тему.
 *
 * Стандартний «wp-block-button__link» приходить із власним фоном, скругленням
 * і кеглем від theme.json Astra. Селектор навмисно довгий: у цій парі класів
 * ваги вистачає, щоб перебити їх без !important, — а клас gtk-btn лишається
 * тим самим, який власник бачить у панелі й упізнає з решти сайту.
 */
.gtk-dostavka__cta .wp-block-button.gtk-btn { margin: 0; }

.gtk-dostavka__cta .wp-block-button.gtk-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--gtk-btn-h);
	padding: 15px var(--gtk-btn-px);
	background: transparent;
	border: 1px solid rgba(242, 230, 217, .75);
	border-radius: 0;
	color: var(--gtk-cream);
	font-family: var(--gtk-font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.2;
	transition: background-color var(--gtk-transition), border-color var(--gtk-transition), color var(--gtk-transition);
}

.gtk-dostavka__cta .wp-block-button.gtk-btn .wp-block-button__link:hover,
.gtk-dostavka__cta .wp-block-button.gtk-btn .wp-block-button__link:focus {
	background: rgba(242, 230, 217, .14);
	border-color: rgba(242, 230, 217, .9);
	color: var(--gtk-white);
}

/* ---------------------------------------------------------------------------
   Вузькі екрани
   --------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	/* П'ять кроків в один ряд перестають читатися: колонка вужча за слово. */
	.gtk-dostavka__steps.wp-block-columns {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 28px;
	}
	.gtk-dostavka__steps > .wp-block-column:nth-child(3) {
		border-right: 0;
		margin-right: 0;
	}
}

@media (max-width: 900px) {
	.gtk-dostavka__cta-grid.wp-block-columns { grid-template-columns: 1fr; }

	.gtk-dostavka__pack { grid-template-columns: repeat(2, 1fr); }

	.gtk-dostavka__day.wp-block-columns {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/*
	 * Таблиця розсипається на картки.
	 *
	 * П'ять стовпців на телефоні дають колонку завширшки в два слова, і
	 * читати доводиться по діагоналі. Тут кожен рядок стає карткою, а підпис
	 * стовпця підставляється з data-label. Стандартний блок «Таблиця» цього
	 * атрибута не ставить — його дописує site.js, беручи текст із шапки, тож
	 * підпис не може розійтися зі стовпцем.
	 */
	.gtk-dostavka__table table {
		display: block;
		border: 0;
	}
	.gtk-dostavka__table thead { display: none; }
	.gtk-dostavka__table tbody,
	.gtk-dostavka__table tr { display: block; }
	.gtk-dostavka__table tr {
		border: 1px solid var(--gtk-line);
		margin-bottom: 16px;
	}
	.gtk-dostavka__table td {
		display: block;
		border-left: 0;
		padding: 16px 20px;
	}
	.gtk-dostavka__table tbody td:first-child {
		width: auto;
		border-top: 0;
	}
	.gtk-dostavka__table td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: 11.5px;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--gtk-text-muted);
		margin-bottom: 4px;
	}
}

@media (max-width: 600px) {
	.gtk-dostavka__steps.wp-block-columns { grid-template-columns: 1fr; }
	.gtk-dostavka__steps > .wp-block-column {
		border-right: 0;
		margin-right: 0;
		padding-right: 0;
	}

	.gtk-dostavka__pack { grid-template-columns: 1fr; }

	.gtk-dostavka__facts { grid-template-columns: 1fr; }

	/*
	 * Селектор із :nth-child, а не просто клас: верхню межу першому рядку
	 * знімає правило з дволанкової сітки, і в одну колонку воно продовжує
	 * діяти — тепер уже на першу й другу клітинки. Медіазапит ваги не додає.
	 */
	.gtk-dostavka__fact { border-left: 0; }
	.gtk-dostavka__fact:nth-child(-n+2) { border-top: 1px solid var(--gtk-line); }
	.gtk-dostavka__fact:first-child { border-top: 0; }
}