/* Pedro Barn Hotel — Main Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400&family=Lato:wght@300;400;700&display=swap');

/* ===== CSS Variables ===== */
/* Primary palette values are the exact hex codes from the Pedro Barn
   Brand Guideline (Luxury Brown, Vintage Warm White, Luxury Beige,
   Barn Brown, Sustainability Green). Neutral/utility tones (background,
   foreground, muted, border) sit outside the guideline's named swatches
   and are kept as the site's existing cream/near-black extension of
   that palette. */
:root {
  --background: hsl(36, 56%, 92%);
  --foreground: hsl(23, 56%, 7%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(23, 56%, 7%);
  --primary: #3D2614;         /* Luxury Brown — brand guideline */
  --primary-foreground: #E7CAAD; /* Vintage Warm White — brand guideline */
  --secondary: #D0AF91;       /* Luxury Beige — brand guideline */
  --secondary-foreground: #3D2614;
  --muted: hsl(36, 30%, 88%);
  --muted-foreground: hsl(20, 20%, 40%);
  --accent: #54C38B;          /* Sustainability Green — brand guideline */
  --accent-foreground: hsl(0, 0%, 100%);
  --border: hsl(27, 25%, 82%);
  --radius: 0.25rem;
  --barn-brown: #664128;      /* Barn Brown — brand guideline */
  --saddle-brown: #72482B;    /* Saddle Brown — brand guideline */
  --royal-beige: #BE9D81;     /* Royal Beige — brand guideline */
  --warm-white: #E7CAAD;      /* Vintage Warm White — brand guideline */
  --warm-white-rgb: 231, 202, 173;
  --hotel-dark: hsl(23, 56%, 7%);
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ===== Typography ===== */
.font-heading { font-family: 'Fraunces', serif; }
.font-body { font-family: 'Lato', sans-serif; }

/* ===== Layout ===== */
.container-hotel {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
}

.section-padding {
  padding: 2rem 1.5rem;
}

@media (min-width: 768px) {
  .section-padding { padding: 3.5rem 3rem; }
}

@media (min-width: 1024px) {
  .section-padding { padding: 4rem 6rem; }
}

/* Homepage Dining section: photo is tall (58vh), so the section's normal
   bottom padding reads as an oversized empty gap before the Awards bar
   right below it. Tighten just this instance — placed after all
   .section-padding breakpoints above so it correctly overrides them. */
.dining-story-section { padding-bottom: 1.25rem; }

@media (min-width: 768px) {
  .dining-story-section { padding-bottom: 1.5rem; }
}

@media (min-width: 1024px) {
  .dining-story-section { padding-bottom: 2rem; }
}

/* ===== Animations ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-up { animation: fadeUp 0.8s ease-out forwards; }
.animate-fade-in { animation: fadeIn 1s ease-out forwards; }

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s ease, transform 1s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Navigation ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background 0.5s, box-shadow 0.3s;
}

.site-header.scrolled {
  background: var(--primary);
  box-shadow: 0 1px 8px rgba(0,0,0,0.2);
}

.header-inner {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 1.25rem;
  margin: 0 auto;
  transition: height 0.3s ease;
}

@media (min-width: 1024px) {
  .header-inner { padding: 0 2rem; }
}

.site-header.scrolled .header-inner {
  height: 60px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
}

.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
}

.logo-mark {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
  transition: width 0.3s ease, height 0.3s ease;
}

@media (min-width: 768px) {
  .logo-mark { width: 62px; height: 62px; }
}

.site-header.scrolled .logo-mark {
  width: 42px;
  height: 42px;
}

.main-nav {
  display: none;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .main-nav { display: flex; }
}

.main-nav a {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  transition: opacity 0.3s;
}

.main-nav a:hover { opacity: 0.7; }
.main-nav a.active { opacity: 0.85; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.mobile-menu a.active { opacity: 0.85; text-decoration: underline; }

.header-transparent .main-nav a { color: var(--primary-foreground); }
.site-header.scrolled .main-nav a { color: var(--primary-foreground); }

.header-book {
  display: none;
}

@media (min-width: 1024px) {
  .header-book { display: block; }
}

/* ===== Buttons ===== */
.btn {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 0.75rem 2rem;
  display: inline-block;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}

.btn-primary:hover { background: var(--barn-brown); }

.btn-outline {
  border: 1px solid var(--primary-foreground);
  color: var(--primary-foreground);
}

.btn-outline:hover { background: rgba(255,255,255,0.1); }

.btn-outline-dark {
  border: 1px solid var(--saddle-brown);
  color: var(--saddle-brown);
  background: transparent;
}

.btn-outline-dark:hover { background: var(--saddle-brown); color: var(--primary-foreground); }

.btn-hero {
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.875rem;
  padding: 1rem 2.5rem;
}

.btn-hero:hover { background: var(--barn-brown); }

.btn-ghost-white {
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--warm-white);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 0.75rem 2rem;
  display: inline-block;
  transition: all 0.3s;
}

.btn-ghost-white:hover { background: rgba(255,255,255,0.1); }

.link-underline {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: var(--primary);
  border-bottom: 1px solid var(--primary);
  padding-bottom: 2px;
  transition: opacity 0.3s;
}

.link-underline:hover { opacity: 0.7; }

/* ===== Our Story Section ===== */
.story-divider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 5.5rem;
  margin: -0.5rem 0 1.25rem;
}

.story-divider-line {
  flex: 1;
  height: 1px;
  background: var(--secondary);
}

.story-divider-icon {
  width: 14px;
  height: 14px;
  color: var(--secondary);
  flex-shrink: 0;
}

.story-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.story-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.story-cta:hover svg { transform: translateX(4px); }

/* Center these fixed-width decorative elements when their column is
   text-center (e.g. the homepage Dining section) — scoped so the
   Our Story section, which reuses the same components, stays untouched. */
.text-center .story-divider,
.text-center .heading-underline {
  margin-left: auto;
  margin-right: auto;
}

.story-image-wrap {
  position: relative;
  padding-bottom: 1.75rem;
}

@media (min-width: 640px) {
  .story-image-wrap { padding-bottom: 0; padding-left: 0; }
}

.story-image-frame {
  position: relative;
  width: 100%;
  height: 58vh;
  height: 58dvh;
  max-height: 560px;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid var(--secondary);
}

@media (max-width: 1023px) {
  .story-image-frame { height: 42vh; height: 42dvh; max-height: 420px; }
}

@media (max-width: 767px) {
  .story-image-frame { height: 26vh; height: 26dvh; max-height: 320px; }
}

@media (max-width: 767px) and (max-height: 700px) {
  .story-image-frame { height: 22vh; height: 22dvh; max-height: 240px; }
}

.story-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-badge {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--card);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  padding: 0.65rem 0.85rem;
  max-width: 15rem;
}

@media (min-width: 640px) {
  .story-badge {
    left: -1.5rem;
    bottom: -1.5rem;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    max-width: 17rem;
  }
}

.story-badge-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
}

.story-badge-icon svg { width: 20px; height: 20px; }

@media (min-width: 640px) {
  .story-badge-icon { width: 40px; height: 40px; }
  .story-badge-icon svg { width: 28px; height: 28px; }
}

.story-badge-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--saddle-brown);
  font-family: 'Lato', sans-serif;
  margin-bottom: 0.15rem;
}

.story-badge-text {
  font-family: 'Fraunces', serif;
  font-size: 0.85rem;
  color: var(--foreground);
  line-height: 1.3;
}

@media (min-width: 640px) {
  .story-badge-text { font-size: 0.95rem; }
}

/* ===== Mobile Menu ===== */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: color 0.3s;
}

@media (min-width: 1024px) {
  .menu-toggle { display: none; }
}

.header-transparent .menu-toggle { color: var(--primary-foreground); }
.site-header.scrolled .menu-toggle { color: var(--primary-foreground); }

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--primary);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  overflow-y: auto;
  padding: 6rem 1.5rem 3rem;
  box-sizing: border-box;
}

.mobile-menu.open { display: flex; animation: fadeIn 0.3s ease; }

.mobile-menu a {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  color: var(--primary-foreground);
  transition: opacity 0.3s;
}

.mobile-menu a:hover { opacity: 0.7; }

.mobile-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  color: var(--primary-foreground);
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

/* ===== Footer ===== */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 5rem 1.5rem 2rem;
}

@media (min-width: 1024px) {
  .site-footer { padding: 5rem 3rem 2rem; }
}

.footer-decor {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, black 35%, transparent 100%);
  mask-image: linear-gradient(to left, black 35%, transparent 100%);
}

@media (min-width: 1280px) {
  .footer-decor { display: block; }
}

.footer-decor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  filter: grayscale(15%) brightness(0.65);
}

.footer-inner {
  position: relative;
  z-index: 2;
  max-width: 80rem;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1.2fr 1fr 1.3fr; gap: 2.5rem; }
}

.footer-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.footer-logo-row img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  flex-shrink: 0;
}

.footer-logo-name {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  margin-bottom: 0.15rem;
}

.footer-logo-tagline {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-family: 'Lato', sans-serif;
  color: var(--secondary);
}

.footer-desc {
  font-size: 0.875rem;
  opacity: 0.7;
  line-height: 1.7;
  margin-bottom: 1.25rem;
  font-family: 'Lato', sans-serif;
}

.footer-brand .footer-desc { text-align: center; }

.footer-socials {
  display: flex;
  gap: 0.75rem;
}

.footer-brand .footer-socials { justify-content: center; }

.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(231,202,173,0.35);
  color: var(--primary-foreground);
  transition: background 0.3s, border-color 0.3s;
  flex-shrink: 0;
}

.footer-social-icon svg { width: 16px; height: 16px; }

.footer-social-icon:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--primary);
}

.footer-heading {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--secondary);
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.footer-links { display: flex; flex-direction: column; gap: 0.75rem; }

.footer-links a {
  font-size: 0.875rem;
  opacity: 0.75;
  font-family: 'Lato', sans-serif;
  transition: opacity 0.3s;
}

.footer-links a:hover { opacity: 1; }

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.8125rem;
  opacity: 0.75;
  font-family: 'Lato', sans-serif;
  line-height: 1.5;
  transition: opacity 0.3s;
}

a.footer-contact-item:hover { opacity: 1; }

.footer-contact-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--secondary);
}

.footer-hours {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-hours-row {
  font-size: 0.8125rem;
  font-family: 'Lato', sans-serif;
}

.footer-hours-row strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.footer-hours-row span {
  opacity: 0.7;
}

.footer-newsletter .footer-desc { margin-bottom: 1rem; }

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.newsletter-form input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.9rem;
  font-size: 0.8125rem;
  font-family: 'Lato', sans-serif;
  background: rgba(231,202,173,0.08);
  border: 1px solid rgba(231,202,173,0.3);
  border-radius: var(--radius);
  color: var(--primary-foreground);
}

.newsletter-form input[type="email"]::placeholder { color: rgba(231,202,173,0.55); }
.newsletter-form input[type="email"]:focus { outline: none; border-color: var(--secondary); }

.newsletter-form button {
  padding: 0.7rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: 'Lato', sans-serif;
  background: var(--secondary);
  color: var(--primary);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.3s;
}

.newsletter-form button:hover { opacity: 0.85; }

.newsletter-note {
  font-size: 0.75rem;
  color: var(--secondary);
  margin-top: 0.6rem;
  opacity: 0;
  transition: opacity 0.3s;
}

.newsletter-note.visible { opacity: 0.9; }

.footer-badges {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(231,202,173,0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-badge {
  font-size: 0.75rem;
  opacity: 0.5;
  font-family: 'Lato', sans-serif;
}

.footer-bottom {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(231,202,173,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; }
}

.footer-copy {
  font-size: 0.75rem;
  opacity: 0.5;
  font-family: 'Lato', sans-serif;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-family: 'Lato', sans-serif;
}

.footer-bottom-links a { opacity: 0.6; transition: opacity 0.3s; }
.footer-bottom-links a:hover { opacity: 1; }
.footer-bottom-links span { opacity: 0.3; }

.footer-map {
  font-size: 0.75rem;
  opacity: 0.5;
  font-family: 'Lato', sans-serif;
  transition: opacity 0.3s;
}

.footer-map:hover { opacity: 0.7; }

/* ===== Hero ===== */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(23, 10, 5, 0.5);
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 1.5rem;
  max-width: 48rem;
}

.hero-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: rgba(231,202,173, 0.8);
  font-family: 'Lato', sans-serif;
  margin-bottom: 1.5rem;
}

.hero-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: #E7CAAD;
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.hero-sub {
  font-family: 'Lato', sans-serif;
  color: rgba(231,202,173, 0.8);
  font-size: 1.125rem;
  margin-bottom: 2.5rem;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

@media (min-width: 640px) {
  .hero-buttons { flex-direction: row; }
}

/* ===== Promo Banner ===== */
.promo-banner {
  background: var(--accent);
  padding: 1rem 1.5rem;
  text-align: center;
}

.promo-banner a {
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent-foreground);
}

.promo-banner a:hover { text-decoration: underline; }

/* ===== Page Header ===== */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 8rem 1.5rem 3rem;
}

@media (min-width: 1024px) {
  .page-hero { padding: 9rem 3rem 3rem; }
}

.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(23, 10, 5, 0.55);
  z-index: 1;
}

.page-hero-inner { position: relative; z-index: 2; max-width: 80rem; margin: 0 auto; }

/* ===== Full-Bleed Banner (image + overlaid text, e.g. The Estate) ===== */
.estate-banner {
  position: relative;
  overflow: hidden;
  min-height: max(420px, 65vh);
  min-height: max(420px, 65dvh);
  max-height: 650px;
  display: flex;
  align-items: center;
}

.estate-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.estate-banner-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23,10,5,0.9) 0%, rgba(23,10,5,0.6) 45%, rgba(23,10,5,0.15) 80%, transparent 100%);
}

@media (max-width: 767px) {
  .estate-banner { align-items: flex-end; }
  .estate-banner-gradient { background: linear-gradient(180deg, rgba(23,10,5,0.35) 0%, rgba(23,10,5,0.92) 65%); }
}

.estate-banner-content {
  position: relative;
  z-index: 1;
  max-width: 32rem;
  padding: 3rem 1.5rem;
}

@media (min-width: 768px) {
  .estate-banner-content { padding: 3rem 4rem; }
}

.page-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  opacity: 0.6;
  font-family: 'Lato', sans-serif;
  margin-bottom: 0.75rem;
}

.page-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.5rem, 6vw, 3.5rem);
}

/* ===== Wellness treatment cards: photo + icon badge ===== */
.wellness-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.25rem;
}

@media (min-width: 768px) {
  .wellness-card-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem 1.75rem; }
}

.wellness-photo-wrap { position: relative; }

.wellness-card-photo {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
}

.wellness-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.wellness-card-photo:hover img { transform: scale(1.05); }

.wellness-card-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  border: 1px solid var(--secondary);
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--saddle-brown);
  box-shadow: 0 6px 16px rgba(61, 38, 20, 0.18);
}

.wellness-card-icon svg { width: 22px; height: 22px; }

.wellness-card-title {
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--foreground);
  margin: 2rem 0 0.5rem;
}

.wellness-card-desc {
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 639px) {
  .wellness-card-icon { width: 3.25rem; height: 3.25rem; }
  .wellness-card-icon svg { width: 19px; height: 19px; }
  .wellness-card-title { font-size: 1rem; margin-top: 1.75rem; }
  .wellness-card-desc { font-size: 0.82rem; }
}

/* ===== Cards / Grid ===== */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 2rem;
}

.card-simple {
  border: 1px solid var(--border);
  padding: 1.5rem;
  transition: box-shadow 0.3s;
}

.card-simple:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); }

.card-title {
  font-family: 'Fraunces', serif;
  font-size: 1.125rem;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}

.card-desc {
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* ===== Experience Photo Tiles (index.php featured grid) ===== */
.experience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}

@media (min-width: 640px) {
  .experience-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

.experience-tile {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 0.75rem;
  overflow: hidden;
}

.experience-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.experience-tile:hover img { transform: scale(1.05); }

.experience-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23,10,5,0.85) 0%, rgba(23,10,5,0.15) 55%, transparent 100%);
}

.experience-tile-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.85rem 0.85rem;
  font-family: 'Fraunces', serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-foreground);
  line-height: 1.3;
}

@media (min-width: 768px) {
  .experience-tile-title { font-size: 1rem; padding: 1.1rem; }
}

/* ===== Experience Cards (experiences.php: photo + icon badge) ===== */
.experience-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.25rem;
}

@media (min-width: 768px) {
  .experience-card-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem 1.75rem; }
}

.experience-photo-wrap { position: relative; }

.experience-card-photo {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
}

.experience-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.experience-card-photo:hover img { transform: scale(1.05); }

.experience-card-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  border: 1px solid var(--secondary);
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--saddle-brown);
  box-shadow: 0 6px 16px rgba(61, 38, 20, 0.18);
}

.experience-card-icon svg { width: 22px; height: 22px; }

.experience-card-title {
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--foreground);
  margin: 2rem 0 0.5rem;
}

.experience-card-desc {
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 639px) {
  .experience-card-icon { width: 3.25rem; height: 3.25rem; }
  .experience-card-icon svg { width: 19px; height: 19px; }
  .experience-card-title { font-size: 1rem; margin-top: 1.75rem; }
  .experience-card-desc { font-size: 0.82rem; }
}

/* ===== Room Overlay Cards ===== */
.room-overlay-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 0.75rem;
  overflow: hidden;
  display: block;
}

.room-overlay-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.room-overlay-card:hover img { transform: scale(1.05); }

.room-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23,10,5,0.92) 0%, rgba(23,10,5,0.25) 55%, transparent 100%);
}

.room-overlay-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.1rem;
}

.room-overlay-title {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.35rem;
}

.room-overlay-desc {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.room-overlay-link {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.6);
  padding-bottom: 2px;
  transition: opacity 0.3s;
}

.room-overlay-card:hover .room-overlay-link { opacity: 0.75; }

/* ===== Sections ===== */
.section-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted-foreground);
  font-family: 'Lato', sans-serif;
  margin-bottom: 1rem;
}

.section-label-light {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  opacity: 0.6;
  font-family: 'Lato', sans-serif;
  margin-bottom: 1rem;
}

.section-label-accent {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--accent);
  font-family: 'Lato', sans-serif;
  margin-bottom: 1rem;
}

.section-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--foreground);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.heading-underline {
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--secondary);
  margin: -0.75rem 0 1.5rem;
}

.section-title-light {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.section-body {
  font-family: 'Lato', sans-serif;
  color: var(--muted-foreground);
  line-height: 1.8;
}

/* From Garden to Table: drop cap + italic serif treatment (Option 3) */
.has-dropcap .dropcap {
  float: left;
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 3.2rem;
  line-height: 0.7;
  color: var(--saddle-brown);
  margin: 0.1rem 0.5rem 0 0;
}

.section-body-italic {
  font-style: italic;
  font-family: 'Fraunces', serif;
}

@media (max-width: 639px) {
  .has-dropcap .dropcap { font-size: 2.6rem; margin: 0.05rem 0.4rem 0 0; }
}

@media (max-width: 767px) and (max-height: 700px) {
  .section-title, .section-title-light { margin-bottom: 0.75rem; }
  .section-body { line-height: 1.5; }
  .mb-6 { margin-bottom: 0.75rem; }
}

/* ===== Image Sections ===== */
.image-text-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}

@media (max-width: 767px) and (max-height: 700px) {
  .image-text-grid { gap: 0.85rem; }
}

@media (min-width: 1024px) {
  .image-text-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.aspect-45 { aspect-ratio: 4/5; max-height: 62vh; max-height: 62dvh; overflow: hidden; margin: 0 auto; }
.aspect-sq { aspect-ratio: 1/1; max-height: 62vh; max-height: 62dvh; overflow: hidden; margin: 0 auto; }
.aspect-169 { aspect-ratio: 16/9; max-height: 62vh; max-height: 62dvh; overflow: hidden; }

@media (max-width: 1023px) {
  .aspect-45, .aspect-sq, .aspect-169 {
    max-height: 50vh;
    max-height: 50dvh;
  }
}

@media (max-width: 767px) {
  .aspect-45, .aspect-sq, .aspect-169 {
    max-height: 38vh;
    max-height: 38dvh;
  }
}

.aspect-45 img,
.aspect-sq img,
.aspect-169 img,
.bar-lounge-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.aspect-45 img:hover,
.aspect-sq img:hover,
.aspect-169 img:hover,
.bar-lounge-photo img:hover { transform: scale(1.05); }

/* ===== Image Hero Overlay ===== */
.img-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.img-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(23, 10, 5, 0.6);
}

.img-hero-content {
  position: relative;
  z-index: 10;
  padding: 3rem 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .img-hero-content { padding: 5rem 3rem; }
}

/* ===== Accommodation Section ===== */
.bg-primary { background: var(--primary); }
.bg-secondary { background: var(--secondary); }
.bg-muted { background: var(--muted); }
.bg-card { background: var(--card); }
.bg-background { background: var(--background); }
.text-primary { color: var(--primary); }
.text-primary-fg { color: var(--primary-foreground); }
.text-secondary-fg { color: var(--secondary-foreground); }
.text-foreground { color: var(--foreground); }
.text-muted { color: var(--muted-foreground); }
.text-accent { color: var(--accent); }
.text-warm-white { color: var(--warm-white); }

/* ===== Accommodation Cards ===== */
.room-card img {
  width: 100%;
  aspect-ratio: 4/3;
  max-height: 42vh;
  max-height: 42dvh;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.room-card:hover img { transform: scale(1.03); }

.room-card-inner {
  overflow: hidden;
}

.room-card-body {
  padding: 1.5rem 0;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 1.5rem;
}

.room-card-title {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.room-card-desc {
  font-size: 0.875rem;
  opacity: 0.7;
  font-family: 'Lato', sans-serif;
  margin-bottom: 1rem;
}

/* ===== Full-Screen Hero Sections ===== */
/* The homepage hero and 404 page are full-bleed, one-screen "moment"
   sections. Uses min-height (not a hard-capped height), so if content
   is ever taller than one screen — which varies slightly by browser/OS
   chrome and font rendering — it simply flows to the next section
   instead of being clipped. */
html {
  scroll-behavior: smooth;
  height: 100%;
}

body { min-height: 100%; }

main > section.hero,
main > .not-found {
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: visible;
}

/* The page-hero banner (interior page title strip) is intentionally NOT
   full screen — it's a compact banner, not a slide. Full-height only made
   sense for the homepage hero; on interior pages it left a huge empty gap
   before the real content. */
main > section.page-hero {
  height: 52vh;
  height: 52dvh;
  min-height: 320px;
  max-height: 560px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Regular content sections now size naturally to their content instead
   of being stretched to fill the full screen — stretching short
   content to 100vh with centered alignment left large, awkward empty
   gaps above and below it that read as broken or unfinished. */
main > .reveal { padding-top: 4.5rem; }

@media (min-width: 1024px) {
  main > .reveal { padding-top: 0; }
}


.awards-bar {
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 2rem 1.5rem;
}

.awards-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  max-width: 80rem;
  margin: 0 auto;
}

.award-seal {
  width: 150px;
  text-align: center;
}

.award-seal-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem;
}

.award-seal-icon svg {
  width: 19px;
  height: 19px;
  color: var(--secondary);
}

.award-seal-text {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--primary-foreground);
  opacity: 0.85;
}

/* ===== Reviews ===== */
.review-card {
  border: 1px solid var(--border);
  padding: 2rem;
}

.review-quote {
  font-family: 'Fraunces', serif;
  font-size: 1.125rem;
  font-style: italic;
  color: var(--foreground);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.review-author {
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
}

.review-origin {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ===== Cuisine Grid ===== */
.cuisine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .cuisine-grid { gap: 1.5rem; }
}

.cuisine-item {
  overflow: hidden;
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: 3/4;
  max-height: 44vh;
  max-height: 44dvh;
}

.cuisine-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.cuisine-item:hover img { transform: scale(1.05); }

.cuisine-caption {
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .cuisine-caption { font-size: 0.75rem; }
}

/* ===== Cuisine Showcase — Editorial Ornaments (dining.php "Our Cuisine") =====
   Scoped to their own classes rather than the shared .cuisine-* rules above,
   since cuisine-grid/cuisine-item/cuisine-caption are also reused as a plain
   photo gallery on suite-room.php and deluxe-double-room.php. */
.ornament-divider {
  display: flex;
  justify-content: center;
  color: var(--secondary);
  margin: 1rem auto 1.5rem;
}

.ornament-divider--sm { margin: 0.85rem auto 0; }

.cuisine-photo {
  position: relative;
}

.cuisine-icon-circle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  border: 1px solid var(--secondary);
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--saddle-brown);
  box-shadow: 0 6px 16px rgba(61, 38, 20, 0.18);
}

.cuisine-icon-circle svg { width: 24px; height: 24px; }

.cuisine-caption-editorial {
  text-align: center;
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--foreground);
  margin-top: 2.75rem;
}

/* ===== Gallery Grid ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

.gallery-item { overflow: hidden; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.gallery-item:hover img { transform: scale(1.05); }

.gallery-item:first-child {
  aspect-ratio: 16/9;
}

@media (min-width: 768px) {
  .gallery-item:first-child {
    grid-column: span 2;
  }
}

.gallery-item:not(:first-child) {
  aspect-ratio: 1/1;
}

/* ===== Sustainability ===== */
.sustainability-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* ===== Form ===== */
.contact-form { display: flex; flex-direction: column; gap: 1rem; }

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--foreground);
  font-family: 'Lato', sans-serif;
}

.form-input,
.form-textarea {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0.75rem 1rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.3s;
  width: 100%;
}

.form-input:focus,
.form-textarea:focus { border-color: var(--primary); }

.form-textarea { resize: vertical; min-height: 150px; }

.form-success {
  display: none;
  background: var(--accent);
  color: white;
  padding: 1rem 1.5rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  text-align: center;
}

.form-success.show { display: block; }

/* ===== Utilities ===== */
.text-center { text-align: center; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }

.italic { font-style: italic; }
.font-bold { font-weight: 700; }

.flex-center-gap { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) {
  .flex-center-gap { flex-direction: row; }
}

.badge {
  display: inline-block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  background: var(--accent);
  color: white;
  padding: 0.25rem 0.75rem;
  margin-bottom: 1rem;
}

/* ===== Policies ===== */
.policy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .policy-grid { grid-template-columns: repeat(2, 1fr); }
}

.policy-link {
  border: 1px solid var(--border);
  padding: 1.5rem;
  display: block;
  transition: box-shadow 0.3s;
}

.policy-link:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); }

.policy-link-title {
  font-family: 'Fraunces', serif;
  font-size: 1.125rem;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}

.policy-link-desc {
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* ===== Payment Options ===== */
.payment-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.payment-item {
  font-family: 'Lato', sans-serif;
  font-size: 0.9375rem;
  color: var(--foreground);
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .security-grid { grid-template-columns: repeat(4, 1fr); }
}

.security-item {
  border: 1px solid var(--border);
  padding: 1.5rem;
  text-align: center;
}

.security-title {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  color: var(--foreground);
  margin-bottom: 0.25rem;
}

.security-desc {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-family: 'Lato', sans-serif;
}

/* ===== Feature List ===== */
/* ===== Room Detail — Magazine Style Header ===== */
.room-magazine-photo {
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 16/7;
  max-width: 50rem;
  margin: 0 auto 2rem;
}

.room-magazine-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .room-magazine-photo { aspect-ratio: 4/3; }
}

/* Room detail pages (Suite/Deluxe/Superior): full-bleed banner photo
   with the title overlaid at the bottom, matching the Evening Dining
   banner treatment on dining.php. */
.room-hero-banner {
  position: relative;
  height: 42vh;
  height: 42dvh;
  min-height: 280px;
  max-height: 440px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.room-hero-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-hero-banner-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,10,5,0.05) 0%, rgba(23,10,5,0.85) 100%);
}

.room-hero-banner-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 1.75rem 1.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .room-hero-banner-content { padding: 2rem 3rem; }
}

.room-hero-banner-content .section-title { margin-bottom: 0; }

/* Room detail pages (Suite/Deluxe/Superior), Option E: a floating info
   card overlaps the bottom edge of the photo instead of text sitting
   directly on the image — avoids the fixed header ever overlapping
   photo content, since the photo isn't full-bleed under the header. */
.room-photo-card-wrap {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
  padding: 6.5rem 1.5rem 4.5rem;
}

@media (min-width: 768px) {
  .room-photo-card-wrap { padding: 7.5rem 3rem 5rem; }
}

/* Positioning context for the card below — deliberately NOT the element
   with overflow:hidden, so the card isn't clipped when it overlaps the
   photo's bottom edge. */
.room-photo-frame {
  position: relative;
}

.room-photo-card-photo {
  aspect-ratio: 16/8;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(61, 38, 20, 0.2);
}

.room-photo-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.room-info-card {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  background: var(--background);
  border: 1px solid var(--secondary);
  border-radius: 12px;
  padding: 1.25rem 2rem;
  text-align: center;
  box-shadow: 0 12px 30px rgba(61, 38, 20, 0.18);
  width: 88%;
  max-width: 30rem;
}

.room-info-card .section-title {
  margin: 0;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
}

@media (max-width: 640px) {
  .room-photo-card-photo { aspect-ratio: 4/3; }
  .room-info-card { padding: 0.9rem 1.25rem; }
}

/* Amenities collapse into a single wrapping row on the detail pages,
   instead of the 2-column icon-above-label grid used elsewhere, since
   the banner already establishes plenty of visual weight above. */
.room-amenity-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem 2.25rem;
  max-width: 54rem;
  margin: 0 auto 2rem;
}

.room-amenity-row .room-amenity-box {
  flex: 0 1 7.5rem;
}

.feature-list { display: flex; flex-direction: column; gap: 0.5rem; }
.feature-item {
  font-family: 'Lato', sans-serif;
  font-size: 0.9375rem;
  color: var(--foreground);
}

/* ===== Accommodation Listing — Enhanced Room Cards ===== */
.room-availability-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 20px;
}

.room-tags {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.6rem;
  column-gap: 1.5rem;
  margin-bottom: 2rem;
}

.room-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.8125rem;
  color: var(--foreground);
}

.room-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--secondary);
  flex-shrink: 0;
}

.room-amenity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 0.65rem;
  margin-bottom: 2rem;
}

@media (min-width: 480px) {
  .room-amenity-grid { grid-template-columns: repeat(3, 1fr); }
}

.room-amenity-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
  padding: 0.5rem 0.5rem;
}

.room-amenity-box svg {
  width: 20px;
  height: 20px;
  padding: 14px;
  box-sizing: content-box;
  border: 1px solid var(--secondary);
  border-radius: 50%;
  background: var(--background);
  color: var(--saddle-brown);
  flex-shrink: 0;
}

.room-amenity-box span {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  color: var(--foreground);
  line-height: 1.4;
}

/* Room pages: the photo gallery section right after the main content
   was stacking its own top padding on top of the previous section's
   bottom padding, reading as an oversized empty gap. Tighten just the
   top side here. */
.room-gallery-section { padding-top: 1.25rem; }

@media (min-width: 768px) {
  .room-gallery-section { padding-top: 1.5rem; }
}

@media (min-width: 1024px) {
  .room-gallery-section { padding-top: 2rem; }
}

/* Accommodation page: each room card (Suite/Deluxe/Superior) fits one
   screen individually, matching the pattern used on dining.php's Bar &
   Lounge and From Garden to Table sections. Only applies at >=1024px,
   matching .image-text-grid's own breakpoint for going side-by-side —
   below that the columns stack and natural height is correct. */
.room-card-section {
  min-height: 0;
  padding-top: 2rem;
}

@media (min-width: 768px) {
  .room-card-section { padding-top: 3.5rem; }
}

@media (min-width: 1024px) {
  .room-card-section {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    /* Extra top padding offsets the fixed header (60px scrolled height)
       so the centered content sits mid-way in the VISIBLE viewport
       below the header, not the full 100vh. */
    padding-top: calc(4rem + 60px);
  }

  /* Option 2: enlarge the room photo now that the section has a full
     screen to work with, instead of leaving it at the standard
     .story-image-frame size used elsewhere (index.php Our Story, etc.) */
  .room-card-section .story-image-frame {
    height: 74vh;
    height: 74dvh;
    max-height: 760px;
  }

  /* Option 2: amenities switch from the icon-above-label vertical style
     (used on the individual room detail pages) to icon-left horizontal
     rows here, so they scale better across the wider column this
     enlarged layout leaves for text. */
  .room-card-section .room-amenity-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1.5rem;
  }

  .room-card-section .room-amenity-box {
    flex-direction: row;
    text-align: left;
    gap: 0.85rem;
    padding: 0;
  }

  .room-card-section .room-amenity-box span { font-size: 0.85rem; }
}

/* ===== 404 ===== */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 2rem;
}

.not-found-num {
  font-family: 'Fraunces', serif;
  font-size: 8rem;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 1rem;
}

.not-found-title {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  color: var(--foreground);
  margin-bottom: 1rem;
}

.not-found-desc {
  font-family: 'Lato', sans-serif;
  color: var(--muted-foreground);
  margin-bottom: 2rem;
}

/* ===== Responsive helpers ===== */
.hidden-mobile { display: none; }
@media (min-width: 768px) {
  .hidden-mobile { display: block; }
}

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
/* ===== Dining Page — Rustic Lodge (Option 2) ===== */

/* Hero: bottom-left aligned title with green badge */
.page-hero-bottom {
  display: flex;
  align-items: flex-end;
  min-height: 24rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 1024px) {
  .page-hero-bottom { min-height: 28rem; padding-bottom: 3rem; }
}

.page-hero-bottom .page-hero-inner { width: 100%; }

.hero-badge {
  display: inline-block;
  background: rgba(84, 195, 139, 0.18);
  border: 1px solid rgba(84, 195, 139, 0.55);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}

/* From Garden to Table: same one-screen, centered treatment as Bar &
   Lounge below — the section's natural content height was shorter than
   the viewport, leaving a stray empty gap before the next section.
   Only applies at >=1024px, matching .image-text-grid's own breakpoint
   for going side-by-side — below that the columns stack and natural
   height (no forced full-viewport centering) is correct. */
.restaurant-section {
  min-height: 0;
  padding-top: 2rem;
}

@media (min-width: 768px) {
  .restaurant-section { padding-top: 3.5rem; }
}

@media (min-width: 1024px) {
  .restaurant-section {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    /* Extra top padding offsets the fixed header (60px scrolled height)
       so the centered content sits mid-way in the VISIBLE viewport
       below the header, not the full 100vh. */
    padding-top: calc(4rem + 60px);
  }
}

/* Larger photo for this section: fills its column width (instead of
   .aspect-45's centered, narrower-than-column sizing) and allows a
   taller max-height since the section now has more room to work with. */
.restaurant-photo {
  width: 100%;
  aspect-ratio: 4/5;
  max-height: 74vh;
  max-height: 74dvh;
  overflow: hidden;
  margin: 0;
}

.restaurant-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.restaurant-photo:hover img { transform: scale(1.05); }

@media (max-width: 1023px) {
  .restaurant-photo { max-height: 50vh; max-height: 50dvh; }
}

@media (max-width: 767px) {
  .restaurant-photo { max-height: 38vh; max-height: 38dvh; }
}

/* Bar & Lounge: fit the whole section within one screen, image sized up.
   Only applies at >=1024px, matching .image-text-grid's own breakpoint for
   going side-by-side — below that the columns stack and natural height
   (no forced full-viewport centering) is correct. */
.bar-lounge-section {
  min-height: 0;
  padding-top: 2rem;
}

@media (min-width: 768px) {
  .bar-lounge-section { padding-top: 3.5rem; }
}

@media (min-width: 1024px) {
  .bar-lounge-section {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    /* Extra top padding offsets the fixed header (60px scrolled height) so
       the centered content sits mid-way in the VISIBLE viewport below the
       header, not the full 100vh (which the header covers part of).
       Without this, the gap above is hidden under the header while the
       equal gap below stays fully visible, making the section look
       bottom-heavy. */
    padding-top: calc(4rem + 60px);
  }
}

.bar-lounge-photo {
  width: 100%;
  aspect-ratio: 3/4;
  max-height: 78vh;
  max-height: 78dvh;
  overflow: hidden;
  margin: 0;
}

@media (max-width: 1023px) {
  .bar-lounge-photo { max-height: 55vh; max-height: 55dvh; }
}

@media (max-width: 767px) {
  .bar-lounge-photo { aspect-ratio: 4/5; max-height: 42vh; max-height: 42dvh; }
}

/* Framed images: rounded corners with a fine brown keyline */
.img-framed {
  border-radius: 12px;
  border: 1px solid var(--barn-brown);
  overflow: hidden;
}

/* Softer frame variant: larger radius, no keyline, gentle lift shadow */
.img-framed--soft {
  border: none;
  border-radius: 24px;
  box-shadow: 0 20px 45px rgba(61, 38, 20, 0.22);
}

/* Opening Hours card (dining.php "Bar & Lounge") */
.hours-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-align: left;
  border: 1px solid var(--secondary);
  border-radius: 14px;
  background: var(--background);
  padding: 1.5rem 1.75rem;
  max-width: 26rem;
  margin: 0 auto;
}

.hours-card-icon {
  flex-shrink: 0;
  width: 3.75rem;
  height: 3.75rem;
  color: var(--saddle-brown);
}

.hours-card-icon svg { width: 100%; height: 100%; }

.hours-card-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--saddle-brown);
  margin-bottom: 0.5rem;
}

.hours-card-line {
  font-family: 'Lato', sans-serif;
  color: var(--foreground);
  line-height: 1.6;
}

@media (max-width: 480px) {
  .hours-card { padding: 1.25rem; gap: 1rem; }
  .hours-card-icon { width: 3rem; height: 3rem; }
}

/* Evening Dining + Dining Hours: together fill one screen.
   The banner flexes to fill whatever space the (naturally-sized) hours
   band doesn't need, rather than each being independently forced to
   100vh (which was stacking into two screens' worth of height). */
.dining-evening-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.estate-banner--dining {
  min-height: 380px;
  max-height: none;
  flex: 1 1 auto;
  /* Fixed clearance so the label/heading never sits under the fixed
     header (60-80px) — this banner is shorter now that it shares the
     screen with the hours band, so centering alone can leave very
     little room above the text depending on scroll position. */
  padding-top: 76px;
}

/* The content's own top padding would stack on top of the clearance
   above, needlessly inflating the section further — the section-level
   padding-top already handles header clearance on its own. */
.estate-banner--dining .estate-banner-content { padding-top: 1.25rem; padding-bottom: 1.5rem; }

/* Compact Dining Hours summary within the Evening Dining banner */
.banner-hours-summary {
  margin-top: 0.85rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.banner-hours-summary strong {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  color: #fff;
}

.banner-hours-dot {
  color: var(--secondary);
  font-size: 0.55rem;
}

@media (max-width: 639px) {
  .banner-hours-summary { font-size: 0.78rem; gap: 0.45rem; margin-top: 1rem; }
}

.hours-section--fixed {
  flex: 0 0 auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Dining hours: full-width three-column band, light cream to match the
   page background rather than the deeper Luxury Beige swatch */
.hours-section { background: var(--background); }

.hours-band-title {
  text-align: center;
  font-family: 'Fraunces', serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--foreground);
  margin: 0;
  line-height: 1.2;
}

.ornament-divider--light { color: var(--warm-white); }

.hours-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1rem;
}

.hours-col {
  text-align: center;
  padding: 0 1rem;
  border-right: 1px solid rgba(61, 38, 20, 0.18);
}

.hours-col:last-child { border-right: none; }

.hours-col svg {
  width: 22px;
  height: 22px;
  color: var(--barn-brown);
}

.hours-col-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--saddle-brown);
  font-weight: 700;
  margin: 0.6rem 0 0;
}

.hours-col-time {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  color: var(--primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 639px) {
  .hours-col-label { font-size: 0.62rem; letter-spacing: 0.06em; }
  .hours-col-time { font-size: 0.85rem; }
  .hours-col { padding: 0 0.5rem; }
}

/* Dark CTA with green pill button */
.cta-dark { background: var(--primary); }

.cta-dark-body { color: rgba(var(--warm-white-rgb), 0.75); }

.btn-pill-green {
  display: inline-block;
  background: var(--accent);
  color: #14472E;
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.95rem 2.4rem;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.btn-pill-green:hover { background: #46AD79; transform: translateY(-1px); }

.cta-dark-contact { margin-top: 1.5rem; }

.link-underline-light {
  color: var(--warm-white);
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(var(--warm-white-rgb), 0.5);
  padding-bottom: 2px;
  transition: opacity 0.25s ease;
}

.link-underline-light:hover { opacity: 0.7; }

/* Mobile: give cuisine photos more room — 1 wide + 2 below instead of 3 cramped columns */
@media (max-width: 639px) {
  .cuisine-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
  .cuisine-grid > div:first-child { grid-column: 1 / -1; }
  .cuisine-grid > div:first-child .cuisine-item { aspect-ratio: 4/3; }
}