/**
 * Blog landing page (home.html) + single article template — decorative/
 * layout touches theme.json cannot express. Color, type, and spacing come
 * from theme.json global styles; this file adds the Blog's slightly warmer,
 * more colorful, more personal register on top of that shared foundation.
 */

/* Featured article: image column keeps a controlled ratio; core/columns
   already stacks these on narrow viewports, so no manual breakpoint here. */
.almagzal-blog-featured .wp-block-column {
	min-width: 0; /* prevents an intrinsic image size from overflowing the flex column */
}

/* Supporting articles grid */
.almagzal-blog-card,
.almagzal-blog-card .wp-block-post-featured-image {
	min-width: 0;
}

.almagzal-blog-card img {
	transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.almagzal-blog-card img {
		transition: none;
	}
}

.almagzal-blog-card a:hover img,
.almagzal-blog-card a:focus-visible img {
	transform: scale(1.03);
}

/* Single article reading experience — generous Arabic line-height and a
   restrained amount of built-in color for subheadings so Zaheda doesn't
   have to hand-color every heading herself. */
.almagzal-article-body {
	line-height: 1.9;
}

/* At the low end of the fluid type scale, root body copy reads a touch
   small and dense for a long-form Arabic article on a phone. A mobile-only
   bump keeps paragraphs comfortably in the 18-20px range. */
@media (max-width: 600px) {
	.almagzal-article-body {
		font-size: 1.125rem;
	}
}

.almagzal-article-body p {
	margin-top: var(--wp--preset--spacing--xs);
	margin-bottom: var(--wp--preset--spacing--xs);
}

.almagzal-article-body h2,
.almagzal-article-body h3 {
	color: var(--wp--preset--color--terracotta);
	margin-top: var(--wp--preset--spacing--sm);
}

.almagzal-article-body h4 {
	color: var(--wp--preset--color--olive);
}

.almagzal-article-body figcaption {
	text-align: center;
}

.almagzal-article-body blockquote:not(.is-style-plain) {
	border-right: 3px solid var(--wp--preset--color--olive);
	border-left: none;
	padding-inline-start: var(--wp--preset--spacing--sm);
	padding-inline-end: 0;
}

.almagzal-article-body figure.wp-block-image img,
.almagzal-article-body figure.wp-block-gallery img {
	border-radius: 0;
}