/* ==========================================================================
 * 5 Hermoupolis Concept Sites: the room pages.
 *
 * Loaded on one room (single-room.php) and the rooms list (archive-room.php),
 * right after site.css (functions.php, hermoupolis_page_style). Shared parts
 * (titles, buttons, arrows, sliders) are in site.css.
 * ========================================================================== */

.h5-room-hero{
	position:relative;
	display:flex;
	align-items:center;
	margin:var(--h5-edge) var(--h5-edge) 0;
	height:clamp(420px,38.4vw,738px);
	padding:clamp(80px,6vw,110px) var(--h5-inset) 0 clamp(24px,5.9vw,113px);
	border-radius:var(--h5-radius);
	overflow:hidden;
	isolation:isolate;
}
.h5-room-hero__img{
	position:absolute;
	inset:0;
	z-index:-2;
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
}
.h5-room-hero::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background:
		linear-gradient(to bottom,rgba(26,18,10,.34) 0%,rgba(26,18,10,0) 34%),
		linear-gradient(90deg,rgba(26,18,10,.38) 0%,rgba(26,18,10,.12) 55%,rgba(26,18,10,0) 80%);
}
.h5-room-hero__title{
	margin:0;
	max-width:14em;
	font-family:var(--h5-serif);
	font-weight:400;
	font-size:clamp(36px,4.2vw,80px);
	line-height:1.02;
	color:#fff;
	text-shadow:0 1px 24px rgba(0,0,0,.18);
}

.h5-room-body{
	max-width:calc(1700px + 2 * var(--h5-inset));
	margin:0 auto; /* on screens wider than that, the text sits in the middle */
	padding:clamp(40px,3.5vw,68px) var(--h5-inset) clamp(48px,4.5vw,86px);
}
.h5-room-body h2{
	margin:0 0 clamp(16px,1.4vw,26px);
	font-family:var(--h5-serif);
	font-weight:300;
	font-size:var(--h5-title);
	line-height:1;
	color:var(--h5-gold);
}
/* The room's text carries no classes, so text typed in the editor gets the same look: every
   paragraph is a plain paragraph, every bulleted list is the amenities list, and a line that
   is only emphasis (<em>) after the list is the note. */
.h5-room-body p{ max-width:1660px; margin:0 0 .8em; }
.h5-room-body h3{
	margin:clamp(28px,2.2vw,42px) 0 clamp(8px,.6vw,12px);
	font-size:clamp(17px,1.15vw,22px);
	font-weight:500;
	color:var(--h5-ink);
}
.h5-room-body ul{
	list-style:none;
	margin:0;
	padding:0;
	columns:2;
	column-gap:clamp(24px,4.4vw,84px);
	max-width:1600px;
}
.h5-room-body ul > li{
	break-inside:avoid;
	padding:clamp(9px,.8vw,15px) clamp(4px,.4vw,8px);
	border-bottom:1px solid var(--h5-gold);
	font-size:clamp(15px,.94vw,18px);
}
/* WordPress wraps the note's <em> in a paragraph. Upright, as in the design. */
.h5-room-body ul ~ p:has(> em:only-child){
	max-width:none;
	margin-top:clamp(20px,1.8vw,34px);
	text-align:center;
	font-size:clamp(14px,.94vw,18px);
	color:var(--h5-gold);
}
.h5-room-body ul ~ p > em:only-child{ font-style:normal; }

.h5-rooms-archive{
	padding:clamp(150px,13.5vw,260px) var(--h5-inset-wide) clamp(64px,5.5vw,105px);
}
.h5-rooms-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));
	gap:clamp(16px,1.82vw,35px);
	margin-top:clamp(28px,3vw,56px);
}
.h5-room-card{
	position:relative;
	display:block;
	aspect-ratio:695 / 460;
	border-radius:clamp(18px,1.46vw,28px);
	overflow:hidden;
	isolation:isolate;
	text-decoration:none;
}
.h5-room-card__img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
	transition:transform 1.2s var(--h5-ease);
}
.h5-room-card:hover .h5-room-card__img{ transform:scale(1.04); }
.h5-room-card__name{
	position:absolute;
	left:clamp(6px,.42vw,8px);
	right:clamp(8px,.73vw,14px);
	bottom:clamp(16px,1.45vw,28px);
	display:flex;
	align-items:center;
	min-height:clamp(54px,4.32vw,83px); /* grows for a name on two lines (2026-10-14) */
	height:auto;
	margin:0;
	padding:.35em clamp(60px,5vw,96px) .35em clamp(14px,1.15vw,22px);
	border-radius:999px;
	background:rgba(255,255,255,.26);
	-webkit-backdrop-filter:blur(7px) saturate(1.1);
	backdrop-filter:blur(7px) saturate(1.1);
	font-family:var(--h5-sans);
	font-weight:500;
	font-size:clamp(17px,1.25vw,24px);
	line-height:1.05;
	color:#fff;
	text-shadow:0 1px 10px rgba(0,0,0,.18);
}
.h5-room-card__name::after{
	content:"";
	position:absolute;
	right:clamp(4px,.36vw,7px);
	top:50%;
	width:clamp(44px,3.8vw,73px);
	height:clamp(44px,3.8vw,73px);
	transform:translateY(-50%);
	border-radius:50%;
	background:var(--h5-copper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M11 29 29 11M14 11h15v15' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/48% no-repeat;
	box-shadow:0 0 0 4px rgba(255,255,255,.22);
	transition:transform .3s var(--h5-ease);
}
.h5-room-card:hover .h5-room-card__name::after{ transform:translateY(-50%) rotate(45deg); }

/* The room's photo slider (site.js .h5-slider) */
.h5-room-gallery{
	position:relative;
	margin:clamp(8px,1vw,20px) var(--h5-edge) 0;
	height:clamp(320px,43vw,826px);
	border-radius:var(--h5-radius);
	overflow:hidden;
	isolation:isolate;
	background:var(--h5-sand);
}
.h5-room-gallery > .h5-slide{
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
}
.h5-room-gallery .h5-arrows{
	position:absolute;
	right:clamp(16px,1.98vw,38px);
	bottom:clamp(14px,1.35vw,26px);
	z-index:2;
	gap:clamp(12px,1.46vw,28px);
}
.h5-room-gallery .h5-arrow{ --h5-arrow:clamp(38.4px,3.84vw,73.6px); border:2px solid #fff; color:#fff; } /* as the homepage gallery's, 20% under the first size (2026-10-14) */
@media (hover:hover){
	.h5-room-gallery .h5-arrow:hover{ background:var(--h5-brown); border-color:var(--h5-brown); color:#fff; }
}

/* Other rooms: the homepage's rooms block, drawn by the theme */
.h5-other-rooms{
	position:relative;
	display:flex;
	align-items:flex-start;
	gap:clamp(20px,1.56vw,30px);
	padding:clamp(56px,4.6vw,88px) 0 clamp(56px,5vw,96px) var(--h5-inset-wide);
	overflow:hidden;
}
.h5-other-rooms__intro{
	position:relative;
	z-index:1;
	flex:0 0 clamp(260px,27.9vw,535px);
	padding-top:clamp(10px,1.2vw,22px);
}
.h5-other-rooms__lead{
	margin:clamp(24px,2.4vw,46px) 0 0;
	font-size:var(--h5-lead);
	font-weight:500;
	line-height:1.2;
	color:var(--h5-brown);
}
.h5-other-rooms__text{
	margin:clamp(22px,2vw,38px) 0 0;
	font-size:var(--h5-body);
	line-height:1.4;
}
.h5-other-rooms__intro .h5-line-button{ margin-top:clamp(22px,1.9vw,36px); }
.h5-other-rooms__stage{
	position:relative;
	z-index:1;
	flex:1 1 auto;
	min-width:0;
	padding-top:clamp(40px,5.7vw,109px);
}
.h5-other-rooms__stage::before{
	content:"";
	position:absolute;
	z-index:-1;
	top:0;
	bottom:0;
	left:19vw;
	right:0;
	background:var(--h5-sand);
	border-radius:clamp(20px,1.6vw,30px) 0 0 clamp(20px,1.6vw,30px);
}
.h5-other-rooms .h5-carousel{
	position:relative;
	display:flex;
	gap:clamp(16px,1.82vw,35px);
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	scrollbar-width:none;
	padding-right:clamp(24px,10vw,200px);
	-webkit-user-select:none;
	user-select:none;
}
.h5-other-rooms .h5-carousel::-webkit-scrollbar{ display:none; }
.h5-other-rooms .h5-carousel.is-dragging{ scroll-snap-type:none; scroll-behavior:auto; }
.h5-other-rooms .h5-room-card{
	flex:0 0 clamp(270px,36.2vw,695px);
	scroll-snap-align:start;
	transform-origin:left center;
	transition:transform .6s var(--h5-ease);
}
.h5-other-rooms .h5-carousel.is-ready .h5-room-card:not(.is-current){ transform:scale(.9); }
.h5-other-rooms .h5-room-card__name{ font-size:clamp(18px,1.98vw,38px); }
.h5-other-rooms .h5-arrows{ margin-top:clamp(24px,1.9vw,36px); }

/* ==========================================================================
 * PHONE AND TABLET
 * ========================================================================== */

@media (max-width:1100px){
	.h5-other-rooms{ flex-direction:column; }
	.h5-other-rooms__intro{ flex:none; width:100%; padding-right:var(--h5-inset-wide); }
	.h5-other-rooms__stage{ width:100%; padding-top:8px; }
	.h5-other-rooms__stage::before{ left:calc(38vw - var(--h5-inset-wide)); top:-24px; }
	.h5-other-rooms .h5-room-card{ flex-basis:clamp(270px,62vw,620px); }
}

@media (max-width:767px){
	.h5-room-hero{ height:clamp(340px,95vw,460px); border-radius:0 0 var(--h5-radius) var(--h5-radius); padding:96px 20px 0; }
	.h5-room-hero__title{ font-size:clamp(32px,9.4vw,40px); }
	.h5-room-body{ padding:36px 20px 48px; }
	.h5-room-body ul{ columns:1; }
	.h5-rooms-archive{ padding:130px 20px 56px; }
	.h5-room-gallery{ margin:8px 16px 0; height:62vw; min-height:220px; border-radius:18px; }
	.h5-room-gallery .h5-arrow{ --h5-arrow:35.2px; }
	.h5-other-rooms{ padding-top:56px; }
	.h5-other-rooms__intro{ display:contents; }
	.h5-other-rooms__intro .h5-title-text{ order:1; position:relative; z-index:2; padding-right:20px; }
	.h5-other-rooms__lead,
	.h5-other-rooms__text{ display:none; }
	.h5-other-rooms__stage{ order:2; margin-top:22px; padding-top:0; }
	.h5-other-rooms__stage::before{ left:calc(38vw - 20px); top:-74px; }
	.h5-other-rooms__intro .h5-line-button{ order:3; position:relative; z-index:2; margin-top:28px; align-self:flex-start; }
	.h5-other-rooms .h5-room-card{ flex-basis:78vw; }
	.h5-other-rooms .h5-carousel{ padding-right:20px; }
	/* On the right on phones, as the photo sliders' arrows are (Nikolaos 2026-10-13). */
	.h5-other-rooms .h5-arrows{ justify-content:flex-end; padding-right:20px; }
	.h5-other-rooms .h5-room-card__name{ font-size:16px; }
	/* A name too long for the space beside the arrow (the narrowest phones) wraps to a second line
	   instead of running under the arrow. */
	.h5-room-card__name{ min-height:52px; bottom:14px; padding-right:56px; font-size:16px; }
	.h5-room-card__name::after{ width:42px; height:42px; }
}