/* ==== Sections (shared spacing/heading pattern) ==== */
.ardea-section { padding: 40px var(--gutter) 8px; }
@media (min-width: 768px) { .ardea-section { padding: 60px var(--gutter) 8px; } }

.ardea-section__title { font-size: 20px; margin: 0 0 16px; }
@media (min-width: 480px) { .ardea-section__title { font-size: 24px; margin: 0 0 20px; } }
.ardea-section__title--center { text-align: center; }

.ardea-section__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 16px;
	gap: 12px;
}
@media (min-width: 480px) { .ardea-section__row { margin-bottom: 20px; } }

.ardea-section__heading { text-align: center; margin-bottom: 16px; }
@media (min-width: 480px) { .ardea-section__heading { margin-bottom: 20px; } }

.ardea-link-underline {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--c-ink);
	white-space: nowrap;
}

/* ==== Hero ==== */
.ardea-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 380px;
	overflow: hidden;
	background: var(--c-pink-muted);
}
.ardea-hero__image { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ardea-hero__overlay {
	position: absolute; inset: 0;
	/* Mismo degradé lateral (izquierda oscura -> derecha transparente) en todos los
	   anchos — un scrim parejo de lado a lado oscurecía toda la foto en mobile. Se
	   refuerza un poco el lado izquierdo y se extiende el punto de fade (la caja de
	   texto es proporcionalmente más ancha en mobile); la legibilidad extra la da el
	   text-shadow de .ardea-hero__content, no un overlay más oscuro. */
	background: linear-gradient(90deg, rgba(18,18,18,.65) 0%, rgba(18,18,18,.25) 60%, rgba(18,18,18,.05) 100%);
}
@media (min-width: 768px) {
	.ardea-hero__overlay {
		background: linear-gradient(90deg, rgba(18,18,18,.55) 0%, rgba(18,18,18,.1) 55%, transparent 100%);
	}
}
.ardea-hero__content {
	position: absolute;
	left: 6%;
	right: 6%;
	top: 50%;
	transform: translateY(-50%);
	color: var(--c-pink);
	max-width: 480px;
	text-shadow: 0 1px 12px rgba(18,18,18,.35);
}
@media (min-width: 768px) {
	.ardea-hero__content { text-shadow: none; }
}
.ardea-hero__eyebrow { font-size: 26px; margin: 0 0 4px; }
@media (min-width: 480px) { .ardea-hero__eyebrow { font-size: 34px; } }
.ardea-hero__title {
	color: var(--c-pink);
	font-size: clamp(24px, 7vw, 46px);
	line-height: 1.08;
	margin: 0 0 16px;
}
.ardea-hero__rule { border: none; border-top: 1px solid rgba(242,223,223,.5); width: 64px; margin: 0 0 16px; }
.ardea-hero__subtitle { margin: 0 0 20px; font-size: 12.5px; letter-spacing: 0.05em; }
@media (min-width: 480px) { .ardea-hero__subtitle { font-size: 13px; margin: 0 0 22px; } }

/* ==== Category tiles ==== */
.ardea-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
@media (min-width: 480px) { .ardea-tiles { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

.ardea-tile {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--c-pink-muted);
	color: var(--c-pink);
}
.ardea-tile img { width: 100%; height: 100%; object-fit: cover; }
.ardea-tile__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(18,18,18,0) 55%, rgba(18,18,18,.55) 100%);
}
.ardea-tile__label {
	position: absolute;
	left: 14px;
	bottom: 14px;
	font-family: var(--f-display);
	text-transform: uppercase;
	font-size: 16px;
}
@media (min-width: 480px) { .ardea-tile__label { left: 20px; bottom: 18px; font-size: 20px; } }

.ardea-tile--placeholder {
	background: var(--c-pink);
	color: var(--c-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	gap: 8px;
	padding: 0 16px;
}
.ardea-tile--placeholder .ardea-tile__label { position: static; }
.ardea-tile__soon { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-label-warm); }
@media (min-width: 480px) { .ardea-tile__soon { font-size: 11px; } }

/* ==== Promo banner ==== */
.ardea-promo { background: var(--c-pink); margin-top: 48px; }
@media (min-width: 480px) { .ardea-promo { margin-top: 64px; } }
.ardea-promo__grid {
	display: grid;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .ardea-promo__grid { grid-template-columns: 1fr 1fr; min-height: 260px; } }
.ardea-promo__text { display: flex; flex-direction: column; justify-content: center; padding: 32px var(--gutter); gap: 4px; }
@media (min-width: 768px) { .ardea-promo__text { padding: 36px; } }
.ardea-promo__text .eyebrow-script { font-size: 24px; }
@media (min-width: 480px) { .ardea-promo__text .eyebrow-script { font-size: 28px; } }
.ardea-promo__title { font-size: clamp(20px, 6vw, 32px); line-height: 1.1; margin: 4px 0 16px; }
.ardea-promo__text .btn { width: fit-content; }
.ardea-promo__image { width: 100%; height: 220px; object-fit: cover; object-position: top center; }
@media (min-width: 768px) { .ardea-promo__image { height: 100%; min-height: 260px; } }

/* ==== Instagram grid ==== */
.ardea-insta-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}
@media (min-width: 480px) { .ardea-insta-grid { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
.ardea-insta-grid__item { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-pink-muted); }
.ardea-insta-grid__item img { width: 100%; height: 100%; object-fit: cover; }
