/* 5.9.5 — Hotels and commercial projects page. Text-led; no imagery until real project photography exists. */
.sumbra-hoteles-hero .sumbra-h1 { max-width: 16ch; }
.sumbra-hoteles-hero .sumbra-lead { max-width: 44ch; }
.sumbra-hoteles-needs__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin-top: var(--sumbra-space-lg);
	border-top: 1px solid var(--sumbra-lino);
}
.sumbra-hoteles-need {
	padding: var(--sumbra-space-md) var(--sumbra-space-lg) var(--sumbra-space-md) 0;
	border-bottom: 1px solid var(--sumbra-lino);
	min-width: 0;
}
.sumbra-hoteles-need:nth-child(even) { padding-left: var(--sumbra-space-lg); padding-right: 0; border-left: 1px solid var(--sumbra-lino); }
/* 5.9.6: an odd last item spans the full row, text kept to a readable measure. */
.sumbra-hoteles-need:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sumbra-hoteles-need:last-child:nth-child(odd) .sumbra-body { max-width: 68ch; }
.sumbra-hoteles-need__title {
	font-family: var(--sumbra-font-display);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	line-height: 1.15;
	color: var(--sumbra-carbon);
	margin: 0 0 0.75rem;
}
.sumbra-hoteles-need .sumbra-body { max-width: 46ch; margin-bottom: 1rem; }
.sumbra-hoteles-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sumbra-hoteles-experience__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sumbra-space-lg); align-items: start; }
.sumbra-hoteles-experience__grid > * { min-width: 0; }
.sumbra-hoteles-experience__grid .sumbra-body { max-width: 56ch; margin-bottom: 1rem; }
.sumbra-hoteles-where { border-top: 1px solid var(--sumbra-lino); }
@media (max-width: 1100px) {
	.sumbra-hoteles-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.sumbra-hoteles-needs__grid { grid-template-columns: minmax(0, 1fr); }
	.sumbra-hoteles-need,
	.sumbra-hoteles-need:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
	.sumbra-hoteles-experience__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sumbra-space-md); }
}
@media (max-width: 640px) {
	.sumbra-hoteles-steps { grid-template-columns: minmax(0, 1fr); }
}

/* Homepage teaser (the same text-led treatment). */
.sumbra-home-hotels__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sumbra-space-lg); align-items: start; }
.sumbra-home-hotels__grid > * { min-width: 0; }
.sumbra-home-hotels .sumbra-body { max-width: 56ch; margin-bottom: 1rem; }
@media (max-width: 900px) { .sumbra-home-hotels__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sumbra-space-md); } }

/* 5.9.7 — optional photography. Every rule is scoped to markup that only exists when a photo
   field is filled, so an empty field changes nothing (no placeholder, column, height or spacing). */
.sumbra-hot-photo { margin: 0; }
.sumbra-hot-photo__frame { overflow: hidden; background: var(--sumbra-lino); }
.sumbra-hot-photo__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sumbra-hot-photo__caption { margin-top: 0.75rem; font-size: 0.9rem; line-height: 1.5; color: var(--sumbra-piedra); max-width: 70ch; }

/* Hero: balanced two-column composition; stacked below copy and buttons on tablet/mobile. */
.sumbra-hoteles-hero--photo .sumbra-hoteles-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: var(--sumbra-space-xl);
	align-items: center;
}
.sumbra-hoteles-hero--photo .sumbra-hoteles-hero__copy { min-width: 0; }
.sumbra-hoteles-hero--photo .sumbra-hot-photo__frame { aspect-ratio: 4 / 5; }

/* Full-width bands: own section, separate from the cards; spacing only when a photo exists. */
.sumbra-hoteles-photo-band { padding-bottom: var(--sumbra-space-section); }
.sumbra-hoteles-photo-band .sumbra-hot-photo__frame { aspect-ratio: 21 / 9; }
.sumbra-hoteles-photo-band--detail .sumbra-hot-photo__frame { aspect-ratio: 16 / 7; }

@media (max-width: 900px) {
	.sumbra-hoteles-hero--photo .sumbra-hoteles-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sumbra-space-sm); }
	.sumbra-hoteles-hero--photo .sumbra-hot-photo__frame { aspect-ratio: 4 / 3; }
	.sumbra-hoteles-photo-band .sumbra-hot-photo__frame,
	.sumbra-hoteles-photo-band--detail .sumbra-hot-photo__frame { aspect-ratio: 4 / 3; }
}
.sumbra-hoteles-needs__intro { max-width: 60ch; margin-top: var(--sumbra-space-sm); }