/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position: relative; padding-top: calc(var(--nav-h) + 56px); padding-bottom: var(--space-8); overflow:hidden; background: var(--primary-dark); }
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 900px 500px at 15% 0%, rgba(184,135,75,0.22), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 30%, rgba(46,89,64,0.5), transparent 60%);
}
.hero .container{ position:relative; display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items:center; }
@media (max-width: 940px){ .hero .container{ grid-template-columns: 1fr; } }
.hero-eyebrow{ color: var(--brass-light); }
.hero-eyebrow::before{ background: var(--brass-light); }
.hero h1{ color: #fff; font-size: clamp(38px, 5.2vw, 62px); margin-top: var(--space-4); }
.hero h1 em{ font-style: italic; color: var(--brass-light); }
.hero p.lead{ color: rgba(255,255,255,0.72); font-size: 17.5px; max-width: 460px; margin-top: var(--space-4); }
.hero-actions{ display:flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.hero-stats{ display:flex; gap: var(--space-6); margin-top: var(--space-7); }
.hero-stats div b{ display:block; font-family: var(--font-display); font-size: 28px; color: #fff; }
.hero-stats div span{ font-size: 12.5px; color: rgba(255,255,255,0.55); }

.hero-visual{ position: relative; }
.hero-collage{ position: relative; aspect-ratio: 1/1; }
.hero-collage img{ position:absolute; border-radius: var(--r-lg); object-fit:cover; box-shadow: var(--shadow-lg); border: 3px solid rgba(255,255,255,0.08); }
.hero-collage .ph-1{ width: 62%; height: 68%; top: 0; left: 0; z-index: 2; }
.hero-collage .ph-2{ width: 48%; height: 48%; bottom: 0; right: 0; z-index: 3; }
.hero-keycard{
  position:absolute; top: 8%; right: -4%; z-index: 4; width: 210px; padding: 18px; border-radius: 16px;
  background: linear-gradient(145deg, #2E5940, #17281C); color:#fff; box-shadow: var(--shadow-keycard);
  border: 1px solid rgba(255,255,255,0.14); animation: float 5s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
.hero-keycard .stripe{ height: 8px; border-radius: 3px; background: linear-gradient(90deg, var(--brass-dark), var(--brass-light)); margin-bottom: 14px; }
.hero-keycard .kc-row{ display:flex; justify-content:space-between; font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,0.6); margin-bottom: 4px; }
.hero-keycard b{ font-family: var(--font-display); font-size: 16px; display:block; margin-top: 4px; }
@media (max-width: 940px){ .hero-keycard{ display:none; } }

/* Search bar card overlapping hero */
.search-bar{
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border:1px solid var(--border);
  padding: var(--space-5); display:grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--space-4); align-items: end;
  margin-top: -54px; position: relative; z-index: 20;
}
@media (max-width: 900px){ .search-bar{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .search-bar{ grid-template-columns: 1fr; margin-top: -30px; } }
.search-bar .field{ margin-bottom: 0; }
.search-bar .btn{ height: 48px; }

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.trust-strip{ padding: var(--space-6) 0; border-bottom: 1px solid var(--border); }
.trust-strip ul{ display:flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-5); }
.trust-strip li{ display:flex; align-items:center; gap: 10px; color: var(--ink-soft); font-size: 13.5px; font-weight: 500; }
.trust-strip svg{ color: var(--brass-dark); flex-shrink:0; }

/* ==========================================================================
   ROOM GRID
   ========================================================================== */
.room-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 980px){ .room-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .room-grid{ grid-template-columns: 1fr; } }

.section-cta{ display:flex; justify-content:center; margin-top: var(--space-6); }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; gap: var(--space-3); }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; border-radius: var(--r-md); transition: transform .4s ease, filter .4s ease; cursor: pointer; }
.gallery-grid img:hover{ transform: scale(1.02); filter: brightness(1.05); }
.gallery-grid .g-tall{ grid-row: span 2; }
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 140px; } }

/* Amenities band */
.amenities-band{ background: var(--primary); color: #fff; border-radius: var(--r-lg); padding: var(--space-7); display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 900px){ .amenities-band{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .amenities-band{ grid-template-columns: 1fr; padding: var(--space-5); } }
.amenity-item{ display:flex; flex-direction:column; gap: 10px; }
.amenity-item .icon-wrap{ width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; color: var(--brass-light); }
.amenity-item h4{ color:#fff; font-size: 15.5px; font-weight: 600; font-family: var(--font-body); }
.amenity-item p{ font-size: 13px; color: rgba(255,255,255,0.6); }

/* Testimonials */
.testimonial-card{ padding: var(--space-6); }
.testimonial-card .stars{ color: var(--brass); margin-bottom: var(--space-3); letter-spacing: 2px; }
.testimonial-card p{ font-size: 15.5px; color: var(--ink-soft); margin-bottom: var(--space-4); font-style: italic; }
.testimonial-author{ display:flex; align-items:center; gap: 12px; }
.testimonial-author img{ width: 42px; height:42px; border-radius:50%; object-fit:cover; }
.testimonial-author b{ display:block; font-size: 14px; }
.testimonial-author span{ font-size: 12.5px; color: var(--ink-faint); }
.testimonial-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
@media (max-width: 900px){ .testimonial-grid{ grid-template-columns: 1fr; } }

/* CTA band */
.cta-band{ background: linear-gradient(120deg, var(--primary-dark), var(--primary)); border-radius: var(--r-lg); padding: var(--space-8); text-align:center; position:relative; overflow:hidden; }
.cta-band::before{ content:''; position:absolute; inset:0; background: radial-gradient(circle at 80% 20%, rgba(184,135,75,0.25), transparent 55%); }
.cta-band h2{ color:#fff; font-size: clamp(28px,4vw,40px); position:relative; }
.cta-band p{ color: rgba(255,255,255,0.68); margin: var(--space-3) auto var(--space-5); max-width: 480px; position:relative; }
.cta-band .btn-group{ position:relative; display:flex; gap: var(--space-3); justify-content:center; flex-wrap:wrap; }

/* ==========================================================================
   ROOMS BROWSE PAGE
   ========================================================================== */
.page-header{ padding: calc(var(--nav-h) + 40px) 0 var(--space-6); background: var(--surface-sunk); border-bottom: 1px solid var(--border); }
.page-header h1{ font-size: clamp(30px, 4vw, 42px); }
.page-header p{ color: var(--ink-soft); margin-top: var(--space-2); max-width: 520px; }
.breadcrumb{ font-size: 13px; color: var(--ink-faint); margin-bottom: var(--space-3); display:flex; gap:6px; align-items:center; }
.breadcrumb a:hover{ color: var(--primary); }

.filter-bar{ display:flex; flex-wrap:wrap; gap: var(--space-3); align-items:center; padding: var(--space-5) 0; border-bottom: 1px solid var(--border); margin-bottom: var(--space-6); }
.filter-bar .input, .filter-bar select{ width: auto; min-width: 150px; }
.filter-pill-group{ display:flex; gap: 8px; flex-wrap: wrap; }
.filter-pill{ padding: 9px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--border); font-size: 13.5px; font-weight: 500; color: var(--ink-soft); transition: all .15s ease; }
.filter-pill:hover{ border-color: var(--primary); }
.filter-pill.active{ background: var(--primary); border-color: var(--primary); color: #fff; }
.results-count{ font-size: 13.5px; color: var(--ink-faint); margin-left: auto; }
.sort-select{ margin-left: auto; }
@media (max-width: 700px){ .filter-bar{ flex-direction: column; align-items: stretch; } .results-count, .sort-select{ margin-left: 0; } }

/* ==========================================================================
   ROOM DETAIL
   ========================================================================== */
.room-hero-gallery{ display:grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-3); height: 440px; border-radius: var(--r-lg); overflow:hidden; }
.room-hero-gallery .rhg-main{ height:100%; }
.room-hero-gallery .rhg-main img{ width:100%; height:100%; object-fit:cover; cursor:pointer; }
.rhg-side{ display:grid; grid-template-rows: 1fr 1fr; gap: var(--space-3); }
.rhg-side img{ width:100%; height:100%; object-fit:cover; cursor:pointer; }
.rhg-side .more-overlay{ position:relative; }
.rhg-side .more-overlay::after{ content: attr(data-count); position:absolute; inset:0; background: rgba(19,26,22,0.55); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size: 14px; border-radius: var(--r-md); }
@media (max-width: 760px){ .room-hero-gallery{ grid-template-columns: 1fr; height: auto; } .rhg-side{ display:none; } }

.room-detail-layout{ display:grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-7); margin-top: var(--space-7); align-items:start; }
@media (max-width: 960px){ .room-detail-layout{ grid-template-columns: 1fr; } }
.room-info-block{ padding-bottom: var(--space-6); border-bottom: 1px solid var(--border); margin-bottom: var(--space-6); }
.room-info-block:last-child{ border-bottom:none; }
.room-info-block h2{ font-size: 22px; margin-bottom: var(--space-3); }
.amenity-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-3); }
.amenity-list li{ display:flex; align-items:center; gap: 10px; font-size: 14.5px; color: var(--ink-soft); }
.amenity-list svg{ color: var(--brass-dark); flex-shrink:0; }

.booking-panel{ position: sticky; top: calc(var(--nav-h) + 20px); padding: var(--space-5); }
.booking-panel .price-row{ display:flex; align-items:baseline; gap:6px; margin-bottom: var(--space-4); }
.booking-panel .price-row b{ font-family: var(--font-mono); font-size: 30px; color: var(--primary); }
.booking-panel .price-row span{ color: var(--ink-faint); font-size: 14px; }
.avail-note{ display:flex; align-items:center; gap: 8px; font-size: 13px; padding: 10px 12px; border-radius: var(--r-sm); margin-top: var(--space-3); }
.avail-note.ok{ background: var(--green-tint); color: var(--green-status); }
.avail-note.bad{ background: var(--wine-tint); color: var(--wine); }
.price-breakdown{ margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--border); font-size: 13.5px; }
.price-breakdown .row{ display:flex; justify-content:space-between; margin-bottom: 8px; color: var(--ink-soft); }
.price-breakdown .row.total{ font-weight:700; color: var(--ink); font-size: 15px; padding-top: 8px; border-top: 1px solid var(--border); }

/* Confirmation keycard */
.keycard-confirm{ background: linear-gradient(150deg, #234230, #142A1E); border-radius: 20px; padding: var(--space-5); color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow-keycard); }
.keycard-confirm::after{ content:''; position:absolute; width:220px; height:220px; background: radial-gradient(circle, rgba(184,135,75,0.35), transparent 70%); top:-60px; right:-60px; }
.keycard-confirm .stripe{ height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--brass-dark), var(--brass-light) 50%, var(--brass-dark)); margin-bottom: var(--space-4); }
.keycard-confirm .kc-code{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: rgba(255,255,255,0.55); }
.keycard-confirm h3{ color:#fff; font-size: 22px; margin: 6px 0 var(--space-4); }
.keycard-confirm .kc-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); position:relative; }
.keycard-confirm .kc-grid div span{ display:block; font-size: 11px; color: rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:.06em; margin-bottom: 3px; }
.keycard-confirm .kc-grid div b{ font-family: var(--font-mono); font-size: 15px; }