/*
 * News & Insights: listing, archives and single posts (Figma "Updated
 * Resources | Final"). Tiles sit in ruled two-column cells. Hover states follow
 * the Figma component variants: tile photos zoom in, Read More becomes the navy
 * pill, related titles and dropdown items turn periwinkle.
 */

.ramen-blog,
.ramen-single {
	/* Space right of the tile grid (Figma: 71px at 1440). The listing hero photo
	   spans one grid column plus this, so its left edge, the column divider and
	   the dropdown share one vertical line. */
	--ramen-list-end: clamp(0px, 4.93vw, 71px);
	--ramen-navy: var(--wp--preset--color--contrast);
	--ramen-slate: var(--wp--preset--color--contrast-2);
	--ramen-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.07 5.08v19.84M23.51 17.26l-7.11 7.12a1.88 1.88 0 0 1-2.65 0l-7.11-7.12'/%3E%3C/svg%3E");
	--ramen-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23041054' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7.95l-7.17 7.52a1.88 1.88 0 0 1-2.67 0L4 7.95'/%3E%3C/svg%3E");
}

.ramen-blog > *,
.ramen-single > * {
	margin-block: 0 !important;
}

/* ================= Shared pieces ================= */

/* Category tags: outlined periwinkle pills; `.is-light` on dark heroes, `.is-filled` cyan. */
.ramen-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}

.ramen-tags .wp-block-post-terms__separator {
	display: none;
}

.ramen-tags a {
	display: inline-flex;
	align-items: center;
	/* Helvetica Now sits high in its line box: less padding below keeps the caps
	   centred and the pill at Figma's 37px (40px for the 16px hero tags). */
	padding: 8px 16px 6px;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 60px;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.ramen-tags.is-light,
.ramen-tags.is-filled {
	font-size: 16px;
}

.ramen-tags.is-light a {
	padding: 9px 20px 5px;
	border-color: #c4cae3;
	color: var(--wp--preset--color--base);
}

.ramen-tags.is-filled a {
	padding: 9px 20px 5px;
	border-color: var(--wp--preset--color--accent-2);
	background: var(--wp--preset--color--accent-2);
	color: var(--ramen-navy);
}

/*
 * Photos with the Figma "Light" glow: a blue wash (lighten) plus blurred
 * periwinkle/cyan ellipses. Hero photos glow from the right, tiles from the left.
 */
.ramen-lit-image {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin: 0;
	background: var(--ramen-navy);
}

.ramen-lit-image a,
.ramen-lit-image img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.ramen-lit-image::before,
.ramen-lit-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	mix-blend-mode: lighten;
	pointer-events: none;
}

.ramen-lit-image::before {
	background: linear-gradient(180deg, #0b639e 0%, #042338 70%);
}

.ramen-lit-image::after {
	/* Pre-rendered from the matching .svg: Safari repaints live SVG blurs every frame of the hover zoom. */
	background: url("../images/resources-image-light.webp") center / 100% 100% no-repeat;
	transform: scaleX(-1);
}

.ramen-lit-image.is-card {
	background: none;
}

.ramen-lit-image.is-card::before {
	content: none;
}

.ramen-lit-image.is-card::after {
	background-image: url("../images/resources-card-light.webp");
	transform: none;
}

/* Tile hover (Figma "News-Tile" Variant2): the photo zooms ~8% inside its frame and
   Read More turns into the navy pill, as when the link itself is hovered. */
.ramen-post-card__image img,
.ramen-related__image img {
	transition: transform 0.5s var(--ramen-ease);
	will-change: transform;
}

/* Safari drops the rounded-corner clip on a composited child; a mask restores it. */
.ramen-post-card__image,
.ramen-related__image {
	-webkit-mask-image: linear-gradient(#000 0 0);
	mask-image: linear-gradient(#000 0 0);
}

.ramen-post-card:hover .ramen-post-card__image img {
	transform: scale(1.082);
}

.ramen-post-card:hover .wp-block-read-more.ramen-read-more {
	background-color: var(--ramen-navy);
	color: var(--wp--preset--color--base);
	padding-right: 24px;
	column-gap: 4px;
}

.ramen-post-card:hover .wp-block-read-more.ramen-read-more::before {
	background: var(--ramen-arrow-white) 21px center / 22px no-repeat;
}

/* ================= Listing hero ================= */

.ramen-blog-hero {
	overflow: hidden;
}

.ramen-blog-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/blog-hero-light.png") 50% 50% / cover no-repeat;
	pointer-events: none;
}

.ramen-blog-hero .ramen-main {
	padding-top: 91px;
}

/* 84px title, 206px from the top of the page, 310px band to the rule. */
.ramen-blog-hero__title {
	font-size: 84px;
	font-weight: 400;
	line-height: 1.1;
	margin: 0;
	padding: 115px 0 103px 65px;
	border-bottom: 1px solid var(--ramen-line);
}

.ramen-blog-hero.is-compact .ramen-blog-hero__title {
	border-bottom: 0;
	padding-bottom: 32px;
}

.ramen-blog-hero__desc,
.ramen-blog-hero .ramen-search {
	padding: 0 64px 64px 65px;
	margin: 0;
	max-width: 760px;
}

.ramen-search .wp-block-search__input {
	border-radius: 999px;
	border: 0;
	padding: 12px 20px;
	font-family: var(--wp--preset--font-family--chivo-mono);
}

.ramen-search .wp-block-search__button {
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	padding: 12px 24px;
	margin-left: 8px;
}

.ramen-blog-feature .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ramen-blog-feature__item {
	display: grid;
	/* +1px puts the photo's left border on the grid's divider pixel. */
	grid-template-columns: minmax(0, 1fr) calc((100% + var(--ramen-list-end)) / 2 + 1px);
	min-height: 720px;
}

.ramen-blog-feature__item > * {
	margin: 0 !important;
}

.ramen-blog-feature__text {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 32px;
	padding: 64px 64px 120px 65px;
}

.ramen-blog-feature__text > * {
	margin: 0;
}

.ramen-blog-feature__title {
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 300;
	line-height: 1.2;
}

.ramen-blog-feature__title a {
	text-decoration: none;
}

.ramen-blog-feature__excerpt {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
}

.ramen-blog-feature__excerpt p {
	margin: 0;
}

.ramen-blog-feature__excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

.ramen-blog-feature__text .ramen-read-more {
	margin-top: 32px;
}

.ramen-blog-feature__image {
	height: 100%;
	border-left: 1px solid var(--ramen-navy);
}

/* ================= Listing: filter bar ================= */

.ramen-blog__list .ramen-main {
	margin-right: var(--ramen-list-end);
}

.ramen-blog__list .ramen-main > * {
	margin-block: 0;
}

.ramen-category-filter {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: stretch;
	height: 90px;
	box-sizing: border-box;
	border-right: 1px solid var(--ramen-navy);
	border-bottom: 1px solid var(--ramen-navy);
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 100px);
}

.ramen-category-filter > * {
	margin: 0;
}

.ramen-category-filter__label {
	display: flex;
	align-items: center;
	padding: 0 32px;
	border-right: 1px solid var(--ramen-navy);
	font-size: 16px;
	line-height: 1.5;
}

/* Dropdown (core/details): opens over the grid's right column. It reaches over the
   bar's right border so its own borders land on the column divider and grid edge. */
.ramen-filter-menu {
	position: absolute;
	top: 0;
	right: -1px;
	/* 50% of the bar's padding box is half a pixel short of the grid's half. */
	width: calc(50% + 1.5px);
	box-sizing: border-box;
	margin: 0 !important;
	background: var(--wp--preset--color--base);
	border-left: 1px solid var(--ramen-navy);
	border-right: 1px solid var(--ramen-navy);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.ramen-filter-menu > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Full bar height with its own rule, drawn on the same pixel as the bar's. */
	height: 90px;
	box-sizing: border-box;
	padding: 0 32px;
	border-bottom: 1px solid var(--ramen-navy);
	cursor: pointer;
	list-style: none;
}

.ramen-filter-menu > summary::-webkit-details-marker {
	display: none;
}

.ramen-filter-menu > summary::after {
	content: "";
	flex: 0 0 24px;
	height: 24px;
	background: var(--ramen-chevron) center / 24px no-repeat;
	transition: transform 0.3s var(--ramen-ease);
}

.ramen-filter-menu[open] {
	padding-bottom: 64px;
	border-bottom: 1px solid var(--ramen-navy);
}

/* The caret flips vertically (theme.js adds `.is-closing` while the panel folds up). */
.ramen-filter-menu[open]:not(.is-closing) > summary::after {
	transform: scaleY(-1);
}

.ramen-filter-menu > :not(summary) {
	margin: 0;
	padding: 0 32px;
}

.ramen-filter-menu .wp-block-term-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ramen-filter-menu .ramen-filter-all,
.ramen-filter-menu .wp-block-term-template > li {
	margin: 32px 0 0;
}

/* Figma lists only the categories while "All" is selected. */
.ramen-filter-menu .ramen-filter-all:has(a[aria-current]) {
	display: none;
}

.ramen-filter-menu .wp-block-term-name {
	margin: 0;
}

.ramen-filter-menu a {
	color: var(--ramen-navy);
	text-decoration: none;
	transition: color 0.2s ease;
}

.ramen-filter-menu a:hover,
.ramen-filter-menu a:focus-visible,
.ramen-filter-menu a[aria-current] {
	color: var(--wp--preset--color--accent);
}

/* ================= Listing: tiles ================= */

.ramen-post-grid {
	margin: 0;
	transition: opacity 0.15s ease;
}

/* In-place filtering (theme.js): the grid fades out, swaps, then fades back in. */
.ramen-post-grid.is-loading {
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.ramen-post-grid,
	.ramen-filter-menu > summary::after,
	.ramen-post-card__image img,
	.ramen-related__image img {
		transition: none;
	}

	.ramen-post-card:hover .ramen-post-card__image img,
	.ramen-related__item:hover .ramen-related__image img {
		transform: none;
	}

	.has-js .ramen-post-grid__items > li > .ramen-post-card {
		transition: none;
	}
}

/* Tiles fade up as they scroll in; theme.js adds .is-shown with a per-batch stagger.
   The card moves, not the <li>, so the grid lines stay put. */
.has-js .ramen-post-grid__items > li > .ramen-post-card {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.9s var(--ramen-ease), transform 0.9s var(--ramen-ease);
}

.has-js .ramen-post-grid__items > li > .ramen-post-card.is-shown {
	opacity: 1;
	transform: none;
}

.ramen-post-grid__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.ramen-post-grid__items > li {
	display: flex;
	min-width: 0;
	margin: 0;
	border-right: 1px solid var(--ramen-slate);
	border-bottom: 1px solid var(--ramen-slate);
}

.ramen-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	padding: 64px;
	box-sizing: border-box;
	margin: 0 !important;
}

.ramen-post-card > * {
	margin: 0 !important;
}

.ramen-post-card__image {
	aspect-ratio: 511 / 340;
	border-radius: 20px;
}

.ramen-post-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.ramen-post-card__body > * {
	margin: 0;
}

.ramen-post-card__title {
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.ramen-post-card__title a {
	color: inherit;
	text-decoration: none;
}

/* The whole tile follows the title link; tags and Read More stay clickable above it. */
.ramen-post-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ramen-post-card .ramen-tags,
.ramen-post-card .ramen-read-more {
	position: relative;
	z-index: 2;
}

.ramen-post-card__excerpt {
	font-size: 16px;
	line-height: 1.5;
}

.ramen-post-card__excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ramen-post-card__excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

/* 32px above Read More (body gap + excerpt margin); padding here would grow the hover pill. */
.ramen-post-card__body .ramen-post-card__excerpt {
	margin-bottom: 16px;
}

.ramen-post-card .ramen-read-more {
	margin-top: auto;
}

.ramen-post-grid__empty {
	margin: 0;
	padding: 64px;
	border-right: 1px solid var(--ramen-slate);
}

/* Load More: periwinkle down-arrow tile, same hover pill as the other arrow links. */
.ramen-load-more {
	margin: 0;
	padding: 64px;
	border-right: 1px solid var(--ramen-slate);
}

.ramen-load-more:not(:has(a)) {
	display: none;
}

.ramen-load-more .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	border-radius: 40px;
	color: var(--ramen-navy);
	font-family: var(--wp--preset--font-family--chivo-mono);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.35s ease, color 0.35s ease, padding-right 0.35s ease, column-gap 0.35s ease;
}

.ramen-load-more .wp-block-query-pagination-next::before {
	content: "";
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	border-radius: 20px;
	background: var(--wp--preset--color--accent) var(--ramen-arrow-down) center / 30px no-repeat;
}

.ramen-load-more .wp-block-query-pagination-next:hover,
.ramen-load-more .wp-block-query-pagination-next:focus-visible {
	background-color: var(--ramen-navy);
	color: var(--wp--preset--color--base);
	padding-right: 24px;
	column-gap: 4px;
}

.ramen-load-more .wp-block-query-pagination-next:hover::before,
.ramen-load-more .wp-block-query-pagination-next:focus-visible::before {
	background-color: transparent;
}

.ramen-load-more.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* ================= What's Next (listing + posts) ================= */

/* One 1px rule above (the footer draws the one below). */
.ramen-blog-cta {
	border-top: 1px solid var(--ramen-navy);
}

/* The listing's last tile row has its own bottom rule: overlap it with the band's. */
.ramen-blog > .ramen-blog__list:has(+ .ramen-blog-cta) {
	margin-bottom: -1px !important;
}

.ramen-blog-cta .ramen-main {
	padding: 64px 184px 64px 85px;
}

.ramen-blog-cta__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 400;
	line-height: 1.2;
}

.ramen-blog-cta__copy {
	margin: 32px 0 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
}

.ramen-blog-cta__actions {
	margin-top: 64px;
}

/* Pill button block style (available to post content). */
.wp-block-button.is-style-pill .wp-block-button__link {
	padding: 13px 25px;
	border: 0;
	border-radius: 6px;
	background: #e0f2fe;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--helvetica-now);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
}

/* ================= Single post: hero ================= */

.ramen-post-hero {
	overflow: hidden;
}

/* Periwinkle/cyan glow rising from the bottom right. */
.ramen-post-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 45% 40% at 100% 105%, rgba(21, 245, 245, 0.35), transparent 70%),
		radial-gradient(ellipse 85% 65% at 100% 110%, rgba(108, 126, 238, 0.6), transparent 70%);
	pointer-events: none;
}

/* Half-screen hero (Figma 270:937) glows from the left edge, like the listing hero. */
.ramen-post-hero.is-image-split::before {
	background: url("../images/blog-hero-light.png") 50% 50% / cover no-repeat;
}

.ramen-post-hero .ramen-main {
	padding-top: 91px;
}

.ramen-post-hero__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	padding: 115px 64px 64px 65px;
}

.ramen-post-hero__head > * {
	margin: 0;
}

.ramen-post-hero__title {
	max-width: 1000px;
	font-size: 84px;
	font-weight: 400;
	line-height: 1.1;
}

.ramen-post-hero__intro {
	position: relative;
	padding: 80px 64px 80px 85px;
}

/* The rule under the title runs edge to edge across the rail and gutters
   (the hero's overflow clips the overshoot). */
.ramen-post-hero__intro::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100vw;
	right: -100vw;
	height: 1px;
	background: var(--ramen-line);
	z-index: 2;
	pointer-events: none;
}

.ramen-post-hero__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.ramen-post-hero__excerpt p {
	margin: 0;
}

.ramen-post-hero__excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

.ramen-post-hero.is-image-wide .ramen-post-hero__excerpt,
.ramen-post-hero.is-image-split .ramen-post-hero__excerpt {
	font-weight: 300;
}

/* Full-width image under the hero; the rail line runs down through it. */
.ramen-post-hero__wide {
	--ramen-rail-x: calc(max(var(--wp--custom--gutter), (100% - var(--wp--custom--frame)) / 2) + var(--wp--custom--rail));
	box-sizing: border-box;
	height: 720px;
	margin: 0 !important;
	/* Second full-width rule, along the top of the image. */
	border-top: 1px solid var(--wp--custom--line--dark);
}

.ramen-post-hero__wide::before {
	background:
		linear-gradient(var(--wp--custom--line--dark), var(--wp--custom--line--dark)) var(--ramen-rail-x) 0 / 1px 100% no-repeat,
		linear-gradient(180deg, #0b639e 0%, #042338 70%);
}

/* Half-width image: copy left, 710px photo right running to the page edge. */
.ramen-post-hero.is-image-split .ramen-post-hero__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 710px;
	padding: 0;
	margin-right: calc(-1 * var(--ramen-gutter));
}

.ramen-post-hero.is-image-split .ramen-post-hero__excerpt {
	padding: 64px 64px 64px 65px;
}

/* Half-screen template on a post without a featured image: copy takes the full row. */
.ramen-post-hero.is-image-split .ramen-post-hero__intro:not(:has(.ramen-post-hero__image)) {
	grid-template-columns: minmax(0, 1fr);
}

.ramen-post-hero__image {
	height: 720px;
	margin: 0 !important;
	border-left: 1px solid var(--ramen-navy);
}

/* ================= Single post: body ================= */

/* The What's Next band below draws the rule under the body. */
.ramen-post-body:not(:has(+ .ramen-blog-cta)) {
	border-bottom: 1px solid var(--ramen-navy);
}

.ramen-post-body .ramen-rail__label a {
	color: inherit;
	text-decoration: none;
}

.ramen-post-body__cols {
	display: flex;
	align-items: stretch;
}

.ramen-post-body__cols > * {
	margin: 0 !important;
}

/* Aside: 397px column with ruled rows; author on top, related articles at the bottom. */
.ramen-post-aside {
	display: flex;
	flex: 0 0 397px;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 64px 0;
	border-right: 1px solid var(--ramen-navy);
}

.ramen-post-aside > *,
.ramen-post-aside__top > * {
	margin: 0;
}

.ramen-author {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 0 32px 32px 38px;
	border-bottom: 1px solid var(--ramen-slate);
}

.ramen-author > * {
	margin: 0;
}

.ramen-author__avatar {
	margin-bottom: 16px;
}

.ramen-author__avatar img {
	display: block;
	width: 125px;
	height: 125px;
	border-radius: 50%;
	object-fit: cover;
	background: #dfe4ee;
}

.ramen-author__label {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--ramen-slate);
}

.ramen-author__name {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.ramen-author__role,
.ramen-author__role p {
	margin: 0;
	font-family: var(--wp--preset--font-family--chivo-mono);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ramen-post-share {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px 32px 32px 38px;
	border-bottom: 1px solid var(--ramen-slate);
}

.ramen-post-share > * {
	margin: 0;
}

.ramen-share {
	display: flex;
	align-items: center;
	gap: 24px;
}

.ramen-share__link {
	display: inline-flex;
	color: var(--ramen-navy);
	transition: color 0.2s ease;
}

.ramen-share__link:hover,
.ramen-share__link:focus-visible {
	color: var(--wp--preset--color--accent);
}

.ramen-related-wrap {
	margin-top: 64px !important;
}

.ramen-related__heading {
	margin: 0;
	padding: 32px 32px 32px 38px;
	border-top: 1px solid var(--ramen-slate);
	border-bottom: 1px solid var(--ramen-slate);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.ramen-related .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ramen-related .wp-block-post-template > li {
	margin: 0;
	border-bottom: 1px solid var(--ramen-slate);
}

.ramen-related__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 64px 32px 64px 38px;
}

.ramen-related__item > * {
	margin: 0;
}

.ramen-related__image {
	height: 220px;
	border-radius: 20px;
	overflow: hidden;
}

.ramen-related__image img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.ramen-related__title {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.ramen-related__title a {
	color: var(--ramen-navy);
	text-decoration: none;
	transition: color 0.25s ease;
}

/* Related hover (Figma "Other news - Tiles" Variant2): photo zooms, title turns periwinkle. */
.ramen-related__item:hover .ramen-related__title a {
	color: var(--wp--preset--color--accent);
}

.ramen-related__item:hover .ramen-related__image img {
	transform: scale(1.066);
}

.ramen-related__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ramen-post-body__content {
	flex: 1 1 auto;
	min-width: 0;
	padding: 64px;
}

/* ================= Post content typography ================= */

.ramen-prose {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.4;
}

.ramen-prose > * {
	margin-block: 0;
}

.ramen-prose > * + * {
	margin-top: 32px;
}

.ramen-prose :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 400;
	line-height: 1.2;
}

.ramen-prose h1 { font-size: var(--wp--preset--font-size--giant); }
.ramen-prose h2 { font-size: var(--wp--preset--font-size--huge); }
.ramen-prose h3 { font-size: var(--wp--preset--font-size--xx-large); letter-spacing: 0.02em; }
.ramen-prose h4 { font-size: var(--wp--preset--font-size--x-large); line-height: 1.4; letter-spacing: 0.02em; }
.ramen-prose :is(h5, h6) { font-size: var(--wp--preset--font-size--large); line-height: 1.4; }

.ramen-prose :is(strong, b) {
	font-weight: 600;
}

.ramen-prose .has-large-font-size {
	font-weight: 400;
}

.ramen-prose a {
	color: var(--wp--preset--color--accent);
}

.ramen-prose .wp-block-list {
	padding-left: 1.4em;
}

.ramen-prose .wp-block-list li + li {
	margin-top: 0.4em;
}

/* Quotes: periwinkle rules, 26px text with a hanging open-quote, mono attribution. */
.ramen-prose :is(.wp-block-quote, .wp-block-pullquote) {
	position: relative;
	margin-inline: 0;
	padding: 32px 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--accent);
	border-bottom: 1px solid var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-align: left;
}

.ramen-prose .wp-block-pullquote blockquote {
	margin: 0;
}

.ramen-prose :is(.wp-block-quote, .wp-block-pullquote) p {
	margin: 0;
}

.ramen-prose :is(.wp-block-quote, .wp-block-pullquote) p:first-of-type::before {
	content: "“";
	position: absolute;
	margin-left: -0.45em;
}

.ramen-prose :is(.wp-block-quote, .wp-block-pullquote) cite {
	display: block;
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--chivo-mono);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ramen-prose :is(.wp-block-quote, .wp-block-pullquote) cite::before {
	content: "— ";
}

.ramen-prose :is(.wp-block-image, .wp-block-embed, .wp-block-video) :is(img, iframe, video),
.ramen-prose .ramen-video iframe {
	border-radius: 20px;
}

.ramen-prose .wp-block-image.alignleft {
	margin: 0.3em 2em 1em 0;
}

.ramen-prose .wp-block-image.alignright {
	margin: 0.3em 0 1em 2em;
}

.ramen-video {
	position: relative;
	aspect-ratio: 16 / 9;
}

.ramen-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ================= Responsive ================= */

@media (max-width: 1199px) {
	.ramen-post-hero.is-image-split .ramen-post-hero__intro {
		grid-template-columns: minmax(0, 1fr) 50%;
	}

	.ramen-post-card {
		padding: 40px;
	}

	.ramen-post-aside {
		flex-basis: 320px;
	}

	.ramen-post-body__content {
		padding: 64px 40px;
	}

	.ramen-blog-cta .ramen-main {
		padding-right: 64px;
	}
}

@media (max-width: 991px) {
	.ramen-blog-hero__title,
	.ramen-post-hero__title {
		font-size: 56px;
		line-height: 1.1;
	}

	.ramen-blog-feature__item {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.ramen-blog-feature__text {
		padding: 64px 32px 64px 65px;
	}

	.ramen-blog-feature__title {
		font-size: var(--wp--preset--font-size--xx-large);
	}

	.ramen-post-card {
		padding: 32px;
	}

	.ramen-post-card__title {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.ramen-blog-feature__image {
		aspect-ratio: 16 / 10;
		border-left: 0;
		border-top: 1px solid var(--ramen-navy);
	}

	.ramen-post-hero__wide,
	.ramen-post-hero__image {
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.ramen-post-hero.is-image-split .ramen-post-hero__intro {
		grid-template-columns: minmax(0, 1fr);
	}

	.ramen-post-hero__image {
		border-left: 0;
	}

	/* Body stacks: author + share, the article, then related posts. */
	.ramen-post-body__cols {
		flex-direction: column;
	}

	.ramen-post-aside {
		display: contents;
	}

	.ramen-post-aside__top {
		display: flex;
		flex-wrap: wrap;
		order: 0;
		padding-top: 40px;
		border-bottom: 1px solid var(--ramen-slate);
	}

	.ramen-author,
	.ramen-post-share {
		border-bottom: 0;
	}

	.ramen-post-share {
		justify-content: flex-end;
		padding-bottom: 32px;
	}

	.ramen-post-body__content {
		order: 1;
		padding: 48px 32px;
	}

	.ramen-related-wrap {
		order: 2;
		margin-top: 0 !important;
	}

	.ramen-related .wp-block-post-template {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ramen-related .wp-block-post-template > li + li {
		border-left: 1px solid var(--ramen-slate);
	}

	.ramen-related__item {
		padding: 32px;
	}

	.ramen-related__image {
		height: auto;
		aspect-ratio: 3 / 2;
	}

	.ramen-related__title {
		font-size: var(--wp--preset--font-size--large);
	}

	.ramen-blog-cta .ramen-main {
		padding: 64px 32px 64px 65px;
	}
}

@media (max-width: 767px) {
	.ramen-blog-hero__title,
	.ramen-post-hero__title {
		font-size: 46px;
		line-height: 1.1;
		padding-left: 16px;
	}

	.ramen-blog-hero__title {
		padding: 115px 16px 64px;
	}

	.ramen-post-hero__head {
		padding: 80px 16px 48px;
	}

	.ramen-post-hero__title {
		padding-left: 0;
	}

	.ramen-post-hero__intro,
	.ramen-post-hero.is-image-split .ramen-post-hero__excerpt {
		padding: 48px 16px;
	}

	.ramen-post-hero.is-image-split .ramen-post-hero__intro {
		padding: 0;
	}

	.ramen-post-hero__excerpt {
		font-size: var(--wp--preset--font-size--large);
	}

	.ramen-blog-feature__text {
		padding: 48px 16px;
	}

	.ramen-blog-hero__desc,
	.ramen-blog-hero .ramen-search {
		padding-inline: 16px;
	}

	.ramen-blog__list .ramen-main {
		margin-right: 0;
	}

	.ramen-category-filter {
		border-right: 0;
	}

	/* The dropdown's own left rule divides the bar here. */
	.ramen-category-filter__label {
		padding: 0 16px;
		border-right: 0;
	}

	.ramen-filter-menu {
		right: 0;
		width: calc(100% - 96px);
		border-right: 0;
	}

	.ramen-filter-menu > summary,
	.ramen-filter-menu > :not(summary) {
		padding-inline: 16px;
	}

	.ramen-post-grid__items {
		grid-template-columns: minmax(0, 1fr);
	}

	.ramen-post-grid__items > li,
	.ramen-load-more,
	.ramen-post-grid__empty {
		border-right: 0;
	}

	.ramen-post-card {
		padding: 32px 16px;
	}

	.ramen-post-card__title {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.ramen-load-more {
		padding: 48px 16px;
	}

	.ramen-author,
	.ramen-post-share {
		padding-inline: 16px;
	}

	.ramen-post-share {
		justify-content: flex-start;
		padding-top: 0;
	}

	.ramen-post-aside__top {
		flex-direction: column;
	}

	.ramen-post-body__content {
		padding: 40px 16px;
	}

	.ramen-related__heading {
		padding-inline: 16px;
	}

	.ramen-related .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}

	.ramen-related .wp-block-post-template > li + li {
		border-left: 0;
	}

	.ramen-related__item {
		padding: 32px 16px;
	}

	.ramen-prose h1 { font-size: 44px; }
	.ramen-prose h2 { font-size: 36px; }
	.ramen-prose h3 { font-size: 28px; }

	.ramen-prose .wp-block-image.alignleft,
	.ramen-prose .wp-block-image.alignright {
		float: none;
		margin: 1em 0;
	}

	.ramen-blog-cta .ramen-main {
		padding: 48px 16px;
	}

	.ramen-blog-cta__title {
		font-size: 36px;
	}
}