/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --color-bg: #F5F0E3;
  --color-bg-alt: #EAE1C9;
  --color-surface: #FFFDF8;
  --color-ink: #2B2718;
  --color-ink-soft: #6B6250;
  --color-primary: #45532F;
  --color-primary-dark: #2E3820;
  --color-accent: #B15A2E;
  --color-accent-soft: #D9C9A8;
  --color-line: #DCD0AF;

  --radius: 6px;
  --max-width: 1180px;
  --nav-height: 84px;
  --shadow-card: 0 10px 30px -12px rgba(43,39,24,0.25);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3{
  font-family: var(--font-display);
  color: var(--color-primary-dark);
  line-height:1.15;
  margin: 0 0 .6em 0;
  font-weight: 600;
}
h1{ font-size: clamp(1.9rem, 1.4rem + 2vw, 3.1rem); }
h2{ font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); }
h3{ font-size: 1.15rem; }
p{ margin: 0 0 1em 0; }
.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}
section{ padding: 3.2rem 0; }
.section-title{ text-align:center; }
:focus-visible{ outline: 3px solid var(--color-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .slide{ transition: none !important; }
  .card{ transition: none !important; }
}

/* ============================================================
   3. HEADER / NAVIGATION
   ============================================================ */
#site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}
.header-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  height: var(--nav-height);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* logo is out of flow now (see .logo-link below), so push remaining items right */
}

/* Logo badge: a circle that "grows out of" the top-left corner of the nav bar.
   Positioned relative to #site-header itself (not the centered max-width
   container) so it sits flush against the true left edge of the browser
   window, as far left as possible. Same background color as the header, no
   border, so the header's bottom line visually flows into the circle's curve
   instead of cutting across it. */
.logo-link{
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px -12px rgba(43,39,24,0.3);
  z-index: 5;
}
.logo-link img{ width: 200px; height:auto; max-height: 250px; object-fit: contain; }
.logo-link .img-placeholder{ width:210px; height:210px; min-height:unset; border-radius:50%; }

@media (max-width: 780px){
  .logo-link{ width: 190px; height: 190px; }
  .logo-link img{ width: 158px; max-height: 158px; }
  .logo-link .img-placeholder{ width:132px; height:132px; }
}

/* Pages whose title/content would otherwise start right under the (large)
   logo badge - room pages, contact, and the first Our Tips category - get
   extra top clearance so the heading is never covered. Pages that open with
   a big photo/slideshow don't need this: the badge overlapping a corner of a
   photo reads as an intentional design touch, covering text does not. */
.page-top{ padding-top: 100px; }
@media (max-width: 780px){
  .page-top{ padding-top: 130px; }
}

#hamburger{
  display:none;
  background:none; border:none;
  width: 42px; height:42px;
  position: relative;
  flex-shrink:0;
}
#hamburger span, #hamburger span::before, #hamburger span::after{
  content:'';
  position:absolute; left:9px; right:9px;
  height:2px; background: var(--color-ink);
  transition: transform .25s ease, opacity .25s ease;
}
#hamburger span{ top:20px; }
#hamburger span::before{ top:-9px; }
#hamburger span::after{ top:9px; }
#main-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 2.1rem;
}
#main-nav a{
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-ink);
  padding: .4rem .1rem;
  position: relative;
}
#main-nav a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
#main-nav a:hover::after, #main-nav a.is-active::after{ transform: scaleX(1); }
#main-nav a.is-active{ color: var(--color-accent); }

@media (max-width: 780px){
  #hamburger{ display:block; }
  #main-nav{
    position: fixed;
    top: var(--nav-height);
    left:0; right:0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  #main-nav.open{ max-height: 420px; }
  #main-nav ul{
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    padding: .5rem 1.5rem 1.2rem;
  }
  #main-nav ul li{ width:100%; }
  #main-nav a{ display:block; padding: .8rem 0; width:100%; text-align: right;}
  #hamburger.is-open span{ background: transparent; }
  #hamburger.is-open span::before{ transform: translateY(9px) rotate(45deg); }
  #hamburger.is-open span::after{ transform: translateY(-9px) rotate(-45deg); }
}

/* ============================================================
   4. HERO / HOME TEXT
   ============================================================ */
.hero{ padding-top: 2.4rem; padding-bottom: 0; }
.hero-image-wrap{ width: 62%; margin: 0 auto; }
.hero-image-wrap img{ width:100%; height: 520px; object-fit: cover; border-radius: var(--radius); }
.hero-text{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding-top: 2.5rem; /* extra air between the fixed photo and the title */
}

.slideshow-section{ padding-bottom: 4.6rem; } /* extra breathing room before the next section (homepage) */
.villa-slideshow-section{ padding-bottom: 0.7rem; } /* villa pages: roughly half the gap before the villa title */
.villa-slideshow-section .slideshow{ width: 85%; margin: 0 auto; } /* overview photos slightly smaller than before */
.section-gap-lg{ padding-bottom: 4.6rem; } /* reusable: same extra gap as used before "Impressions" */

/* ============================================================
   5. SLIDESHOW
   ============================================================ */
.slideshow{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.slides{ position:absolute; inset:0; }
.slide{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity .9s ease;
}
.slide.active{ opacity:1; }
.slide img{ width:100%; height:100%; object-fit: cover; }
.slide .img-placeholder{ width:100%; height:100%; min-height: unset; }

.slide-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  border:none; background: rgba(30,26,15,0.4); color:#fff;
  font-size:1.15rem; display:flex; align-items:center; justify-content:center;
  transition: background .2s ease;
  z-index:5;
}
.slide-arrow:hover{ background: rgba(30,26,15,0.65); }
.slide-prev{ left:12px; }
.slide-next{ right:12px; }

.slide-dots{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:.5rem; margin-top: 1rem;
}
.slide-dots button{
  width:10px; height:10px; border-radius:50%;
  border: none; background: var(--color-accent-soft);
  padding:0; transition: all .2s ease;
}
.slide-dots button.active{ background: var(--color-accent); transform: scale(1.35); }

/* ---------- Coverflow variant (Villa Olivi: mostly-portrait overview photos) ----------
   The active photo shows at full size, centered; the previous/next photos peek in on
   either side, smaller and mostly transparent. First/last photos can be flagged
   landscape (.slide-landscape) and keep a wide ratio while everything else is portrait. */
.slideshow.coverflow{
  aspect-ratio: unset;
  height: 460px;
  background: transparent;
  overflow: hidden;
}
.slideshow.coverflow .slides{ position:relative; width:100%; height:100%; }
.slideshow.coverflow .slide{
  position: absolute;
  top: 50%; left: 50%;
  height: 100%;
  width: auto;
  opacity: 0;
  pointer-events: none;
  transition: transform .5s ease, opacity .5s ease;
  z-index: 1;
}
.slideshow.coverflow .slide img{
  height: 100%;
  width: auto;
  aspect-ratio: 4 / 5; /* portrait default, matches ~1080x1350 source photos */
  object-fit: cover;
  border-radius: var(--radius);
  display:block;
}
.slideshow.coverflow .slide.slide-landscape img{ aspect-ratio: 16 / 9; }
.slideshow.coverflow .slide.is-active{ transform: translate(-50%, -50%) scale(1); opacity:1; z-index:5; pointer-events:auto; }
.slideshow.coverflow .slide.is-prev{ transform: translate(-150%, -50%) scale(0.72); opacity:0.4; z-index:3; }
.slideshow.coverflow .slide.is-next{ transform: translate(50%, -50%) scale(0.72); opacity:0.4; z-index:3; }
.slideshow.coverflow .slide.is-far{ transform: translate(-50%, -50%) scale(0.55); opacity:0; z-index:1; }
@media (max-width: 640px){
  .slideshow.coverflow{ height: 320px; }
}

/* ============================================================
   6. TILE / PHOTO GRIDS
   Flexbox (not CSS grid) on purpose: when the last row doesn't
   fill completely, flex + justify-content:center keeps it
   centered instead of stuck to the left.
   ============================================================ */
.tile-grid{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.8rem;
}

.card{
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-card);
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
  flex: 1 1 260px;
  max-width: 340px;
}
.card:hover{ transform: translateY(-5px); box-shadow: 0 16px 34px -12px rgba(43,39,24,0.32); }
.card .card-image{ width:100%; aspect-ratio: 4/3; overflow:hidden; }
.card .card-image img, .card .card-image .img-placeholder{ width:100%; height:100%; object-fit:cover; min-height:unset; }
.card .card-body{ padding: 1.1rem 1.3rem 1.4rem; text-align:center; }
.card .card-body h3{ margin-bottom:.35rem; }
.card .card-body p{ color: var(--color-ink-soft); font-size:.92rem; margin:0; }

/* ============================================================
   7. VILLA PAGE SPECIFICS
   ============================================================ */
.villa-title{ text-align:left; }
.villa-description{ max-width: 720px; margin: 0 auto; text-align:center; }

.impressions-grid figure{ margin:0; flex: 1 1 240px; max-width: 300px; }
.impressions-grid img, .impressions-grid .img-placeholder{ width:100%; aspect-ratio: var(--impression-ratio, 4/3); object-fit:cover; border-radius: var(--radius); min-height:unset; }
.impressions-grid figcaption{ margin-top:.6rem; font-size:.92rem; color: var(--color-ink-soft); text-align:center; }

.amenities-block{ background: var(--color-bg-alt); border-radius: var(--radius); padding: 2.2rem 2rem; }
.amenities{
  list-style:none;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem 3rem;
}
.amenities li{
  position:relative;
  padding-left: 1.5rem;
  padding-top:.3rem; padding-bottom:.3rem;
  border-bottom: 1px dashed var(--color-line);
}
.amenities li::before{
  content:'\2713';
  position:absolute; left:0; top:.3rem;
  color: var(--color-primary);
  font-weight:700;
}
@media (max-width:600px){
  .amenities{ grid-template-columns: 1fr; }
}

/* --- Terms & Conditions: icon policy blocks --- */
.policy-list{ display:flex; flex-direction:column; gap: 1.8rem; max-width: 820px; margin: 0 auto; }
.policy-block{ display:flex; gap: 1.2rem; align-items:flex-start; text-align:left; }
.policy-icon{
  flex: 0 0 auto;
  width: 52px; height:52px;
  border-radius:50%;
  background: var(--color-bg-alt);
  display:flex; align-items:center; justify-content:center;
}
.policy-icon svg{ width:26px; height:26px; stroke: var(--color-primary); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.policy-content h3{ margin-bottom:.3rem; }
.policy-content p{ color: var(--color-ink-soft); margin-bottom:.3rem; }
.policy-content p:last-child{ margin-bottom:0; }

.section-divider{
  text-align:center;
  color: var(--color-accent);
  letter-spacing:.5em;
  font-size:.8rem;
  margin: 0 0 1.6rem;
}

.closing-grid img, .closing-grid .img-placeholder{
  width: 275px; height:275px; object-fit:cover; border-radius: var(--radius); min-height:unset;
}

/* ============================================================
   8. ROOM DETAIL PAGE
   ============================================================ */
.back-link{
  display:inline-block;
  margin-bottom: 1.4rem;
  font-size:.9rem;
  font-weight:600;
  color: var(--color-primary);
}
.back-link:hover{ color: var(--color-accent); }
.room-photo-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  max-width: 870px; /* 2 columns x 25% larger photos than before */
  margin: 0 auto;
}
.room-photo-grid img, .room-photo-grid .img-placeholder{
  width: 100%; aspect-ratio: 4/3; object-fit:cover; border-radius: var(--radius); min-height:unset;
}

/* ============================================================
   9. CONTACT PAGE
   ============================================================ */
.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items:start;
}
@media (max-width: 780px){
  .contact-grid{ grid-template-columns: 1fr; }
}
.page-intro{ max-width: 700px; }
.contact-details p{ margin: 0 0 .5rem; color: var(--color-ink-soft); }
.contact-details strong{ color: var(--color-ink); }
.contact-form{ display:flex; flex-direction:column; gap:1.1rem; margin-top: 2rem;}
.contact-form label{ font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color: var(--color-ink-soft); margin-bottom:.35rem; display:block; }
.contact-form input, .contact-form textarea{
  width:100%; border:none; border-bottom: 2px solid var(--color-line);
  background:transparent; padding:.5rem .1rem; font-family: var(--font-body); font-size:1rem; color: var(--color-ink);
}
.contact-form input:focus, .contact-form textarea:focus{ border-color: var(--color-accent); outline:none; }
.contact-form button{
  align-self:flex-start;
  background: var(--color-primary);
  color:#fff; border:none; padding:.85rem 2rem; border-radius: var(--radius);
  font-weight:600; letter-spacing:.03em; transition: background .2s ease;
}
.contact-form button:hover{ background: var(--color-primary-dark); }

/* ============================================================
   10. OUR TIPS PAGE
   ============================================================ */
.tips-category{ padding-top: 1rem; padding-bottom: 1rem; }
.tips-category h2{ text-align:center; margin-bottom: 2rem; }
.tip-card{
  flex: 1 1 260px;
  max-width: var(--tip-width, 300px);
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
}
.tip-card:hover{ transform: translateY(-5px); box-shadow: 0 16px 34px -12px rgba(43,39,24,0.32); }
.tip-card .card-image{ width:100%; aspect-ratio: var(--tip-ratio, 3 / 4); overflow:hidden; }
.tip-card .card-image img, .tip-card .card-image .img-placeholder{ width:100%; height:100%; object-fit:cover; min-height:unset; }
.tip-card .card-body{ padding: 1.1rem 1.3rem 1.4rem; text-align:center; }
.tip-card .card-body h3{ font-size:1rem; margin-bottom:.35rem; }
.tip-card .card-body p{ color: var(--color-ink-soft); font-size:.9rem; margin:0; }
.tip-card.is-placeholder{ cursor:default; }
.tip-card.is-placeholder:hover{ transform:none; box-shadow: var(--shadow-card); }

/* ---------- Availability calendars (contact page) ---------- */
.calendar-grid{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.calendar-block{ flex: 1 1 300px; max-width: 380px; }
.calendar-block h3{ text-align:center; }
.calendar-block iframe{
  width:100%;
  height: 380px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.calendar-note{ text-align:center; color: var(--color-ink-soft); font-size:.85rem; max-width:720px; margin: 1.5rem auto 0; }

/* ============================================================
   11. IMAGE PLACEHOLDER (shown when a photo is missing)
   ============================================================ */
.img-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  background: repeating-linear-gradient(45deg, #ECE3CB, #ECE3CB 12px, #DED1AC 12px, #DED1AC 24px);
  color: #7C7154;
  font-size:.72rem;
  text-align:center;
  padding: 1rem;
  min-height: 160px;
}
.img-placeholder .ph-icon{ font-size:1.4rem; }
.img-placeholder .ph-path{ word-break: break-all; opacity:.85; }

/* ============================================================
   12. FOOTER
   ============================================================ */
#site-footer{
  background: var(--color-primary-dark);
  color: #EFE9D6;
  padding: 3rem 1.5rem 2rem;
  margin-top: 2rem;
}
.footer-inner{ max-width: var(--max-width); margin:0 auto; text-align:center; }
.footer-links{ list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:1.6rem; margin-bottom:1.4rem; }
.footer-links a{ font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; opacity:.9; }
.footer-links a:hover{ opacity:1; color: var(--color-accent-soft); }
.footer-inner .copyright{ font-size:.78rem; opacity:.6; }

/* ============================================================
   13. MISC
   ============================================================ */
.empty-state{ color: var(--color-ink-soft); font-style: italic; }