/* ══════════════════════════════════════════════════════════
   The Landlord — Guide Page Premium Styles
   ══════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────── */
.guide-page { background: #F5F3EE; }

.guide-page-wrap { max-width: 720px; margin: 0 auto; }

/* ── Header ──────────────────────────────────────────────── */
.guide-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(27,77,62,.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 2px 16px rgba(0,0,0,.18);
}
.guide-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: auto;
}

/* ── Hero ─────────────────────────────────────────────────── */
.guide-hero {
  min-height: 440px;
  background: #1B4D3E;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.guide-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  opacity: .65;
  transform: scale(1.04);
  transition: transform 10s ease;
}

.guide-hero:hover .guide-hero-bg { transform: scale(1.08); }

.guide-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,30,24,.96) 0%,
    rgba(20,55,45,.65) 40%,
    rgba(0,0,0,.18) 100%
  );
}

.guide-hero-content {
  position: relative;
  z-index: 2;
  padding: 2.75rem clamp(1.25rem,4vw,2rem) 2.25rem;
  color: white;
}

.guide-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(0,178,136,.25);
  border: 1px solid rgba(0,178,136,.4);
  border-radius: 100px;
  padding: .2rem .75rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #5DDFBC;
  margin-bottom: .85rem;
}

.guide-hero-title {
  font-size: clamp(2rem, 5vw, 2.8rem) !important;
  color: white !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  line-height: 1.08 !important;
  margin-bottom: .65rem !important;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}

.guide-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: rgba(255,255,255,.9);
  margin-top: .4rem;
}

.guide-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 100px;
  padding: .22rem .75rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .78rem;
}

/* ── Sticky Nav ───────────────────────────────────────────── */
.guide-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 20px rgba(0,0,0,.07);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.guide-nav::-webkit-scrollbar { display: none; }

.guide-nav .guide-page-wrap {
  display: flex;
  padding: .6rem clamp(.75rem,3vw,1.25rem);
  gap: .3rem;
  margin: 0 auto;
}

.guide-nav-item {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .48rem .9rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tll-gray);
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s ease;
}

.guide-nav-item svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

.guide-nav-item:hover {
  background: #EEF9F5;
  color: var(--tll-forest);
}

.guide-nav-item.active {
  background: var(--tll-forest);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(27,77,62,.3);
}

/* ── Content wrapper ─────────────────────────────────────── */
.guide-content-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem,4vw,1.75rem) 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── WiFi / Access card ──────────────────────────────────── */
.guide-access-card {
  background: linear-gradient(135deg, #1D5244 0%, #0F3325 100%);
  border-radius: 20px;
  padding: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  box-shadow: 0 8px 32px rgba(15,51,37,.3);
  position: relative;
  overflow: hidden;
}

.guide-access-card::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,178,136,.2) 0%, transparent 70%);
  pointer-events: none;
}

.guide-access-card::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 10px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%);
  pointer-events: none;
}

.guide-access-panel {
  flex: 1;
  min-width: 200px;
  position: relative;
  z-index: 1;
}

.guide-access-divider {
  width: 1px;
  background: rgba(255,255,255,.12);
  margin: 0 1.5rem;
  align-self: stretch;
}

.guide-access-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.45);
  margin-bottom: .5rem;
  font-family: var(--font-head);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .3rem;
}

.guide-access-value {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1rem;
  color: white;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}

.guide-access-copy {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: white !important;
  border-radius: 8px !important;
  padding: .22rem .6rem !important;
  cursor: pointer;
  font-size: .68rem !important;
  font-family: var(--font-head);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  transition: all .15s ease;
}

.guide-access-copy:hover { background: rgba(255,255,255,.22) !important; }

.guide-access-password {
  font-family: monospace;
  font-size: 1rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: .28rem .65rem;
  letter-spacing: .06em;
  color: white;
}

/* ── Sections ─────────────────────────────────────────────── */
.guide-section {
  background: white;
  border-radius: 20px;
  padding: 1.75rem;
  border-bottom: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
  transition: box-shadow .2s ease;
}

.guide-section:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 8px 28px rgba(0,0,0,.07);
}

.guide-section-title {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.5rem;
}

.guide-section-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #E8F9F3 0%, #D0F0E6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,178,136,.15);
}

.guide-section-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--tll-forest);
  fill: none;
}

.guide-section-title h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--tll-black);
  letter-spacing: -.02em;
  margin: 0;
}

/* ── Info boxes (check-in/out) ───────────────────────────── */
.guide-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin-top: 1.5rem;
}

.guide-info-box {
  background: #F5F3EE;
  border-radius: 14px;
  padding: 1.1rem;
  text-align: center;
  border: 1px solid rgba(0,0,0,.05);
}

.guide-info-box-icon {
  color: var(--tll-forest);
  display: flex;
  justify-content: center;
  margin-bottom: .45rem;
}

.guide-info-box-time {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--tll-forest);
}

.guide-info-box-label {
  font-size: .72rem;
  color: var(--tll-gray);
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: .2rem;
}

/* ── History block ──────────────────────────────────────── */
.guide-history-block {
  margin-top: 1.5rem;
  padding: 1.25rem 1.35rem;
  background: linear-gradient(135deg, #F0FBF7 0%, #E6F7F0 100%);
  border-radius: 14px;
  border-left: 4px solid var(--tll-green);
}

.guide-history-block-title {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--tll-forest);
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .92rem;
}

/* ── Gallery strip ──────────────────────────────────────── */
.guide-gallery-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: 1.5rem;
}

.guide-gallery-strip-item {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

.guide-gallery-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.guide-gallery-strip-item:hover img { transform: scale(1.07); }

/* ── Amenity chips ──────────────────────────────────────── */
.amenity-chip {
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
  padding: .42rem .85rem !important;
  background: #F0FBF7 !important;
  border: 1px solid #BEE7D9;
  border-radius: 100px !important;
  font-size: .8rem;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--tll-forest) !important;
  transition: all .15s ease;
}

.amenity-chip:hover {
  background: #DDF5EC !important;
  border-color: var(--tll-green);
}

/* ── Category header (bonnes adresses) ──────────────────── */
.guide-category-header {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tll-gray);
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* ── Place cards ────────────────────────────────────────── */
.place-card {
  display: flex;
  gap: 1rem;
  padding: .9rem 1rem;
  background: #FAFAF8;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  transition: all .18s ease;
}

.place-card:hover {
  background: #F0FBF7;
  border-color: #C4E8D9;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
}

.place-card-img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--tll-green-light);
}

.place-card-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .93rem;
  margin-bottom: .2rem;
}

.place-card-meta {
  font-size: .77rem;
  color: var(--tll-gray);
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
}

.place-card-actions { display: flex; gap: .45rem; margin-top: .5rem; }

/* ── Transport items ────────────────────────────────────── */
.guide-transport-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: #FAFAF8;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.05);
  transition: all .18s ease;
}

.guide-transport-item:hover {
  background: #F0FBF7;
  border-color: #C4E8D9;
}

.guide-transport-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #E8F9F3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--tll-forest);
}

/* ── Rule items ─────────────────────────────────────────── */
.rule-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(0,0,0,.05) !important;
}

.rule-item:last-child { border-bottom: none !important; }

.rule-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rule-allowed { background: #E8F9F3; color: var(--tll-green); }
.rule-denied  { background: #FEE2E2; color: #EF4444; }
.rule-icon svg { width: 15px; height: 15px; }
.rule-text { font-size: .92rem; line-height: 1.5; }

/* ── Contact cards ──────────────────────────────────────── */
.guide-contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  background: #FAFAF8;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.05);
  gap: 1rem;
  flex-wrap: wrap;
  transition: border-color .15s ease;
}

.guide-contact-card:hover { border-color: #C4E8D9; }

.guide-contact-card.emergency {
  background: #FFF5F5;
  border-color: #FECACA;
}

.guide-contact-card.emergency:hover { border-color: #FCA5A5; }

/* ── Footer ─────────────────────────────────────────────── */
.guide-footer {
  background: linear-gradient(135deg, #1B4D3E 0%, #0D3028 100%);
  color: white;
  text-align: center;
  padding: 2.75rem 1.5rem 2.5rem;
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
}

.guide-footer::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,178,136,.15) 0%, transparent 65%);
  pointer-events: none;
}

.guide-footer-brand {
  width: 150px;
  margin: 0 auto .3rem;
}
.guide-footer-brand a.logo,
.guide-footer-brand .logo-img {
  margin: 0 auto;
}

.guide-footer-tagline {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  margin-bottom: 1.25rem;
  font-style: italic;
}

/* ── Gallery strip hover overlay ───────────────────────── */
.guide-gallery-strip-item {
  position: relative;
  cursor: pointer;
}

.guide-gallery-strip-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background .22s ease;
  opacity: 0;
}

.guide-gallery-strip-item:hover .guide-gallery-strip-overlay {
  background: rgba(0,0,0,.42);
  opacity: 1;
}

.guide-gallery-more-badge {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.3rem;
  color: white;
}

/* ── Lightbox ─────────────────────────────────────────────── */
.guide-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #060e0a;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}

.guide-lightbox.active {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

.guide-lb-image {
  max-width: calc(100vw - 8rem);
  max-height: calc(100vh - 7rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0,0,0,.8);
  transition: opacity .2s ease;
  user-select: none;
  display: block;
  position: relative;
  z-index: 1;
}

.guide-lb-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
  z-index: 10;
}

.guide-lb-close:hover {
  background: rgba(255,255,255,.24);
  transform: scale(1.1);
}

.guide-lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
  z-index: 10;
  opacity: .65;
}

.guide-lb-arrow:hover {
  background: rgba(255,255,255,.22);
  transform: translateY(-50%) scale(1.1);
  opacity: 1;
}

.guide-lb-prev { left: .9rem; }
.guide-lb-next { right: .9rem; }

.guide-lb-footer {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  z-index: 10;
}

.guide-lb-counter {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  letter-spacing: .1em;
  user-select: none;
}

.guide-lb-dots {
  display: flex;
  gap: .4rem;
  align-items: center;
}

.guide-lb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all .2s ease;
}

.guide-lb-dot.active {
  background: white;
  transform: scale(1.35);
}

.guide-lb-dot:hover:not(.active) {
  background: rgba(255,255,255,.6);
}

@media (max-width: 520px) {
  .guide-lb-image { max-width: calc(100vw - 4rem); max-height: calc(100vh - 6rem); }
  .guide-lb-prev { left: .5rem; }
  .guide-lb-next { right: .5rem; }
  .guide-lb-arrow { width: 38px; height: 38px; }
}

/* ── Read more ───────────────────────────────────────────── */
.rm-wrap.rm-collapsed {
  max-height: 7.8em;
  overflow: hidden;
  position: relative;
}
.rm-wrap.rm-collapsed.rm-short {
  max-height: 3em; /* ~2 lines at place card font-size */
}
.rm-wrap.rm-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2.2em;
  background: linear-gradient(transparent, white);
  pointer-events: none;
}
.rm-btn {
  display: inline-block;
  background: none;
  border: none;
  color: var(--tll-green);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  padding: .3rem 0;
  margin-top: .2rem;
  text-decoration: none;
}
.rm-btn:hover { text-decoration: underline; }

/* ── Contact Modal ───────────────────────────────────────── */
.guide-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1200;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.guide-modal-backdrop.open { display: flex; }

.guide-modal {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
  animation: slideUp .22s ease;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.guide-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--tll-gray-light, #eee);
}
.guide-modal-title { font-size: 1.05rem; font-weight: 700; margin: 0; }

.guide-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tll-gray, #888);
  padding: .25rem;
  border-radius: 6px;
  line-height: 1;
  transition: background .15s;
}
.guide-modal-close:hover { background: var(--tll-bg, #f5f5f5); }

.guide-modal-body { padding: 1.25rem 1.5rem 1.5rem; }

.guide-modal-field { margin-bottom: 1rem; }
.guide-modal-field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; color: #333; }
.guide-modal-field .form-input { width: 100%; box-sizing: border-box; }

/* ── Guide header responsive ────────────────────────────── */
@media (max-width: 768px) {
  .guide-header .container { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: .5rem; padding: .6rem 1rem; }
  .guide-header .logo { width: 110px !important; }
  .guide-lang-switch { justify-content: center !important; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; }
  .guide-lang-switch::-webkit-scrollbar { display: none; }
  .guide-lang-switch button { flex-shrink: 0; }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 520px) {
  .guide-hero { min-height: 360px; }
  .guide-nav-item { padding: .42rem .72rem; font-size: .68rem; }
  .guide-section { padding: 1.35rem; border-radius: 16px; }
  .guide-access-card { padding: 1.25rem; border-radius: 16px; }
  .guide-access-divider { display: none; }
  .guide-access-panel + .guide-access-panel { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.25rem; margin-top: -.25rem; }
}