/**
 * Divi Supreme blog carousel: card image band and card rhythm.
 *
 * The homepage "Musings of a Queer Embodiment Facilitator" carousel. THE WHOLE
 * CARD FITS ON ONE SCREEN: it is 85vh tall, the text takes the height it needs,
 * and the image takes whatever is left. The image is edge to edge on the top,
 * left and right.
 *
 * ── WHY 85vh, AND WHAT IT REPLACED ───────────────────────────────────────────
 *
 * This previously made the image two thirds of the card HEIGHT, with the card
 * sized as 3 x the text block. The ratio was exact but the card did not fit on
 * a screen at any size: 915px on a 900px-tall desktop is 102vh, and on a phone
 * a 491px text block forced a 1473px card, over 150vh. Raynefyre asked for the
 * whole card to fit in view with space around it, so the fixed ratio is gone.
 *
 *     breakpoint            card        image      share
 *     desktop 1440x900      765px       445px      58%
 *     mobile  440x956       813px       233px      29%
 *
 * THE IMAGE SHARE IS NO LONGER A FIXED FRACTION. It is whatever remains after
 * the text, so it is larger on a wide screen where the text wraps into fewer
 * lines, and smaller on a phone where the same title and excerpt need far more
 * height. That is the direct consequence of "fit on screen" and is intended.
 *
 * ── HOW THE THREE HEIGHTS RELATE ─────────────────────────────────────────────
 *
 *     card  = 85vh, or 85dvh where supported
 *     text  = flex 0 0 auto, so it is NEVER compressed and NEVER clipped
 *     image = calc(85vh - <worst-case text for this breakpoint>), flex-shrink 1
 *
 * The image gets an explicit calc() height rather than simply absorbing the
 * remainder, because two things depend on it:
 *
 *   1. CONSISTENCY BETWEEN SLIDES. With the image absorbing free space, its
 *      height changed per slide as each post's text length differed (measured
 *      231/223/248/223 on mobile), so the image jumped as the carousel rotated.
 *      A calc() height keeps every slide identical: measured spread 0.
 *   2. THE IMAGE NEEDS A DEFINITE PARENT HEIGHT. `img { height:100% }` cannot
 *      resolve against an auto-height parent and silently falls back to the
 *      image's INTRINSIC height, which produced 1440px-tall bands inside a
 *      765px card.
 *
 * The band keeps `flex-shrink: 1`, so if a post's text ever runs longer than
 * the worst case baked into the calc(), the IMAGE gives way rather than the
 * text being clipped. That is the safe direction to fail in.
 *
 * ⚠️ `dvh` IS NOT COSMETIC ON iOS. Plain `vh` on Safari counts the viewport as
 * if the address bar were hidden, so the card overflows the screen when the bar
 * is showing. Both are declared, `vh` first, so older browsers get a usable
 * value and Safari uses the dynamic one.
 *
 * ⚠️ THE SUBTRACTED PIXEL VALUES ARE THE WORST-CASE TEXT FOR THE CURRENT POSTS,
 * with headroom. A much longer title or excerpt eats into the image rather than
 * breaking the layout, but if the image gets visibly short, re-measure the
 * tallest text block at that breakpoint and raise the subtracted value.
 *
 * ── EDGE TO EDGE ─────────────────────────────────────────────────────────────
 *
 * The card body (`.dsm-grid-post-holder-inner`) carries 28px of padding, which
 * held the image away from the card edges. The padding is REMOVED here and put
 * on the text block instead, so the image reaches the card edges and the text
 * keeps exactly the inset it had.
 *
 * AN EARLIER ATTEMPT USED NEGATIVE MARGINS on the band to escape that padding.
 * Do not go back to it. `getComputedStyle` reported the negative margin as
 * applied and `getBoundingClientRect` reported the band as flush, while the
 * page still painted a 28px inset. Removing the padding is unambiguous.
 *
 * ── LETTING THE MODULE DO THE COVERING ───────────────────────────────────────
 *
 * Divi Supreme already ships
 * `.dsm-entry-thumbnail img { width:100%; height:100%; object-fit:cover }`.
 * Covering is the module's intended card behaviour. An earlier version of this
 * file overrode it with `width:auto` and a `max-height` cap, which is what
 * pillarboxed the image at about half the card width. The override is gone.
 * The rules below restate width/height/object-fit only to win against another
 * rule on the page that sets `object-fit:contain` at a specificity above
 * (0,2,1); (0,3,1) takes it without `!important`.
 *
 * ── HOW TO MEASURE THIS MODULE WITHOUT FOOLING YOURSELF ──────────────────────
 *
 * It is a vertical cube slider on autoplay, and it defeats the obvious checks:
 *
 *   - `getBoundingClientRect` returns TRANSFORMED boxes. Sibling slides report
 *     wildly different sizes for identical computed styles, and it reported the
 *     band as flush when the paint was inset by 28px.
 *   - `.swiper-slide-active` is NOT necessarily the face being painted.
 *   - Measuring a screenshot with a ruler is wrong too, because the painted
 *     cube face is not at scale 1.
 *   - SWIPER WRITES SLIDE HEIGHTS INLINE AT INIT. Changing the container height
 *     in the devtools after load does nothing until the inline heights are
 *     cleared and `swiper.update()` is called. A deployed stylesheet is fine,
 *     because Swiper reads the height when it initialises.
 *
 * What is trustworthy: `offsetWidth` / `offsetHeight` / `offsetLeft`, which are
 * layout values transforms do not touch; `getComputedStyle` for cascade
 * questions; and `elementFromPoint` for what is actually on top.
 */

.dsm_blog_carousel .dsm-grid-post-holder-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: 0;               /* the image reaches the card edges; see above */
}

/* The image band: the top two thirds of the card. */
.dsm_blog_carousel .dsm-entry-thumbnail {
	height: calc( 85vh - 320px );
	height: calc( 85dvh - 320px );
	min-height: 140px;
	margin: 0;
	overflow: hidden;
	line-height: 0;           /* kill the inline baseline gap */
	font-size: 0;
	text-align: initial;
	flex: 0 1 auto;           /* may shrink, so the TEXT is never the thing clipped */
}

/* (0,3,1): see the specificity note above. No `display:block` on the image, or
   it stops rendering inside the carousel's 3D cube. */
.dsm_blog_carousel .dsm-grid-post-holder-inner .dsm-entry-thumbnail img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	object-position: center;
	vertical-align: middle;
}

/*
 * The text block. Carries the padding the card body gave up, so the text keeps
 * the inset it had. `height:auto` overrides the module's fixed `height:420px`;
 * (0,3,0) beats the module's (0,2,0).
 */
.dsm_blog_carousel .dsm-grid-post-holder-inner .dsm-entry-wrapper {
	display: flex;
	flex-direction: column;
	height: auto;
	flex: 0 0 auto;           /* natural height: never compressed, never clipped */
	padding: 28px;
}

.dsm_blog_carousel .dsm-entry-header {
	margin-bottom: 18px;
}

/*
 * The last child of the text block is the Read More row. Anchoring it with
 * margin-top:auto puts it at the bottom whatever the excerpt length, and the
 * padding guarantees a gap even when auto collapses to zero.
 */
.dsm_blog_carousel .dsm-entry-wrapper > *:last-child {
	margin-top: auto;
	padding-top: 28px;
}

/*
 * ── WHY THE CARD LOOKED NARROWER THAN EVERY OTHER ROW ────────────────────────
 *
 * THE CARD'S LAYOUT WIDTH WAS ALWAYS CORRECT. It measured 396px against a 396px
 * row at a 440px viewport, and 1080 against 1080 on desktop. What was wrong was
 * the RENDERED width: 245px, leaving a wide gap down both sides.
 *
 * THE CUBE EFFECT PUSHES EACH FACE BACK IN Z BY HALF THE SLIDE HEIGHT. This is a
 * VERTICAL cube, so its depth is the slide's height, and Swiper writes
 * `translate3d(0,0,-<half the height>)` onto the wrapper. Swiper's own
 * `.swiper-container-3d` sets `perspective: 1200px`. Perspective then shrinks
 * anything pushed back:
 *
 *     rendered scale = perspective / (perspective + translateZ)
 *
 * At a 440px viewport the card is 1473px tall, so translateZ is 736.5px and the
 * scale is 1200 / 1936.5 = 0.620. Predicted render 396 x 0.620 = 245px. Measured
 * render: 245px. The formula and the paint agree exactly.
 *
 * **SO THE TALLER THE CARD, THE SMALLER IT RENDERS.** Making the image two
 * thirds of the card height is what made the card 1473px tall on a phone, which
 * is what pushed it 736.5px back, which is what shrank it to 62%. The side gaps
 * were a second-order consequence of a height rule, which is why they did not
 * show up in any width measurement.
 *
 * REMOVING THE PERSPECTIVE removes the foreshortening: measured 245px -> 396px,
 * exactly 100% of the row, and it holds after a rotation. Swiper's rule is
 * (0,1,0), so (0,3,0) wins and no `!important` is needed.
 *
 * ⚠️ THIS FLATTENS THE CUBE'S DEPTH. The faces still rotate on X, but without
 * foreshortening it reads as a fold rather than a cube. That is a deliberate
 * trade: at these card heights the "cube" was mostly rendering as a shrunken
 * card. If the depth is wanted back, the fix is NOT to restore perspective, it
 * is to change the module's transition effect away from Cube in the Divi
 * Builder, because a vertical cube and a very tall card cannot both work.
 *
 * ⚠️ DO NOT DIAGNOSE THIS BY MEASURING WIDTHS. Every width check says the card
 * is correct, because it is. Compare the LAYOUT width (`offsetWidth`) against
 * the RENDERED width (`getBoundingClientRect().width`): when they disagree, a
 * transform is scaling the element. Also measure with autoplay stopped and the
 * slider settled: mid-rotation, a face is legitimately foreshortened, and a
 * reading taken before the cube has applied its transform at all shows no
 * shrink and looks fine.
 */
.dsm_blog_carousel .dsm-blog-carousel .swiper-container {
	perspective: none;
}

/* The card height. (0,3,0) to beat the module's own (0,2,0) on the container. */
.dsm_blog_carousel .dsm-blog-carousel .swiper-container {
	height: 85vh;
	height: 85dvh;
}

@media only screen and ( max-width: 980px ) {
	.dsm_blog_carousel .dsm-entry-thumbnail {
		height: calc( 85vh - 390px );
		height: calc( 85dvh - 390px );
	}
}

@media only screen and ( max-width: 767px ) {
	.dsm_blog_carousel .dsm-entry-thumbnail {
		height: calc( 85vh - 580px );
		height: calc( 85dvh - 580px );
	}

	/*
	 * THE CARD MATCHES THE OTHER ROWS. Below 767px the builder drops this row to
	 * width:100% while every other row on the page is 90%, so the card hung 5%
	 * past the content edge on each side. Measured at the 500px floor: the other
	 * rows were 450px, this one 500px.
	 *
	 * THE SELECTOR IS SHORTER THAN IT LOOKS LIKE IT SHOULD BE, deliberately. The
	 * builder emits the declaration as a comma list pairing a bare
	 * `.et_pb_row_9` with several long `body #page-container .et-db #et-boc ...`
	 * variants. On this page the long variants match NOTHING: there is no
	 * `#et-boc` wrapper in the ancestry and `.et-db` sits on `body`, not on a
	 * wrapping div. The declaration that actually wins is the bare
	 * `.et_pb_row_9` at (0,1,0), so a longer selector silently does nothing.
	 * (0,3,0) against the section is enough.
	 */
	.et_pb_section_7 .et_pb_row_9.et_pb_row {
		width: 90%;
	}
}