/* ===========================================================
   Greenleaf Hotel & Resort — Rooms page (sections only)
   =========================================================== */

   :root{
    --green-950:#0e1f16;
    --green-900:#14301f;
    --green-800:#1c4029;
    --green-700:#26522f;
  
    --cream:#f7f3ea;
    --cream-dim:#efe8d8;
    --ink:#1c1a15;
    --ink-soft:#54503f;
    --paper:#fffdf8;
  
    --gold-100:#f6e6b8;
    --gold-300:#e9c877;
    --gold-500:#c9a24a;
    --gold-600:#a9812f;
  
    --font-display:'Cormorant Garamond', serif;
    --font-body:'Jost', sans-serif;
    --ease:cubic-bezier(.16,.8,.3,1);
  }
  
  *,*::before,*::after{ box-sizing:border-box; }
  body{ font-family:var(--font-body); color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased; margin:0; }
  img{ max-width:100%; display:block; }
  h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; }
  ul{ margin:0; padding:0; list-style:none; }
  
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  }
  
  /* ---------- shared ---------- */
  .eyebrow{ letter-spacing:.22em; text-transform:uppercase; font-size:.72rem; font-weight:500; color:var(--gold-300); margin:0 0 14px; }
  .eyebrow-dark{ color:var(--gold-600); }
  
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 28px; border-radius:2px; font-size:.82rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
    border:1px solid transparent; cursor:pointer; text-decoration:none;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s ease;
  }
  .btn-gold{ background:linear-gradient(180deg, var(--gold-300), var(--gold-500)); color:var(--green-950); }
  .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(201,162,74,.55); }
  .btn-dark{ background:var(--green-950); color:var(--gold-300); padding:13px 24px; }
  .btn-dark:hover{ background:var(--green-800); transform:translateY(-2px); box-shadow:0 14px 26px -14px rgba(14,31,22,.55); }
  
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--stagger,0) * 110ms); }
  .reveal.in-view{ opacity:1; transform:translateY(0); }
  .reveal-fade{ opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s); }
  .reveal-fade.in-view{ opacity:1; transform:translateY(0); }
  
  .section-head{ max-width:640px; margin:0 auto; text-align:center; }
  .section-head h2{ font-size:clamp(2rem, 4vw, 2.7rem); color:var(--green-900); }
  .head-divider{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; }
  .head-divider i{ width:26px; height:1px; background:var(--gold-500); }
  .head-divider b{ width:6px; height:6px; border-radius:50%; background:var(--gold-500); transform:rotate(45deg); }
  
  /* ===========================================================
     SECTION 1 — HERO
     =========================================================== */
  .r-hero{ position:relative; height:74vh; min-height:520px; display:flex; align-items:center; overflow:hidden; background:var(--green-950); }
  .r-hero-media{ position:absolute; inset:0; }
  .r-hero-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.1); animation:rHeroZoom 20s ease-out forwards; }
  @keyframes rHeroZoom{ to{ transform:scale(1); } }
  .r-hero-overlay{
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(14,31,22,.96) 0%, rgba(14,31,22,.82) 34%, rgba(14,31,22,.3) 64%, rgba(14,31,22,.08) 100%);
  }
  .r-hero-content{ position:relative; z-index:2; max-width:600px; padding:0 5vw; color:var(--cream); }
  .r-hero-title .line{ overflow:hidden; display:block; }
  .r-hero-title .line span{
    display:block; font-family:var(--font-display); font-size:clamp(2.6rem, 6vw, 4.4rem); font-weight:600;
    color:var(--cream); transform:translateY(112%); transition:transform 1s var(--ease) .18s;
  }
  .r-hero-title.in-view .line span{ transform:translateY(0); }
  .r-hero-rule{ display:block; width:64px; height:2px; background:var(--gold-500); margin:20px 0 20px; }
  .r-hero-sub{ font-size:.98rem; line-height:1.75; color:rgba(247,243,234,.82); max-width:440px; font-weight:300; }
  
  /* floating check-in / check-out info card */
  .info-bar{
    position:absolute; z-index:4; left:50%; bottom:0;
    transform:translate(-50%, 50%);
    display:flex; align-items:stretch;
    background:var(--paper);
    border:1px solid #e6ddc4;
    border-top:3px solid var(--gold-500);
    border-radius:6px;
    box-shadow:0 30px 60px -24px rgba(14,31,22,.45);
    padding:22px 10px;
    width:min(560px, 88vw);
  }
  .info-col{ flex:1; display:flex; align-items:center; gap:14px; justify-content:center; padding:0 18px; }
  .info-icon{
    width:42px; height:42px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center; background:var(--cream-dim);
  }
  .info-icon svg{ width:20px; height:20px; fill:none; stroke:var(--gold-600); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .info-text{ display:flex; flex-direction:column; gap:3px; text-align:left; }
  .info-label{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
  .info-value{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; color:var(--green-900); }
  .info-value em{ font-style:normal; color:var(--gold-600); font-size:1rem; }
  .info-divider{ width:1px; background:#e2d9c1; margin:2px 0; }
  
  /* ===========================================================
     SECTION 2 — ROOM CARDS
     =========================================================== */
  .rooms-section{ background:var(--cream); padding:150px 5vw 120px; }
  
  .room-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:30px;
    max-width:1240px; margin:56px auto 0;
  }
  .room-card{
    background:var(--paper); border:1px solid #e6ddc4; border-radius:6px; overflow:hidden;
    transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s ease, background .5s ease;
  }
  .room-card:hover{
    transform:translateY(-8px); box-shadow:0 30px 55px -30px rgba(20,48,31,.35);
    border-color:var(--green-700); background:var(--green-900);
  }
  
  .room-media{ aspect-ratio:4/3; overflow:hidden; }
  .room-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
  .room-card:hover .room-media img{ transform:scale(1.08); }
  
  .room-body{ padding:28px 26px 26px; }
  .room-body h3{ font-size:1.5rem; color:var(--green-900); margin-bottom:12px; transition:color .4s ease; }
  .room-card:hover .room-body h3{ color:var(--cream); }
  .room-desc{ color:var(--ink-soft); font-size:1rem; line-height:1.6; font-weight:300; margin:0 0 22px; transition:color .4s ease; }
  .room-card:hover .room-desc{ color:rgba(247,243,234,.85); }
  
  .room-feats{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;
    padding-bottom:22px; margin-bottom:22px; border-bottom:1px dashed #ddd2b0;
    transition:border-color .4s ease;
  }
  .room-card:hover .room-feats{ border-bottom-color:rgba(247,243,234,.18); }
  .room-feats li{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font-size:.72rem; color:var(--ink-soft); transition:color .4s ease; }
  .room-card:hover .room-feats li{ color:rgba(247,243,234,.7); }
  .room-feats svg{ width:20px; height:20px; fill:none; stroke:var(--gold-600); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .room-card:hover .room-feats svg{ stroke:var(--gold-300); }
  
  .room-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .from-label{ display:block; font-size:.68rem; color:var(--ink-soft); letter-spacing:.04em; margin-bottom:4px; transition:color .4s ease; }
  .room-card:hover .from-label{ color:rgba(247,243,234,.6); }
  .room-price{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--green-800); transition:color .4s ease; }
  .room-card:hover .room-price{ color:var(--gold-300); }
  .room-price .currency{ font-size:.95rem; vertical-align:2px; }
  .room-price .per{ font-family:var(--font-body); font-size:.7rem; color:var(--ink-soft); font-weight:400; }
  .room-card:hover .room-price .per{ color:rgba(247,243,234,.55); }
  
  .room-card .btn-dark{ transition:background .4s ease, color .4s ease, transform .35s var(--ease), box-shadow .35s var(--ease); }
  .room-card:hover .btn-dark{ background:var(--gold-500); color:var(--green-950); }
  
  /* ===========================================================
     SECTION 3 — BANNER
     =========================================================== */
  .r-banner{ position:relative; overflow:hidden; min-height:64vh; display:flex; align-items:center; background:var(--green-950); }
  .r-banner-media{ position:absolute; inset:0; }
  .r-banner-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
  .r-banner:hover .r-banner-media img{ transform:scale(1.05); }
  .r-banner-overlay{
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(14,31,22,.95) 0%, rgba(14,31,22,.78) 40%, rgba(14,31,22,.2) 78%, rgba(14,31,22,.04) 100%);
  }
  .r-banner-content{ position:relative; z-index:2; max-width:560px; padding:70px 6vw; color:var(--cream); }
  .r-banner-content h2{ font-size:clamp(2rem, 4vw, 2.9rem); line-height:1.15; margin-bottom:18px; }
  .r-banner-sub{ font-size:.95rem; line-height:1.7; color:rgba(247,243,234,.75); font-weight:300; margin:0 0 30px; max-width:440px; }
  
  /* ===========================================================
     SECTION 4 — FEATURES BAR
     =========================================================== */
  .features-bar{
    background:var(--green-950);
    padding:56px 5vw;
    display:grid; grid-template-columns:repeat(4, 1fr); gap:32px;
  }
  .feature{ display:flex; align-items:flex-start; gap:16px; }
  .feature-icon{
    width:44px; height:44px; flex:none; border-radius:50%; border:1.5px solid var(--gold-500);
    display:flex; align-items:center; justify-content:center;
  }
  .feature-icon svg{ width:19px; height:19px; fill:none; stroke:var(--gold-300); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .feature h4{ font-size:.92rem; letter-spacing:.02em; text-transform:uppercase; color:var(--cream); margin-bottom:8px; font-weight:600; }
  .feature p{ font-size:.8rem; line-height:1.55; color:rgba(247,243,234,.6); margin:0; font-weight:300; }
  
  /* ===========================================================
     BACK TO TOP
     =========================================================== */
  .back-to-top{
    position:fixed; right:26px; bottom:26px; z-index:90;
    width:46px; height:46px; border-radius:50%;
    background:var(--green-900); color:var(--gold-300); border:1px solid var(--gold-600);
    font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .35s ease, transform .35s ease, visibility .35s;
    box-shadow:0 12px 24px -12px rgba(0,0,0,.5);
  }
  .back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
  .back-to-top:hover{ background:var(--gold-500); color:var(--green-950); }
  
  /* ===========================================================
     RESPONSIVE
     =========================================================== */
  @media (max-width: 980px){
    .room-grid{ grid-template-columns:1fr 1fr; }
    .features-bar{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 720px){
    .rooms-section{ padding:140px 6vw 100px; }
    .room-grid{ grid-template-columns:1fr; }
    .r-hero-overlay{ background:linear-gradient(180deg, rgba(14,31,22,.55) 10%, rgba(14,31,22,.95) 90%); }
    .r-banner-overlay{ background:linear-gradient(180deg, rgba(14,31,22,.5) 0%, rgba(14,31,22,.95) 85%); }
    .features-bar{ grid-template-columns:1fr; }
    .info-bar{ flex-direction:column; padding:16px; }
    .info-divider{ width:100%; height:1px; margin:10px 0; }
  }