/* BuiltGreen — pogodzenie edytora blokowego z układem projektu.
 *
 * Treść podstron redaguje klient w edytorze, więc sekcje powstają z bloków `group`
 * z doklejonymi klasami motywu (`sec`, `shell`, `offer`, `cards-3`…).
 *
 * Odstęp między blokami ustawiony jest na 0 w theme.json (`styles.spacing.blockGap`),
 * a NIE zerowany tutaj regułą CSS. Różnica jest istotna na dwa sposoby:
 *  - `settings.spacing.blockGap: false` nie usuwa odstępu, tylko każe WordPressowi wziąć
 *    domyślne 24 px;
 *  - zerowanie marginesów regułą (`.wp-block-group { margin-block: 0 }`) kasuje przy okazji
 *    marginesy z samego projektu — odstęp pod nagłówkiem sekcji (`.sec-head`) i nad zdjęciem
 *    hero (`.hero-fig`) siedzą właśnie w marginesach.
 * Rytm w tym projekcie robią `gap` w gridach i flexach, marginesy są wyzerowane globalnie
 * (`p{margin:0}`, `h1..h4{margin:0}`), więc dokładka WordPressa tylko rozpychała siatki.
 *
 * Dlatego niżej są wyłącznie rzeczy, których sam blockGap nie załatwia: elementy, którym
 * edytor nadaje inne znaczniki niż projekt.
 */

/* Etykieta sekcji była w projekcie <span>-em; z edytora wychodzi <p>. Wygląd trzyma klasa. */
p.lbl {
	display: block;
}

/* Przyciski.
 *
 * W projekcie przycisk to <a class="btn btn-green">. Blok przycisku nakłada klasę na
 * opakowujący <div>, a stylowany jest <a class="wp-block-button__link"> w środku — sam
 * wygląd trzeba więc przenieść o jeden poziom niżej. Wartości przepisane z .btn
 * w style.css; przy zmianie tamtych trzeba poprawić i te.
 */
.wp-block-buttons.btn-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	text-decoration: none;
	font-size: .9rem;
	letter-spacing: .02em;
	padding: 14px 26px;
	border: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
	border-radius: 0;
	cursor: pointer;
	transition: background var(--t), color var(--t), border-color var(--t);
}

.wp-block-button.btn-green .wp-block-button__link {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.wp-block-button.btn-line .wp-block-button__link {
	border-color: var(--hair);
}

/* Obraz z edytora trafia w miejsce, gdzie projekt spodziewa się <figure> lub <picture>. */
.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* W `split` obraz i tekst stoją obok siebie w gridzie i mają wypełniać całą wysokość. */
.split > .wp-block-image {
	height: 100%;
	margin: 0;
}

.split > .wp-block-image img {
	height: 100%;
	object-fit: cover;
}