/*
 * Urbanstory homepage
 * -------------------
 * Loaded only on the front page (see inc/enqueue.php).
 * Each section is a pattern in patterns/home-*.php; the class names
 * below (us-hero, us-collections …) are set on those blocks.
 *
 * Section rhythm (no two neighbours alike): hero (night + dots) →
 * Pick your story photo tiles (asphalt) → product rail (night) → Shop by
 * fit photo cards (asphalt) → story (night) → newsletter (yellow) → footer.
 */

/* ========== Shared section frame ========== */

/* Full-width band: Astra pads full-width blocks on small screens, but our
   sections handle their own side spacing (.us-section__inner). */
.entry-content > .us-section.alignfull {
	margin-block: 0;
	padding-inline: 0;
}

.us-section {
	padding-block: clamp(3.5rem, 2rem + 5vw, 6rem);
}

/* Content lines up with the header and footer: Astra's 1200px width,
   plus our side gutter on smaller screens. */
.us-section__inner {
	box-sizing: border-box;
	max-width: calc(1200px + 2 * var(--us-gutter));
	margin-inline: auto;
	padding-inline: var(--us-gutter);
}

.us-section p,
.us-section h1,
.us-section h2,
.us-section h3 {
	margin-block: 0;
}

/* WordPress adds a top margin between stacked blocks ("flow" layout).
   Inside our grids and stacks, spacing comes from `gap` instead. */
.us-section .us-hero__grid > *,
.us-section .us-hero__text > *,
.us-section .us-section__head > *,
.us-section .us-section__heading > *,
.us-section .us-story__body > *,
.us-section .us-newsletter__grid > *,
.us-section .us-newsletter__text > * {
	margin-block: 0;
}

.us-section__head {
	display: grid;
	gap: var(--us-space-2);
	margin-bottom: var(--us-space-8);
}

.us-section__head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--us-space-4) var(--us-space-8);
}

.us-section__heading {
	display: grid;
	gap: var(--us-space-2);
}

.us-section__title {
	font-size: var(--us-text-h1);
	text-transform: uppercase;
}

.us-section .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--us-space-3);
	margin: 0;
}

.us-section .wp-block-button {
	margin: 0;
}

/* ========== 1. Hero ========== */

.us-hero {
	background-color: var(--us-night);
	background-image: radial-gradient(var(--us-halftone) 1.4px, transparent 1.5px);
	background-size: 14px 14px;
	padding-block: clamp(2.5rem, 1rem + 5vw, 5rem);
}

.us-hero__grid {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: center;
}

@media (min-width: 900px) {
	.us-hero__grid {
		grid-template-columns: 1.1fr 1fr;
	}
}

.us-hero__text {
	display: grid;
	gap: var(--us-space-6);
	justify-items: start;
}

.us-eyebrow--deva {
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	text-transform: none;
}

.us-hero__title {
	font-size: var(--us-text-display);
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

.us-hero__lede {
	max-width: 44ch;
	font-size: 1.125rem;
	color: var(--us-text);
}

.us-hero__art {
	margin: 0;
}

.us-hero__art img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--us-radius);
}

/* ========== 2. Photo tiles: Pick your story + Shop by fit ========== */
/* Tiles from [urbanstory_story_tiles] and [urbanstory_fit_cards]
   (inc/collections.php): a 4:5 photo on top (ideally a person wearing the
   design, see the Imagery guide in README.md), text below. Collections add
   a number and their accent (--us-collection) as a bar between photo and
   text. Desktop: 3 across. Phones: a swipe row, the next tile peeking in.
   --type: no photo yet, a halftone panel with the bar down the left. */

.us-collections,
.us-fit {
	background-color: var(--us-asphalt);
}

.us-photo-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--us-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 699px) {
	.us-photo-tiles {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		gap: var(--us-space-4);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--us-gutter);
		margin-inline: calc(var(--us-gutter) * -1);
		padding: 0 var(--us-gutter) var(--us-space-2);
		scrollbar-width: none;
	}

	.us-photo-tiles::-webkit-scrollbar {
		display: none;
	}

	.us-photo-tile {
		scroll-snap-align: start;
	}
}

.us-photo-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--us-line);
	border-radius: var(--us-radius);
	background: var(--us-night);
	transition: border-color var(--us-duration-fast) var(--us-ease);
}

.us-photo-tile:hover {
	border-color: var(--us-collection, var(--us-yellow));
}

.us-photo-tile__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--us-asphalt);
}

.us-photo-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--us-duration-base) var(--us-ease);
}

.us-photo-tile:hover .us-photo-tile__img {
	transform: scale(1.04);
}

.us-photo-tile__body {
	display: grid;
	flex: 1;
	gap: var(--us-space-2);
	align-content: start;
	padding: var(--us-space-4) var(--us-space-6) var(--us-space-6);
	/* The collection's accent as a bar between photo and text */
	border-top: 4px solid var(--us-collection, var(--us-line));
}

.us-photo-tile__num {
	color: var(--us-smog);
	font-family: var(--us-font-display);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1;
}

.us-photo-tile__name {
	font-size: var(--us-text-h3);
	line-height: 1.15;
	text-transform: uppercase;
}

.us-section .us-photo-tile__name a {
	color: var(--us-headlight);
	text-decoration: none;
}

/* The whole tile is clickable through the name link */
.us-photo-tile__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.us-section .us-photo-tile:hover .us-photo-tile__name a {
	color: var(--us-yellow);
}

.us-photo-tile__name a:focus-visible {
	outline: none;
}

.us-photo-tile:has(a:focus-visible) {
	outline: 3px solid var(--us-focus);
	outline-offset: 4px;
}

.us-photo-tile__line {
	color: var(--us-text);
	font-size: 0.9375rem;
}

.us-section .us-photo-tile__count {
	margin-top: var(--us-space-2);
	color: var(--us-smog);
	font-family: var(--us-font-label);
	font-weight: 600;
	font-size: var(--us-text-label);
	letter-spacing: var(--us-tracking-label);
	text-transform: uppercase;
}

/* No photo yet: type-only halftone panel, accent bar down the left */
.us-photo-tile--type {
	min-height: 220px;
	background-image: radial-gradient(var(--us-halftone) 1.4px, transparent 1.5px);
	background-size: 14px 14px;
}

.us-photo-tile--type .us-photo-tile__body {
	padding-left: calc(var(--us-space-6) + 6px);
	border-top: 0;
	border-left: 6px solid var(--us-collection, var(--us-line));
}

.us-photo-tile--type .us-photo-tile__num {
	font-size: 1.75rem;
}

.us-photo-tile--type .us-photo-tile__name {
	font-size: var(--us-text-h2);
}

@media (prefers-reduced-motion: reduce) {
	.us-photo-tile:hover .us-photo-tile__img {
		transform: none;
	}
}

/* ========== 3. New drops ========== */

.us-new-drops {
	background-color: var(--us-night);
}

/* ========== 4. Brand story ========== */

.us-story {
	position: relative;
	overflow: hidden;
	background-color: var(--us-night);
}

/* Huge background word "कहानी" (story). Decorative only: the "/ ''" part
   tells screen readers to skip it. */
.us-story::before {
	content: "कहानी";
	content: "कहानी" / "";
	position: absolute;
	right: -0.04em;
	bottom: -0.3em;
	font-family: var(--us-font-label);
	font-weight: 600;
	font-size: clamp(8rem, 4rem + 24vw, 22rem);
	line-height: 1;
	color: #1F232A; /* barely there on night */
	pointer-events: none;
	user-select: none;
}

.us-story__body {
	position: relative;
	display: grid;
	gap: var(--us-space-6);
	justify-items: start;
}

.us-story__title {
	max-width: 16ch;
	font-size: var(--us-text-display);
	line-height: 1.04;
	text-transform: uppercase;
}

.us-story__text {
	max-width: 56ch;
	font-size: 1.125rem;
}

.us-story__link a {
	display: inline-block;
	padding-block: 12px; /* 44px tall tap area */
	color: var(--us-yellow);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 2px;
}

.us-story__link a:hover {
	color: var(--us-yellow-hover);
}

/* ========== 5. Newsletter ========== */

.us-newsletter {
	--us-focus: var(--us-ink); /* yellow focus ring would vanish on yellow */
	background-color: var(--us-yellow);
	color: var(--us-ink);
	padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

.us-newsletter__grid {
	display: grid;
	gap: var(--us-space-6);
	align-items: center;
}

@media (min-width: 900px) {
	.us-newsletter__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--us-space-12);
	}
}

.us-newsletter__text {
	display: grid;
	gap: var(--us-space-3);
}

.us-newsletter__title {
	color: var(--us-ink);
	font-size: var(--us-text-h1);
	text-transform: uppercase;
}

.us-newsletter p {
	color: var(--us-ink);
}

.us-newsletter__admin-note {
	padding: var(--us-space-4);
	border: 2px dashed var(--us-ink);
	border-radius: var(--us-radius);
	font-size: var(--us-text-small);
}

/* MailPoet form, restyled to match */
.us-newsletter .mailpoet_form {
	padding: 0 !important; /* MailPoet sets padding inline */
	background: transparent !important;
}

.us-newsletter .mailpoet_form form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--us-space-3);
	align-items: stretch;
}

.us-newsletter .mailpoet_paragraph {
	flex: 1 1 14rem;
	margin: 0 !important;
}

.us-newsletter .mailpoet_form input.mailpoet_text {
	width: 100% !important;
	min-height: 52px;
	padding: 0 1.25rem !important;
	background: #FFFFFF !important;
	color: var(--us-ink) !important;
	border: 2px solid var(--us-ink) !important;
	border-radius: var(--us-radius-pill) !important;
	font-family: var(--us-font-body) !important;
	font-size: 1rem !important;
}

.us-newsletter .mailpoet_form input.mailpoet_submit {
	min-height: 52px;
	padding: 0 1.75rem !important;
	background: var(--us-ink) !important;
	color: var(--us-yellow) !important;
	border: 2px solid var(--us-ink) !important;
	border-radius: var(--us-radius-pill) !important;
	font-family: var(--us-font-body) !important;
	font-weight: 600 !important;
	cursor: pointer;
}

.us-newsletter .mailpoet_form input.mailpoet_submit:hover {
	background: transparent !important;
	color: var(--us-ink) !important;
}

.us-newsletter .mailpoet_message p {
	color: var(--us-ink) !important;
	font-weight: 600;
}