/**
 * Phase 3 — Accommodation Knowledge Engine styles.
 * Additive on top of theme.css tokens.
 */

/* Hero */
.seraj-accom-hero { position:relative; min-height:70vh; color:#fff; overflow:hidden; display:flex; align-items:flex-end; }
.seraj-accom-hero__media { position:absolute; inset:0; }
.seraj-accom-hero__img { width:100%; height:100%; object-fit:cover; }
.seraj-accom-hero__scrim { position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.65) 100%); }
.seraj-accom-hero__body { position:relative; padding:5rem 0 3rem; max-width:920px; }
.seraj-accom-hero__meta { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.seraj-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .75rem; border-radius:999px; background:rgba(255,255,255,.9); color:#1a1a1a; font-size:.8rem; font-weight:600; text-decoration:none; }
.seraj-chip--ghost { background:rgba(255,255,255,.15); backdrop-filter:blur(6px); color:#fff; border:1px solid rgba(255,255,255,.3); }
.seraj-accom-hero__eyebrow { text-transform:uppercase; letter-spacing:.15em; font-size:.75rem; font-weight:600; opacity:.85; }
.seraj-accom-hero__title { font-family:Fraunces,serif; font-size:clamp(2rem,5vw,3.75rem); line-height:1.1; margin:.5rem 0 1rem; }
.seraj-accom-hero__lede { font-size:1.125rem; max-width:620px; opacity:.9; }
.seraj-accom-hero__actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }

/* Jump nav */
.seraj-accom-jump { position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid rgba(0,0,0,.08); }
.seraj-accom-jump ul { display:flex; gap:1.25rem; overflow-x:auto; margin:0; padding:.75rem 0; list-style:none; scrollbar-width:none; }
.seraj-accom-jump ul::-webkit-scrollbar { display:none; }
.seraj-accom-jump a { color:#333; text-decoration:none; font-size:.9rem; font-weight:500; white-space:nowrap; padding:.25rem 0; border-bottom:2px solid transparent; }
.seraj-accom-jump a.is-active { border-color:#2f5d3a; color:#2f5d3a; }

/* Overview */
.seraj-accom-overview { display:grid; grid-template-columns: 1fr; gap:2rem; }
@media (min-width: 900px) { .seraj-accom-overview { grid-template-columns: 2fr 1fr; } }
.seraj-accom-overview__aside { background:#f6f4ef; border-radius:1rem; padding:1.5rem; }
.seraj-accom-overview__aside h3 { margin-top:0; font-family:Fraunces,serif; }
.seraj-accom-overview__aside ul { margin:0; padding-left:1rem; }
.seraj-accom-overview__aside li { margin:.35rem 0; }

/* Facts */
.seraj-facts-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1rem; }
.seraj-fact { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:.75rem; padding:1rem 1.25rem; display:flex; flex-direction:column; gap:.25rem; }
.seraj-fact__label { text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; color:#666; font-weight:600; }
.seraj-fact__value { font-family:Fraunces,serif; font-size:1.1rem; color:#1a1a1a; }

/* Gallery */
.seraj-accom-gallery { display:grid; gap:.5rem; }
.seraj-accom-gallery--mosaic { grid-template-columns:repeat(4, 1fr); grid-auto-rows:180px; }
.seraj-accom-gallery--mosaic .seraj-accom-gallery__item:nth-child(1) { grid-column:span 2; grid-row:span 2; }
.seraj-accom-gallery--grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.seraj-accom-gallery--carousel { grid-auto-flow:column; grid-auto-columns:70%; overflow-x:auto; }
.seraj-accom-gallery__item { display:block; position:relative; overflow:hidden; border-radius:.75rem; }
.seraj-accom-gallery__item img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; display:block; min-height:180px; }
.seraj-accom-gallery__item:hover img { transform:scale(1.04); }
.seraj-accom-gallery__tour { margin-top:1rem; text-align:center; }

/* Amenities */
.seraj-amenities { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.5rem; }
.seraj-amenities__group h3 { font-family:Fraunces,serif; margin:0 0 .75rem; }
.seraj-amenities__list { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.seraj-amenities__list li { display:flex; align-items:center; gap:.5rem; font-size:.95rem; }
.seraj-amenities__icon { color:#2f5d3a; font-weight:700; }

/* Rooms */
.seraj-rooms { display:grid; gap:1.25rem; }
.seraj-rooms--cards { grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); }
.seraj-rooms--list { grid-template-columns:1fr; }
.seraj-room-card { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; overflow:hidden; display:flex; flex-direction:column; }
.seraj-rooms--list .seraj-room-card { flex-direction:row; }
.seraj-room-card__media { background:#f0ebe1; aspect-ratio:16/10; }
.seraj-rooms--list .seraj-room-card__media { flex:0 0 40%; aspect-ratio:auto; }
.seraj-room-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.seraj-room-card__body { padding:1.25rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.seraj-room-card__title { font-family:Fraunces,serif; margin:0; font-size:1.25rem; }
.seraj-room-card__meta { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.75rem; color:#555; font-size:.9rem; }
.seraj-room-card__amenities { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.seraj-room-card__amenities li { font-size:.75rem; padding:.2rem .55rem; background:#f0ebe1; border-radius:999px; }
.seraj-room-card__footer { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.seraj-room-card__price { font-family:Fraunces,serif; font-size:1.1rem; color:#2f5d3a; font-weight:600; }

/* Location */
.seraj-accom-location { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:900px) { .seraj-accom-location { grid-template-columns:1fr 1fr; } }
.seraj-accom-location__map { aspect-ratio:16/10; background:#e8e2d4; border-radius:1rem; overflow:hidden; }
.seraj-accom-location__placeholder { display:flex; align-items:center; justify-content:center; height:100%; color:#8a7f6a; }
.seraj-accom-location__landmarks { list-style:none; padding:0; }
.seraj-accom-location__landmarks li { padding:.25rem 0; }

/* About / Features */
.seraj-accom-about + .seraj-accom-features { margin-top:3rem; }
.seraj-features-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1rem; }
.seraj-feature-card { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1.25rem; }
.seraj-feature-card__icon { font-size:1.5rem; color:#2f5d3a; display:block; margin-bottom:.5rem; }
.seraj-feature-card h3 { font-family:Fraunces,serif; margin:.25rem 0 .35rem; font-size:1.1rem; }
.seraj-feature-card p { margin:0; color:#555; font-size:.9rem; }

/* Policies */
.seraj-accom-policies__times { display:flex; flex-wrap:wrap; gap:1.5rem; margin-bottom:1.5rem; }
.seraj-accom-policies__times div { display:flex; flex-direction:column; }
.seraj-accom-policies__times span { text-transform:uppercase; font-size:.7rem; letter-spacing:.1em; color:#666; }
.seraj-accom-policies__times strong { font-family:Fraunces,serif; font-size:1.5rem; color:#2f5d3a; }
.seraj-accom-policies__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1.5rem; }
.seraj-accom-policies__grid h4 { font-family:Fraunces,serif; margin:0 0 .35rem; font-size:1rem; }

/* Contact */
.seraj-accom-contact { display:flex; flex-wrap:wrap; gap:.75rem; }
.seraj-accom-contact--stacked { flex-direction:column; }
.seraj-accom-contact__item { display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1rem; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:999px; text-decoration:none; color:#1a1a1a; }
.seraj-accom-contact__item:hover { border-color:#2f5d3a; color:#2f5d3a; }

/* Enquiry */
.seraj-accom-enquiry { display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:900px) { .seraj-accom-enquiry { grid-template-columns:1fr 1.2fr; } }
.seraj-accom-enquiry__book { margin-top:2rem; padding:1.25rem; background:#f0ebe1; border-radius:1rem; }
.seraj-accom-enquiry__book h3 { font-family:Fraunces,serif; margin:0 0 .35rem; }
.seraj-accom-enquiry__form { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.seraj-accom-enquiry__form label { display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; color:#444; font-weight:500; flex:1; }
.seraj-accom-enquiry__form input, .seraj-accom-enquiry__form textarea, .seraj-accom-enquiry__form select { padding:.65rem .75rem; border:1px solid rgba(0,0,0,.15); border-radius:.5rem; font:inherit; }
.seraj-accom-enquiry__form input:focus, .seraj-accom-enquiry__form textarea:focus { outline:2px solid #2f5d3a; outline-offset:2px; border-color:#2f5d3a; }
.seraj-field-row { display:flex; gap:1rem; flex-wrap:wrap; }
.seraj-alert { padding:.75rem 1rem; border-radius:.5rem; margin:0; }
.seraj-alert--ok { background:#e6f2ea; color:#1e4b2c; }
.seraj-alert--err { background:#fdecec; color:#8b1e1e; }
.seraj-tiny { font-size:.75rem; }
.seraj-muted { color:#666; }

/* FAQ */
.seraj-faq { display:flex; flex-direction:column; gap:.5rem; max-width:820px; }
.seraj-faq__item { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:.75rem; padding:1rem 1.25rem; }
.seraj-faq__item summary { cursor:pointer; font-family:Fraunces,serif; font-size:1.1rem; }
.seraj-faq__item[open] summary { margin-bottom:.5rem; color:#2f5d3a; }

/* Archive */
.seraj-accom-archive-hero { background:linear-gradient(180deg, #faf7f0 0%, #fff 100%); padding-top:4rem; }
.seraj-accom-archive-hero h1 { font-family:Fraunces,serif; font-size:clamp(2rem, 5vw, 3.5rem); margin:.5rem 0 1rem; }
.seraj-accom-search { margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem; background:#fff; padding:1rem; border-radius:1rem; border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 20px rgba(0,0,0,.05); }
.seraj-accom-search__field { flex:1 1 160px; }
.seraj-accom-search__field--wide { flex:2 1 300px; }
.seraj-accom-search input, .seraj-accom-search select { width:100%; padding:.65rem .75rem; border:1px solid rgba(0,0,0,.12); border-radius:.5rem; font:inherit; background:#fff; }
.seraj-accom-feature { display:grid; grid-template-columns:1fr; gap:0; background:#fff; border-radius:1.25rem; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.06); }
@media (min-width:900px) { .seraj-accom-feature { grid-template-columns:1.2fr 1fr; } }
.seraj-accom-feature__media img { width:100%; height:100%; object-fit:cover; display:block; min-height:280px; }
.seraj-accom-feature__body { padding:2rem; display:flex; flex-direction:column; gap:.75rem; justify-content:center; }
.seraj-accom-feature__body h2 { font-family:Fraunces,serif; font-size:2rem; margin:0; }
.seraj-accom-feature__body a { color:inherit; text-decoration:none; }

/* Card enhancements */
.seraj-card--stay .seraj-card__eyebrow-badge { position:absolute; top:.75rem; left:.75rem; background:rgba(255,255,255,.95); padding:.25rem .65rem; border-radius:999px; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.seraj-card--stay .seraj-card__media { position:relative; }
.seraj-card--stay .seraj-card__location { font-size:.85rem; color:#666; margin:0 0 .35rem; }
.seraj-card--stay .seraj-card__amenities { list-style:none; padding:0; margin:.5rem 0; display:flex; flex-wrap:wrap; gap:.35rem; }
.seraj-card--stay .seraj-card__amenities li { font-size:.7rem; padding:.15rem .5rem; background:#f0ebe1; border-radius:999px; color:#5a5142; }
.seraj-card--stay .seraj-card__footer { display:flex; justify-content:space-between; align-items:center; margin-top:.75rem; }
.seraj-card--stay .seraj-card__price { font-family:Fraunces,serif; color:#2f5d3a; font-weight:600; }
.seraj-card--stay .seraj-card__cta { color:#2f5d3a; text-decoration:none; font-weight:600; font-size:.9rem; }
.seraj-card--elevated { transition:transform .3s ease, box-shadow .3s ease; }
.seraj-card--elevated:hover { transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.08); }

.seraj-pagination { margin-top:2.5rem; }
.seraj-empty { text-align:center; padding:3rem 0; color:#666; }

/* Buttons — small variants */
.seraj-btn--sm { padding:.4rem .75rem; font-size:.85rem; }
.seraj-btn--link { background:transparent; color:#fff; text-decoration:underline; padding:.5rem 0; }

/* ---------- Mobile gutter & bleed guards (stay singles) ---------- */
.seraj-accom-hero__body { padding-inline: max(1rem, env(safe-area-inset-left)); }
.seraj-accom-hero { min-height: min(70vh, 620px); }
@media (max-width: 640px) {
	.seraj-accom-hero__body { padding-block: 4rem 2.25rem; }
	.seraj-accom-hero__title { overflow-wrap: anywhere; }
	.seraj-accom-jump ul { padding-inline: max(1rem, env(safe-area-inset-left)); }
	.seraj-accom-jump ul::after { content: ''; flex: 0 0 .5rem; }
}

/* Book Now — solid black by default */
.seraj-accom-hero__actions .seraj-btn[href="#book"],
.seraj-accom-enquiry__book .seraj-btn {
	background: #000;
	color: #fff;
	border-color: #000;
}
.seraj-accom-hero__actions .seraj-btn[href="#book"]:hover,
.seraj-accom-enquiry__book .seraj-btn:hover:not([disabled]) {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}

.seraj-accom-hero__body,
.seraj-accom-overview,
.seraj-accom-overview__main { min-width: 0; }
.seraj-accom-overview__main > *,
.seraj-accom-hero__lede,
.seraj-accom-hero__eyebrow { overflow-wrap: anywhere; }
.seraj-accom-enquiry__form input,
.seraj-accom-enquiry__form textarea,
.seraj-accom-enquiry__form select { max-width: 100%; box-sizing: border-box; }
.seraj-fact, .seraj-room-card, .seraj-feature-card { min-width: 0; overflow-wrap: anywhere; }

/* Room photo strip — extra shots under each room cover. */
.seraj-room-card__strip {
	display: flex;
	gap: .4rem;
	list-style: none;
	margin: 0;
	padding: .4rem .4rem 0;
	overflow-x: auto;
}
.seraj-room-card__strip li { flex: 0 0 auto; }
.seraj-room-card__strip img {
	width: 64px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--seraj-radius-sm, 6px);
	display: block;
}

/* Highlight the booking block we just scrolled to from a room card. */
.is-flash {
	animation: seraj-flash 1.6s ease;
}
@keyframes seraj-flash {
	0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
	20%      { box-shadow: 0 0 0 3px var(--seraj-primary, #0f766e); }
}
@media (prefers-reduced-motion: reduce) {
	.is-flash { animation: none; }
}