/**
 * Oyolloo Elements — blog grid.
 *
 * Figma: node 471:1357 — 1920x764.
 *   head   H2 left, button right, 58px above the deck
 *   deck   3 cards of 520 with 40px gaps
 *   card   520x300 image; the white copy panel is inset 20px each side and
 *          overlaps the image's lower 60px
 *
 * @package Oyolloo\Elements
 * @since   1.0.0
 */

/* The band runs a 100px block padding rather than the site default 120. */
.oe-blog-grid .oe-section {
	--oe-section-y: var(--oe-space-5xl);
}

.oe-blog-grid__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oe-space-md);
	flex-wrap: wrap;
}

.oe-blog-grid__head h2 {
	margin: 0;
}

/* A slider so 471:4200 can page the deck on a phone; all three fit at desktop
   widths, so the shared script draws no dots there. */
.oe-blog-grid__slider {
	margin-block-start: 58px;
}

.oe-blog-grid__track {
	--oe-per-view: 3;
	--oe-gap: var(--oe-space-xl);
	/* The panel's 25/50 drop shadow reaches 75px below the card, and the track
	   clips vertically because it scrolls horizontally. */
	--oe-slider-bleed: 80px;

	align-items: stretch;
}

.oe-blog-grid__empty {
	margin-block-start: var(--oe-space-xl);
}

/* -- Card ---------------------------------------------------------------- */

.oe-blog-card {
	height: 100%;
}

.oe-blog-card__link {
	/* The theme colours descendant links; the card claims its own ink back. */
	color: var(--oe-color-ink);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.oe-blog-card__media {
	aspect-ratio: 520 / 300;
	border-radius: var(--oe-radius-lg);
	overflow: hidden;
	background-color: var(--oe-color-neutral-200);
}

/*
 * Parent in the selector on purpose. Elementor's frontend.min.css carries
 * `.elementor img { height: auto }` at (0,1,1), which outranks a single class
 * however late this file loads — so the photo sized to its own aspect ratio,
 * came out 523px tall in a 300px box and got cropped from the top instead of
 * filling the frame.
 */
.oe-blog-card__media .oe-blog-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--oe-ease, ease);
}

.oe-blog-card__link:hover .oe-blog-card__image {
	transform: scale(1.04);
}

/*
 * Floats over the image's lower edge, inset 20px on both sides. Figma 471:1366:
 * 20px padding, 20px between the three rows, a 16px radius and a soft drop
 * shadow — no stroke. The hover ring is an inset shadow rather than a border so
 * the copy keeps the design's full 440px measure at rest.
 */
.oe-blog-card__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	/* 20, not the scale's 24 — the panel measures 210 only at this gap. */
	gap: 20px;
	flex: 1 0 auto;
	margin-inline: 20px;
	margin-block-start: -60px;
	padding: 20px;
	border-radius: var(--oe-radius-xl);
	background-color: var(--oe-color-white);
	box-shadow: 0 25px 50px rgba(2, 47, 80, 0.05);
	transition: box-shadow 200ms var(--oe-ease, ease);
}

.oe-blog-card__link:hover .oe-blog-card__panel {
	box-shadow:
		0 25px 50px rgba(2, 47, 80, 0.05),
		inset 0 0 0 1px var(--oe-color-brand);
}

/* Figma 471:1378: Lato Medium 16/1.25, the ink at 70% — the only place in the
   design that steps outside the Inter/Roboto Condensed pair. */
.oe-blog-card__date {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: rgba(24, 24, 24, 0.7);
	font-family: "Lato", var(--oe-font-body);
	font-size: var(--oe-body-size);
	font-weight: 500;
	line-height: 1.25;
}

.oe-blog-card__date-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.oe-blog-card__text {
	display: flex;
	flex-direction: column;
	/* 13, not the 12 on the spacing scale — Figma 471:1379. */
	gap: 13px;
}

.oe-blog-card__title,
.oe-blog-card__excerpt {
	margin: 0;
}

/* H5 at its own 1.1 leading; the excerpt keeps the 1.6 body rhythm. Both sit
   on the same ink — the size and weight do the separating, not the colour. */
.oe-blog-card__title {
	color: var(--oe-color-ink);
	line-height: var(--oe-h5-leading);
}

.oe-blog-card__excerpt {
	color: var(--oe-color-ink);
	font-size: var(--oe-body-size);
	line-height: var(--oe-body-leading);
}

/* Figma 471:1382: Inter SemiBold 16/1.2, underlined, in the design's own grey
   — a shade lighter than the neutral-500 on the scale. */
.oe-blog-card__more {
	margin-block-start: auto;
	color: #8d8d8d;
	font-size: var(--oe-body-size);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: underline;
	text-underline-offset: 4px;
	/* Grey to brand gold is the widest colour jump any hover on the page makes,
	   so it was also the most obvious one to make without a ramp. */
	transition: color 160ms var(--oe-ease, ease);
}

.oe-blog-card__link:hover .oe-blog-card__more {
	color: var(--oe-color-brand);
}

@media (max-width: 1024px) {
	.oe-blog-grid__track {
		--oe-per-view: 2;
	}
}

/*
 * Mobile (Figma 471:4200): the title centres, the deck pages one 320-wide card
 * at a time with the next peeking in, and the "View all" button drops below it
 * full width. `display: contents` lifts the head's two children into the
 * container's own column so they can be ordered around the deck.
 */
@media (max-width: 767px) {
	.oe-blog-grid .oe-section {
		--oe-section-y: var(--oe-space-3xl);
	}

	.oe-blog-grid .oe-container {
		display: flex;
		flex-direction: column;
	}

	.oe-blog-card__media {
		aspect-ratio: 320 / 220;
	}

	/* Figma 471:4207 runs the whole card a step down from the desktop one:
	   12px padding rhythm, a 12px radius, and 12/18/14/14 type. */
	.oe-blog-card__panel {
		gap: var(--oe-space-xs);
		border-radius: var(--oe-radius-lg);
	}

	.oe-blog-card__date {
		gap: 6px;
		font-size: 12px;
		line-height: 1.25;
	}

	.oe-blog-card__date-icon {
		width: 16px;
		height: 16px;
	}

	.oe-blog-card__text {
		gap: var(--oe-space-2xs);
	}

	.oe-blog-card__title {
		font-size: 18px;
		line-height: 1.1;
	}

	.oe-blog-card__excerpt {
		font-size: var(--oe-body-sm-size);
		line-height: var(--oe-body-leading);
	}

	.oe-blog-card__more {
		font-size: var(--oe-body-sm-size);
		line-height: 1.2;
	}

	.oe-blog-grid__head {
		display: contents;
	}

	.oe-blog-grid__head h2 {
		order: 1;
		text-align: center;
	}

	.oe-blog-grid__slider {
		order: 2;
		margin-block-start: var(--oe-space-md);
	}

	.oe-blog-grid__head .oe-btn {
		order: 3;
		width: 100%;
		margin-block-start: var(--oe-space-md);
	}

	.oe-blog-grid__track {
		--oe-per-view: 1;
		--oe-gap: var(--oe-space-sm);
		/* The next card is meant to be cut by the screen, not by the container:
		   the track spends the right gutter as well so it ends at the edge. */
		width: calc(100% + var(--oe-gutter-inline, 15px));
		/* Card stays the design's 320 and whatever the bled track has left over
		   becomes the peek. `max` keeps a phone narrower than the card honest. */
		--oe-peek: max(0px, calc(100% - 320px));
	}

	.oe-blog-card__panel {
		margin-inline: 20px;
		padding: 16px;
	}
}

/* -- Load more ----------------------------------------------------------- */

.oe-blog-grid__more {
	display: flex;
	justify-content: center;
	margin-block-start: var(--oe-space-xl);
}

.oe-blog-grid__more-btn[disabled] {
	opacity: 0.6;
}