/* ============================================================================
   Strawberry for Beauty — single article (/blog/<post>)
   ----------------------------------------------------------------------------
   The article page was the last surface with no design of its own: the homepage,
   hall, shop, catalogue, blog index and the seven 3D pages all have bespoke
   treatments, while a post rendered as stock Twenty Twenty-Five inside the
   custom chrome. On a phone that meant full-width Arabic body copy at the
   theme's default measure — technically responsive, visually unfinished.

   There is no single.php: posts render through the parent block template, so
   this styles the block classes directly rather than markup we author.

   Scope: body.sfb-article  (added in blog/loader.php)
   Accent: #DE2227 only.

   Direction-neutral by construction — logical properties throughout, no bare
   left/right — so it mirrors for ?lang=en without a second rule.
   ========================================================================== */

.sfb-article {
	--art-measure: 68ch;
	--art-gap: clamp(18px, 3.5vw, 30px);
}

/* ---------------------------------------------------------------------------
   Reading column.

   The block layout already constrains content, but at the theme's default width
   long Arabic paragraphs run wider than comfortable. `ch` tracks the font size,
   so the measure stays honest as the type scales down on small screens.
   ------------------------------------------------------------------------- */
.sfb-article .wp-block-post-title,
.sfb-article .entry-content > :where(p, h2, h3, h4, ul, ol, blockquote, figure, table) {
	max-inline-size: var(--art-measure);
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Title and meta
   ------------------------------------------------------------------------- */
.sfb-article .wp-block-post-title {
	font-family: var(--sfb-cairo);
	font-weight: 700;
	font-size: clamp(1.55rem, 1.05rem + 2.4vw, 2.7rem);
	line-height: 1.28;
	letter-spacing: -.01em;
	color: var(--sfb-ink, #171314);
	margin-block: clamp(18px, 4vw, 34px) .5em;
	text-wrap: balance;
}

.sfb-article .wp-block-post-date,
.sfb-article .wp-block-post-author-name,
.sfb-article .wp-block-post-terms {
	font-family: var(--sfb-cairo);
	font-size: .88rem;
	color: var(--sfb-mute, #7A7175);
}

.sfb-article .wp-block-post-terms a,
.sfb-article .wp-block-post-author-name__link {
	color: var(--sfb-red, #DE2227);
	text-decoration: none;
	font-weight: 600;
}

.sfb-article .wp-block-post-terms a:hover,
.sfb-article .wp-block-post-author-name__link:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Featured image — never taller than the viewport, never wider than its box.
   ------------------------------------------------------------------------- */
.sfb-article .wp-block-post-featured-image img {
	inline-size: 100%;
	block-size: auto;
	max-block-size: min(58vh, 520px);
	object-fit: cover;
	border-radius: clamp(10px, 2vw, 18px);
}

/* ---------------------------------------------------------------------------
   Body copy.

   Arabic needs a little more line-height than Latin to keep the joins legible
   at small sizes; 1.95 is what the blog index cards already use.
   ------------------------------------------------------------------------- */
.sfb-article .entry-content {
	font-family: var(--sfb-cairo);
	font-size: clamp(1rem, .96rem + .22vw, 1.09rem);
	line-height: 1.95;
	color: var(--sfb-ink, #171314);
}

.sfb-article .entry-content > * + * {
	margin-block-start: var(--art-gap);
}

.sfb-article .entry-content h2,
.sfb-article .entry-content h3,
.sfb-article .entry-content h4 {
	font-family: var(--sfb-cairo);
	font-weight: 700;
	line-height: 1.35;
	color: var(--sfb-ink, #171314);
	margin-block-start: clamp(30px, 5vw, 52px);
	text-wrap: balance;
}

.sfb-article .entry-content h2 { font-size: clamp(1.28rem, 1.05rem + 1.1vw, 1.75rem); }
.sfb-article .entry-content h3 { font-size: clamp(1.13rem, .99rem + .7vw, 1.38rem); }
.sfb-article .entry-content h4 { font-size: clamp(1.04rem, .97rem + .4vw, 1.18rem); }

/* A short accent lead-in on h2 only — the one place the red appears in the body.
   Logical inset so it sits on the correct side in both directions. */
.sfb-article .entry-content h2 {
	padding-inline-start: 14px;
	border-inline-start: 3px solid var(--sfb-red, #DE2227);
}

.sfb-article .entry-content a {
	color: var(--sfb-red, #DE2227);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.sfb-article .entry-content strong,
.sfb-article .entry-content b {
	font-weight: 700;
	color: var(--sfb-ink, #171314);
}

.sfb-article .entry-content :where(ul, ol) {
	padding-inline-start: 1.35em;
}

.sfb-article .entry-content li + li {
	margin-block-start: .5em;
}

.sfb-article .entry-content li::marker {
	color: var(--sfb-red, #DE2227);
}

.sfb-article .entry-content blockquote {
	padding: clamp(14px, 3vw, 22px);
	border-inline-start: 3px solid var(--sfb-red, #DE2227);
	background: rgba(222, 34, 39, .04);
	border-radius: 12px;
	font-size: 1.02em;
}

/* ---------------------------------------------------------------------------
   Media and tables — the two things that actually break a layout on a phone.

   The DB audit found no fixed-width layouts, but 74 posts carry width/height
   attributes on images and two contain tables, so both are pinned defensively.
   The table scrolls inside its own box rather than widening the document, which
   is what produces the horizontal-scroll bug on mobile.
   ------------------------------------------------------------------------- */
.sfb-article .entry-content :where(img, video, iframe, embed, object) {
	max-inline-size: 100%;
	block-size: auto;
}

.sfb-article .entry-content figure {
	margin-inline: auto;
}

.sfb-article .entry-content figure img {
	border-radius: clamp(8px, 1.6vw, 14px);
}

.sfb-article .entry-content figcaption {
	font-size: .85rem;
	color: var(--sfb-mute, #7A7175);
	text-align: center;
	margin-block-start: .6em;
}

.sfb-article .entry-content :where(table) {
	display: block;
	max-inline-size: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: .95rem;
	-webkit-overflow-scrolling: touch;
}

.sfb-article .entry-content :where(th, td) {
	border: 1px solid var(--sfb-line, rgba(23, 19, 20, .10));
	padding: 10px 12px;
}

.sfb-article .entry-content :where(th) {
	background: rgba(23, 19, 20, .04);
	font-weight: 700;
}

/* Long unbroken URLs in body copy are the other common source of overflow. */
.sfb-article .entry-content :where(p, li, td) {
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   The English "not translated" notice from blog/loader.php, once it is inside
   the styled column.
   ------------------------------------------------------------------------- */
.sfb-article .sfb-en-notice {
	max-inline-size: var(--art-measure);
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------------------- */
.sfb-article :where(a, button):focus-visible {
	outline: 2px solid var(--sfb-red, #DE2227);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.sfb-article *,
	.sfb-article *::before,
	.sfb-article *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   Phones. The block layout's global padding is generous on desktop and wasteful
   under 480px, where every millimetre of measure counts for Arabic.
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.sfb-article {
		--art-gap: 16px;
	}

	.sfb-article .entry-content h2 {
		padding-inline-start: 10px;
	}

	.sfb-article .wp-block-post-featured-image img {
		max-block-size: 42vh;
		border-radius: 10px;
	}
}