/**
 * Homepage-only decorative touches that theme.json cannot express
 * (grid child spanning, absolute positioning, rotation transforms).
 * Everything else on the homepage (color, type, spacing) comes from
 * theme.json global styles.
 */

.almagzal-gallery-preview-media {
	aspect-ratio: 1;
	overflow: hidden;
}

.almagzal-gallery-grid > .wp-block-post:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

@media (max-width: 781px) {
	.almagzal-gallery-grid > .wp-block-post:first-child {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* Blog preview: give the latest article real visual weight (matches the
   Blog landing page's own featured-article treatment) instead of three
   identical cards — the real migrated photography is what makes this
   section feel colorful and personal, so let it lead. */
.almagzal-blog-preview-grid > .wp-block-post:first-child {
	grid-column: span 2;
}

.almagzal-blog-preview-grid > .wp-block-post:first-child figure {
	aspect-ratio: 16 / 9 !important;
}

@media (max-width: 781px) {
	.almagzal-blog-preview-grid > .wp-block-post:first-child {
		grid-column: span 1;
	}
}

/* Teaching principles: a restrained quilt-block composition. The four
   surfaces use only the established brand palette, while their differing
   proportions and stitched edges keep the grid editorial rather than
   reading as a row of identical feature cards. */
.almagzal-why-section {
	padding-block: clamp(2.5rem, 3.5vw, 3rem) !important;
}

.almagzal-why-section > h2 {
	max-width: 780px;
	margin-inline: 0 auto;
}

.almagzal-why-grid {
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
	gap: clamp(.75rem, 1.4vw, 1.25rem) !important;
	align-items: stretch;
}

.almagzal-why-card {
	position: relative;
	box-sizing: border-box;
	min-height: 10.5rem;
	padding: clamp(1.5rem, 2vw, 1.75rem) !important;
	border: 1px solid var(--wp--preset--color--border);
	overflow: hidden;
}

.almagzal-why-card::after {
	content: "";
	position: absolute;
	inset: .65rem;
	pointer-events: none;
	border-block-start: 1px dashed color-mix(in srgb, currentColor 26%, transparent);
}

.almagzal-why-card > * {
	position: relative;
	z-index: 1;
}

.almagzal-why-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 !important;
	border: 1px solid currentColor;
	border-radius: 50%;
	line-height: 1;
}

.almagzal-why-card h3 {
	margin-top: clamp(1.125rem, 1.75vw, 1.5rem) !important;
}

.almagzal-why-card--01 {
	background: var(--wp--preset--color--beige);
	border-color: color-mix(in srgb, var(--wp--preset--color--terracotta) 34%, transparent);
}

.almagzal-why-card--02 {
	transform: translateY(.5rem);
	background: color-mix(in srgb, var(--wp--preset--color--sage) 56%, var(--wp--preset--color--background));
}

.almagzal-why-card--03 {
	background: color-mix(in srgb, var(--wp--preset--color--dusty-blue) 28%, var(--wp--preset--color--background));
}

.almagzal-why-card--04 {
	transform: translateY(-.5rem);
	background: color-mix(in srgb, white 52%, var(--wp--preset--color--background));
	border-inline-start: .3rem solid var(--wp--preset--color--terracotta);
}

@media (max-width: 600px) {
	.almagzal-why-section {
		padding-block: 2.5rem !important;
	}

	.almagzal-why-grid {
		grid-template-columns: 1fr !important;
		gap: .75rem !important;
	}

	.almagzal-why-card {
		min-height: 0;
		padding: 1.5rem !important;
	}

	.almagzal-why-card--02,
	.almagzal-why-card--04 {
		transform: none;
	}

	.almagzal-why-card h3 {
		margin-top: 1.25rem !important;
	}
}

/* Hero headline: on phones the fluid "huge" size still reads slightly
   large across 4 wrapped lines and pushes the fold down further than it
   should. A small, mobile-only reduction keeps it strong without eating
   the whole first screen. */
@media (max-width: 600px) {
	.almagzal-hero-heading {
		font-size: 2rem !important;
		line-height: 1.2 !important;
	}
}

/* Prevents the hero image's intrinsic size from forcing the flex column
   (and the page) to overflow horizontally on narrow viewports. */
.almagzal-hero-media-col {
	min-width: 0;
}

.almagzal-hero-visual__image {
	max-width: 100%;
}

/* Home preview sections (Courses/Gallery/Blog): slightly tighter vertical
   padding while a section's empty state is showing. Each wp:group block's
   own declared padding stays permanently fixed at "lg" (matching what it
   renders), since varying it inline caused a real block-validation
   mismatch in the editor — these plain wrapper + modifier classes carry
   the empty-state adjustment instead, outside any block's own attributes. */
.almagzal-courses-preview-shell.is-empty > .wp-block-group.alignfull,
.almagzal-gallery-preview-shell.is-empty > .wp-block-group.alignfull,
.almagzal-blog-preview-shell.is-empty > .wp-block-group.alignfull {
	padding-top: var(--wp--preset--spacing--md) !important;
	padding-bottom: var(--wp--preset--spacing--md) !important;
}

/* Final photo refinement. Palette and typography remain theme-controlled. */
.almagzal-home-hero {
 padding-block: clamp(2.5rem, 4vw, 4rem) !important;
}
.almagzal-home-hero > .wp-block-columns,
.almagzal-home-intro > .wp-block-columns {
 gap: clamp(1.5rem, 4vw, 4rem) !important;
}
.almagzal-home-hero .wp-block-column,
.almagzal-home-intro .wp-block-column { min-width: 0; }
.almagzal-hero-visual,
.almagzal-intro-image,
.almagzal-visual-break {
 position: relative;
 overflow: hidden;
 margin: 0;
}
.almagzal-hero-visual { aspect-ratio: 4 / 5; }
.almagzal-hero-visual img,
.almagzal-intro-image img,
.almagzal-visual-break img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100% !important;
 object-fit: cover;
 display: block;
}
.almagzal-home-intro {
 padding-block: clamp(2.5rem, 5vw, 4.5rem) !important;
}
.almagzal-intro-media-col { min-width: 0; }
.almagzal-intro-image { width: 100%; aspect-ratio: 1; }
.almagzal-visual-break {
 width: calc(100% - 48px);
 max-width: 1040px !important;
 aspect-ratio: 4 / 3;
 margin: clamp(2rem, 5vw, 4rem) auto !important;
}
.almagzal-home-founder { padding-block: clamp(2.5rem, 5vw, 4.5rem) !important; }
.almagzal-founder-image { margin: 0; }
.almagzal-founder-image img {
 display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 1640 / 924;
 object-fit: cover;
 border: 1px solid var(--wp--preset--color--border);
 box-shadow: 0 18px 40px -24px rgba(40, 32, 24, .45);
}
@media (max-width: 781px) {
 .almagzal-hero-visual { aspect-ratio: 4 / 3; }
 .almagzal-home-intro > .wp-block-columns { flex-direction: column-reverse; }
 .almagzal-intro-image { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
 .almagzal-home-hero { padding-block: 2rem !important; }
 .almagzal-hero-visual { aspect-ratio: 4 / 5; }
 .almagzal-home-intro, .almagzal-home-founder { padding-block: 2.25rem !important; }
 .almagzal-visual-break { width: calc(100% - 40px); }
}