/* Green Retreat — site styles ported verbatim from the design prototype */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FBFAF6; color: #14210F; font-family: Poppins, sans-serif; overflow-x: clip; }
a { color: #1E5B14; text-decoration: none; }
a:hover { color: #8FBF00; }
img { max-width: 100%; object-fit: contain; }
::selection { background: #8FBF00; color: #14210F; }

@keyframes gr-cal-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
/* The ribbon slides left by exactly one copy of the word list, so the next
   copy is already in place when the previous one leaves. The copy count is set
   inline on the track; it has to be high enough that the copies still to come
   are wider than the screen, or the ribbon runs dry before it loops. */
@keyframes gr-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / var(--gr-marquee-copies, 2))); }
}
@keyframes gr-lb-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes gr-fade { from { opacity: 0; } to { opacity: 1; } }

.gr-marquee-track { display: flex; width: max-content; animation: gr-marquee 28s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .gr-marquee-track { animation: none; }
}

[data-noscrollbar] { scrollbar-width: none; -ms-overflow-style: none; }
[data-noscrollbar]::-webkit-scrollbar { display: none; }
[data-hide-scroll] { scrollbar-width: none; -ms-overflow-style: none; }
[data-hide-scroll]::-webkit-scrollbar { display: none; }

/* ---------- site header (breakpoint 1060 / 1280, mirrors the prototype's width state) ---------- */
.gr-desk-nav { display: none; align-items: center; gap: clamp(13px, 1.7vw, 26px); margin: 0 auto; }
.gr-desk-actions { display: none; align-items: center; gap: 20px; flex: none; }
.gr-phone { display: none; font-family: Poppins, sans-serif; font-weight: 400; font-size: 14px; white-space: nowrap; color: #14210F; }
.gr-burger { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; flex: none; padding: 0 10px; cursor: pointer; border: 0; background: transparent; }

@media (min-width: 1060px) {
  .gr-desk-nav { display: flex; }
  .gr-desk-actions { display: flex; }
  .gr-burger { display: none; }
}
@media (min-width: 1280px) {
  .gr-phone { display: block; }
}


/* ---------- admin shell (breakpoint 1040 / 620) ---------- */
.gr-rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 84vw);
  display: none; flex-direction: column; background: #14210F; z-index: 90;
}
.gr-rail.is-open { display: flex; }
.gr-rail-scrim { position: fixed; inset: 0; z-index: 85; background: rgba(14,26,11,0.55); display: none; }

.gr-rail-logo { display: block; width: auto; height: 44px; }

.gr-nav { flex: 1 1 auto; overflow-y: auto; padding: 6px 12px 20px; display: flex; flex-direction: column; gap: 3px; }

.gr-nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border: 0; border-radius: 12px; cursor: pointer;
  font-family: Montserrat, sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 0.04em; text-align: left;
}

.gr-nav-label { flex: 1 1 auto; min-width: 0; text-align: left; }

.gr-nav-badge {
  flex: none; display: flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #8FBF00; color: #14210F;
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 9.5px;
}
.gr-rail-scrim.is-open { display: block; }
.gr-rail-toggle { display: none; }
.gr-admin-burger { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px; flex: none; width: 42px; height: 42px; padding: 0 9px; border: 0; background: transparent; cursor: pointer; }
.gr-view-site { display: none; }

@media (min-width: 620px) {
  .gr-view-site {
    display: inline-flex; align-items: center; flex: none; height: 38px; padding: 0 18px;
    border-radius: 999px; border: 1px solid rgba(20,33,15,0.18); color: #14210F;
    font-family: Montserrat, sans-serif; font-weight: 600; font-size: 10.5px;
    letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  }
}
@media (min-width: 1040px) {
  .gr-rail {
    position: sticky; top: 0; align-self: flex-start; flex: none;
    width: 250px; height: 100svh; display: flex; bottom: auto; left: auto; z-index: 70;
  }
  .gr-rail-scrim, .gr-rail-scrim.is-open { display: none; }
  .gr-rail-toggle { display: flex; }
  .gr-admin-burger { display: none; }
}

/* collapsed rail (desktop only) */
@media (min-width: 1040px) {
  .gr-rail.is-collapsed { width: 78px; }
  .gr-rail.is-collapsed .gr-rail-head { flex-direction: column; align-items: center; gap: 16px; padding: 18px 10px; }
  /* 58px of room in a 78px rail: let the width lead so the logo keeps its
     1.96:1 shape instead of being squeezed to fit. */
  .gr-rail.is-collapsed .gr-rail-logo { width: 100%; height: auto; }
  .gr-rail.is-collapsed .gr-rail-kicker { display: none; }
  .gr-rail.is-collapsed .gr-rail-toggle { margin: 6px auto 0; }
  .gr-rail.is-collapsed .gr-nav { padding-left: 10px; padding-right: 10px; }
  .gr-rail.is-collapsed .gr-nav-item { position: relative; padding-left: 0; padding-right: 0; justify-content: center; }
  .gr-rail.is-collapsed .gr-nav-label { display: none; }

  /* With no room for a label, the count sits on the icon's corner the way a
     notification badge does, ringed in the rail colour to lift it clear. */
  .gr-rail.is-collapsed .gr-nav-badge {
    position: absolute; top: 2px; right: 8px;
    min-width: 16px; height: 16px; padding: 0 4px; font-size: 8.5px;
    box-shadow: 0 0 0 2px #14210F;
  }
  .gr-rail.is-collapsed .gr-rail-foot { justify-content: center; padding: 14px 10px 20px; }
  .gr-rail.is-collapsed .gr-rail-who { display: none; }
}

/* ---------- admin login split ---------- */
.gr-auth-shell { min-height: 100svh; display: grid; grid-template-columns: 1fr; background: #FBFAF6; }
.gr-auth-art { display: none; }
.gr-auth-small-logo { display: block; height: 54px; width: auto; margin: 0 0 26px; }
@media (min-width: 900px) {
  .gr-auth-shell { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
  .gr-auth-art {
    position: relative; display: block; height: 100svh; overflow: hidden;
    background-color: #14210F; background-size: cover; background-position: center;
  }
  .gr-auth-small-logo { display: none; }
}

/* ---------- coming soon ---------- */
.gr-cs-blurb, .gr-cs-foot { display: none; }
@media (min-height: 700px) {
  .gr-cs-blurb { display: block; }
  .gr-cs-foot {
    flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 7px 20px; font-family: Poppins, sans-serif; font-weight: 300;
    font-size: clamp(12px, 2.8vw, 13px); color: rgba(251,250,246,0.62);
  }
}

/* ---------- family house thumb strip (2 / 3 / 4 across, mirrors the prototype) ---------- */
.gr-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: rgba(20,33,15,0.08); }
.gr-thumbs > [data-gr-rg-thumb="3"],
.gr-thumbs > [data-gr-rg-thumb="4"] { display: none; }
.gr-thumb-badge { display: none; }
.gr-thumbs > [data-gr-rg-thumb="2"] .gr-thumb-badge-2 { display: flex; }

@media (min-width: 720px) {
  .gr-thumbs { grid-template-columns: repeat(3, 1fr); }
  .gr-thumbs > [data-gr-rg-thumb="3"] { display: block; }
  .gr-thumbs > [data-gr-rg-thumb="2"] .gr-thumb-badge-2 { display: none; }
  .gr-thumbs > [data-gr-rg-thumb="3"] .gr-thumb-badge-3 { display: flex; }
}

@media (min-width: 1000px) {
  .gr-thumbs { grid-template-columns: repeat(4, 1fr); }
  .gr-thumbs > [data-gr-rg-thumb="4"] { display: block; }
  .gr-thumbs > [data-gr-rg-thumb="3"] .gr-thumb-badge-3 { display: none; }
  .gr-thumbs > [data-gr-rg-thumb="4"] .gr-thumb-badge-4 { display: flex; }
}

/* ---------- staff portal gallery ----------
   Column counts are fixed rather than auto-filled so the thumbnails stay a
   calm size instead of shrinking to fit. The rail eats 280px from 1040 up,
   so the wide breakpoints allow for it. */
.gr-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 560px) {
  .gr-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 820px) {
  .gr-photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}

@media (min-width: 1240px) {
  .gr-photo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
}

@media (min-width: 1680px) {
  .gr-photo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1900px) {
  .gr-photo-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (min-width: 2200px) {
  .gr-photo-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ---------- staff portal modal (sheet on mobile, centred dialog on desktop) ---------- */
.gr-admin-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0;
  background: rgba(14,26,11,0.62);
}

.gr-admin-modal-card {
  width: min(560px, 100%);
  max-height: 94svh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #FBFAF6;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 50px 90px -40px rgba(20,33,15,0.7);
}

/* The confirm dialog is narrower, and sits above an open modal. */
.gr-admin-modal.is-confirm { z-index: 125; }
.gr-admin-modal-card.is-narrow { width: min(420px, 100%); }

@media (min-width: 1040px) {
  .gr-admin-modal { align-items: center; padding: 24px; }
  .gr-admin-modal-card { max-height: 88svh; border-radius: 22px; }
}

/* Alpine hides these until it boots. */
[x-cloak] { display: none !important; }

/* Revealing an element with x-show removes its inline `display`, which would
   strip an inline `display:flex`. Any element that both toggles and needs a
   flex box keeps that display here instead. */
.gr-flex { display: flex; }
.gr-flex-col { display: flex; flex-direction: column; }

/* Full-screen overlay for the calendar and the lightboxes. */
.gr-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}