/*
 * DiunaDent — Oferta page.
 *
 * Six services, alternating media/text layout: odd items carry the photo
 * on the right, even items on the left. Markup keeps the media column
 * first in source order for every item (mobile always shows image above
 * text with no alternation); the `order` swap for right-media items only
 * applies from the desktop breakpoint up.
 *
 * Reveal states are gated by html.dd-js (added by reveal.js): without JS
 * every item simply shows its final, visible state.
 */

/* alignment and the gap below come from the shared page-title rule in main.css */

.dd-oferta__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	margin-bottom: clamp(3.5rem, 9vw, 7rem);
}

.dd-oferta__item:last-child {
	margin-bottom: 0;
}

.dd-oferta__col {
	flex: 1 1 50%;
	min-width: 0;
}

/*
 * The `align-items: center` above never ran: core ships
 * `.wp-block-columns { align-items: normal !important }` and every card here is
 * a columns block, so the copy stayed pinned to the top of a column as tall as
 * the photograph beside it — 410-476px of white under five of the six cards.
 * Set on the child instead, where the parent's !important cannot reach.
 */
/*
 * Every photograph except 01 a tenth smaller (07.08: "wszystkie pozostałe
 * zdjęcia zmniejszyć o 10%"). 544 -> 490px wide, and because the frame is 4:5,
 * 680 -> 612px tall.
 *
 * Three conditions, all of them load-bearing:
 *   - :not(--wide) — card 01 carries both classes, and the correction above
 *     makes its picture BIGGER; a rule on .dd-oferta__media alone would shrink
 *     the one card the client asked to enlarge;
 *   - min-width 991 — below that the cards are one column and the figure IS the
 *     page container, so -10% would just leave a ragged edge down the page
 *     instead of a narrower picture in a column;
 *   - margin-inline-start on the right-hand cards — a figure is a block, so the
 *     10% it gives up always comes off its right. For cards 02/04/06 that is the
 *     inner gap, which is what we want; for 03/05 it would open a gap against
 *     the page's right margin and break the outer alignment down the page.
 */
@media (min-width: 991px) {
	.dd-oferta__media:not(.dd-oferta__media--wide) {
		width: 90%;
	}

	.dd-oferta__item--media-right .dd-oferta__media:not(.dd-oferta__media--wide) {
		margin-inline-start: auto;
	}
}

.dd-oferta__col-body {
	align-self: center;
}

/*
 * The frame clips, because the reveal below zooms the photograph from 1.06 to 1
 * and an unclipped scale reaches 3% past the frame on each side. Below 991px the
 * frame is the full container, so those 3% are wider than the 20px gutter and
 * the whole page scrolled sideways for the 0.8s of the animation — measured as
 * 1px of horizontal overflow at layout widths 726 and 733.
 */
.dd-oferta__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--dd-radius-media);
}

.dd-oferta__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--dd-radius-media);
}

/*
 * One card breaks the 4:5 rhythm on purpose. Protetyka is the "matka i córka"
 * photograph the client asked for, and it is a landscape frame with the two
 * faces side by side across its full width — no portrait window holds both.
 *
 * 4:3 rather than the file's own 1.739:1. Both windows keep the two faces; the
 * difference is what else they keep. At the file's proportions the card came out
 * 388px against 612px for the other five — the flagship service read as the
 * smallest entry, and the frame held nothing but two heads. 4:3 takes 280px of
 * the 1200 off the sides, all of it background and the outer ends of the hair
 * (the faces span 250-520 and 750-1010, so each keeps ~80px of clearance), and
 * gives the card 506px of height. 106px short of the rhythm instead of 224.
 *
 * A taller window is arithmetically impossible without losing a face: 612px at
 * this column width needs 1.10:1, which is a 761px-wide crop of a picture whose
 * faces end at 1010. That is the trade the client was asked about; this is the
 * best answer that does not make it.
 *
 * 53%, not centre: the pair sits right of the frame's middle (their midpoint is
 * at 632 of 1200), so a centred crop would take more from the mother than from
 * the daughter.
 */
.dd-oferta__media--wide img {
	aspect-ratio: 4 / 3;
	object-position: 53% 50%;
}

/*
 * Card 01 back in the row, on the client's instruction (07.08):
 * "zdjęcie 01 umiejscowić po prawej stronie tekstu (analogicznie do pozostałych),
 * ale zwęzić tekst o 3-4cm ... dając tym samym więcej przestrzeni na zdjęcie po
 * prawej."
 *
 * It used to span the whole row. That was OUR decision, not his: a landscape
 * photograph in a half-width column came out 313px tall against 680px for the
 * other five, so the flagship service read as the least important entry. He has
 * now looked at the result and asked for the rhythm back, paying for it with a
 * narrower measure of type. The picture is still the shortest on the page —
 * 506px against 612px once the window above is cropped to 4:3 — and no column
 * split closes that gap, because the only frame tall enough would cut a face.
 *
 * Specificity is the reason these selectors are so long. Core ships
 * `.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
 * { flex-basis: 0; flex-grow: 1 }` at (0,3,0) from 782px up, so a rule written
 * on one class loses and the columns stay equal. `:has()` takes the specificity
 * of its argument, which puts these at (0,4,0).
 *
 * `0 1` rather than `0 0`: 38 + 62 is the whole row and the gap has to come out
 * of something, so both columns shrink in proportion and the ratio survives.
 */
@media (min-width: 991px) {
	.dd-oferta__item:has(.dd-oferta__media--wide) .wp-block-column.dd-oferta__col-body {
		flex: 0 1 38%;
	}

	.dd-oferta__item:has(.dd-oferta__media--wide) .wp-block-column.dd-oferta__col-media {
		flex: 0 1 62%;
	}
}

.dd-oferta__num {
	margin: 0 0 0.1em;
	font-family: var(--dd-font-heading);
	font-size: clamp(3rem, 7vw, 5.5rem);
	line-height: 1;
	font-weight: 600;
	color: var(--dd-color-accent-ink);
}

.dd-oferta__title {
	margin: 0 0 0.75em;
	font-family: var(--dd-font-heading);
	font-size: var(--dd-section-title);
	font-weight: 500;
	line-height: 1.2;
	color: var(--dd-color-ink);
}

.dd-oferta__desc {
	margin: 0;
	max-width: 34rem;
	font-family: var(--dd-font-body);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--dd-color-text);
}

/* --- Alternation (desktop) --------------------------------------------- */

@media (min-width: 991px) {
	.dd-oferta__item--media-right .dd-oferta__col-media {
		order: 2;
	}

	.dd-oferta__item--media-right .dd-oferta__col-body {
		order: 1;
	}

	.dd-oferta__item--media-left .dd-oferta__col-media {
		order: 1;
	}

	.dd-oferta__item--media-left .dd-oferta__col-body {
		order: 2;
	}
}

/* --- Reveal animation (JS-gated) --------------------------------------- */

.dd-js .dd-reveal-item {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.dd-js .dd-reveal-item .dd-oferta__media img {
	transform: scale(1.06);
	transition: transform 0.8s ease 0.15s;
}

.dd-js .dd-reveal-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.dd-js .dd-reveal-item.is-visible .dd-oferta__media img {
	transform: scale(1);
}

/* --- Mobile ------------------------------------------------------------ */

@media (max-width: 990.98px) {
	.dd-oferta__item {
		flex-direction: column;
		align-items: stretch;
		gap: 1.5rem;
	}

	.dd-oferta__col {
		flex-basis: 100%;
		width: 100%;
	}

	.dd-oferta__num {
		font-size: 2.75rem;
	}
}

/*
 * Between the phone and the desktop the card is one column wide, so a 4:5
 * window becomes 910px tall on a 768px screen — taller than the tablet it is
 * being read on, five screens of nothing but photograph in a row. The upright
 * window is what makes these portraits work on a phone; on a tablet the same
 * picture reads better lying down.
 */
@media (min-width: 601px) and (max-width: 990.98px) {
	.dd-oferta__media img {
		aspect-ratio: 3 / 2;
	}
}

/*
 * The stacked layout has the same short-window problem as the desktop one
 * below, and worse: the figure IS the container here, so at 990x600 the 3:2
 * frame came out 633px tall in a 600px window — measured. Same lever, same
 * target height, through this range's own ratio: 66 * 3/2 = 99vh of width.
 * Centred, because a single-column card has no text beside it to align to.
 */
@media (min-width: 601px) and (max-width: 990.98px) and (max-height: 700px) {
	.dd-oferta__media {
		width: min(100%, 99vh);
		margin-inline: auto;
	}
}

/*
 * The same problem the tablet rule above solves, on the axis it does not look
 * at. A 4:5 window is sized from the column's WIDTH, so on a wide laptop with a
 * short window it comes out 612px tall inside a 560px viewport: one photograph
 * is taller than the screen it is read on, which is what the client saw as the
 * pictures having "powiększyły się" between two machines showing the same page.
 *
 * The cap is on the frame's WIDTH, expressed in vh through each frame's own
 * ratio, so the picture shrinks whole. Capping the image's height instead was
 * tried first and reverted on the screenshot: the frame kept its width while
 * losing height, so `object-fit: cover` ate the difference off the top and
 * bottom and took the eyes off both faces on card 01 and the patient's on 02.
 * These crops are the client's — 4:5, and 4:3 at 53% for the mother-and-
 * daughter photograph — and a responsive rule has no business re-framing them.
 *
 * 66vh is the target height; the width that produces it is 66 * 4/5 = 52.8vh
 * for the upright frames and 66 * 4/3 = 88vh for the wide one. `min()` keeps
 * the desktop widths (90% and full) wherever they are the smaller number, so
 * above ~700px of window nothing moves at all.
 */
@media (min-width: 991px) and (max-height: 700px) {
	.dd-oferta__media:not(.dd-oferta__media--wide) {
		width: min(90%, 52.8vh);
	}

	/* card 01 sits media-right, so the width it gives up comes off its left and
	   the picture stays on the page's right edge with the other five */
	.dd-oferta__media--wide {
		width: min(100%, 88vh);
		margin-inline-start: auto;
	}

	/* The gap between cards is a vw clamp, so it does not know the pictures just
	   got shorter: 112px of air below a 371px photograph reads as the page having
	   run out of content. Tied to the same axis the pictures now answer to. */
	.dd-oferta__item {
		margin-bottom: clamp(2.5rem, 9vh, 4.5rem);
	}
}