/* Our Hotels — page-specific styles with effects */

/* Hero */
.hotels-hero {
  padding: clamp(64px, 8vw, 120px) 0 32px;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,0));
}
.hotels-hero .pg-hero__title { margin-bottom: .4rem; }

/* Region title */
.hotels-region-title { margin-bottom: 18px; }

/* Grid */
.hotels-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
@media (max-width: 1024px){ .hotels-grid { gap: 16px; } }

/* Card */
.hotel-card{
  grid-column: span 12;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 24px;
  align-items: stretch;
  background: var(--pg-surface);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  transform: translateY(0);
  transition: transform .45s var(--pg-ease), box-shadow .45s var(--pg-ease);
  will-change: transform, box-shadow;
  animation: hotels-fadeUp .7s var(--pg-ease) both;
}
@media (max-width: 900px){ .hotel-card{ grid-template-columns: 1fr; } }

/* Stagger entrance */
.hotels-grid > .hotel-card:nth-child(1) { animation-delay: .02s; }
.hotels-grid > .hotel-card:nth-child(2) { animation-delay: .12s; }
.hotels-grid > .hotel-card:nth-child(3) { animation-delay: .22s; }

.hotel-card:hover,
.hotel-card:focus-within{
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(0,0,0,.10);
}

/* Media */
.hotel-media{ position: relative; overflow: hidden; min-height: 260px; isolation: isolate; }
.hotel-media img,
.hotel-media video{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02);
  transition: transform .7s var(--pg-ease), filter .7s var(--pg-ease);
  will-change: transform, filter;
}
/* Soft gradient overlay for readability */
.hotel-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.16), rgba(0,0,0,0) 50%);
  opacity: 0; transition: opacity .6s var(--pg-ease); z-index:1;
}
.hotel-card:hover .hotel-media img,
.hotel-card:focus-within .hotel-media img{ transform: scale(1.06); filter: saturate(1.05) contrast(1.02); }
.hotel-card:hover .hotel-media::after,
.hotel-card:focus-within .hotel-media::after{ opacity: 1; }

/* Badge */
.badge{
  position: absolute; top: 14px; left: 14px;
  background: rgba(0,0,0,.65); color:#fff;
  padding: 6px 10px; border-radius: 999px;
  font-size: .8rem; letter-spacing: .02em; z-index:2;
  backdrop-filter: blur(4px);
  transform: translateY(0);
  transition: transform .45s var(--pg-ease), opacity .45s var(--pg-ease);
}
.hotel-card:hover .badge,
.hotel-card:focus-within .badge{ transform: translateY(-2px); }

/* Body */
.hotel-body{
  padding: clamp(18px, 2vw, 28px);
  display: flex; flex-direction: column; gap: 14px;
}

/* Meta */
.hotel-meta{
  display: flex; gap: 12px; flex-wrap: wrap;
  color: var(--pg-muted); font-size: .95rem;
}

/* Dark pill tags (scoped) */
.hotel-card .tag{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(60,60,60,.85); /* softer charcoal */
  color: #fff;
  backdrop-filter: saturate(140%) blur(2px);
  -webkit-backdrop-filter: saturate(140%) blur(2px);
  font-size: .85rem; line-height: 1; white-space: nowrap;
  transition: transform .2s var(--pg-ease), border-color .2s var(--pg-ease), background-color .2s var(--pg-ease);
}
.hotel-card .tag:hover{ transform: translateY(-1px); }

/* Location emphasized */
.hotel-card .hotel-meta .tag:first-child{
  background: rgba(50,50,50,.92);
  border-color: rgba(255,255,255,.20);
  font-weight: 700;
}
.hotel-card .hotel-meta .tag *{ color: inherit; }

/* Amenities */
.amenities{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.amenities .tag{
  background: rgba(60,60,60,.85);
  border-color: rgba(255,255,255,.15);
  color: #fff;
}

/* Description */
.hotel-body p, .hotel-body .muted{ color: var(--pg-muted); }

/* Actions */
.hotel-actions{ margin-top: auto; display:flex; gap:12px; flex-wrap:wrap; }
.pg-btn--ghost{ border:1px solid rgba(0,0,0,.12); background:transparent; }

/* Focus styles */
.hotel-card:focus-within{
  outline: 2px solid transparent;
  box-shadow: 0 12px 36px rgba(0,0,0,.10), 0 0 0 3px rgba(33,150,243,.25);
}

/* Callout spacing */
.hotels-callout{ margin-top: 28px; }

/* Keyframes */
@keyframes hotels-fadeUp{
  from{ opacity:0; transform:translateY(12px); filter:saturate(.96); }
  to  { opacity:1; transform:translateY(0);    filter:saturate(1); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hotel-card, .hotel-media img, .hotel-media::after, .badge, .tag{
    transition:none !important; animation:none !important;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark){
  .hotels-hero{
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  }
  .hotel-card{
    background: rgba(255,255,255,.04);
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.06);
  }
  .hotel-card:hover,
  .hotel-card:focus-within{ box-shadow: 0 14px 40px rgba(0,0,0,.5); }
  .hotel-meta{ color: rgba(255,255,255,.78); }

  .hotel-card .tag{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.20);
    color:#fff;
  }
  .hotel-card .hotel-meta .tag:first-child{
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.24);
  }
  .amenities .tag{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.20);
  }

  .badge{ background: rgba(0,0,0,.45); }
  .pg-btn--ghost{ border-color: rgba(255,255,255,.18); }
}

/* === Softer dark pills (charcoal grey) === */
.hotels-grid .hotel-card .hotel-body .hotel-meta .tag,
.hotels-grid .hotel-card .amenities .tag {
  background: rgba(163, 163, 163, 0.92) !important; /* πιο ανοιχτό απόλυτο μαύρο */
  color: #fff !important;
  border-color: rgba(163, 163, 163, 0.92) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 9999px !important;
  padding: 7px 12px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Τοποθεσία — λίγο πιο έντονο για να ξεχωρίζει */
.hotels-grid .hotel-card .hotel-body .hotel-meta .tag:first-child {
  background: rgba(163, 163, 163, 0.92) !important;
  font-weight: 700 !important;
  border-color: rgba(255,255,255,.20) !important;
}

/* Nested spans (Κολύμπια, Ρόδος κτλ) */
.hotels-grid .hotel-card .hotel-body .hotel-meta .tag * {
  color: inherit !important;
}

/* ===== Mobile Hamburger & Curtain Menu (clean) ===== */

/* Burger button (μόνο σε μικρές οθόνες) */
.pg-burger{
  display:none;
  background:none;
  border:0;
  font-size:24px;
  cursor:pointer;
  color:var(--pg-fg);
  width:40px; height:40px; line-height:1;
}
.pg-burger span{
  display:block; width:24px; height:2px; margin:4px 0;
  background:var(--pg-fg); border-radius:2px;
  transition:transform .25s var(--pg-ease), opacity .25s var(--pg-ease);
}

/* Overlay & panel (off-canvas) */
.pg-menu-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--pg-ease);
  z-index:90;
}
.pg-menu-panel{
  position:fixed; top:0; right:0;
  width:100%; max-width:none; height:100%;
  background:var(--pg-bg);
  box-shadow:-2px 0 12px rgba(0,0,0,.2);
  transform:translateX(100%);
  transition:transform .3s var(--pg-ease);
  z-index:100;

  /* κεντραρισμένο περιεχόμενο */
  display:flex; align-items:center; justify-content:center;
  padding: clamp(24px, 6vh, 48px);
}
.pg-menu-panel nav{
  width:100%; max-width:520px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.pg-menu-panel a{
  display:block; width:100%; text-align:center;
  font-size:20px; font-weight:700;
  padding:14px 0; color:var(--pg-fg);
  border-bottom:1px solid var(--pg-border);
}
.pg-menu-panel a:last-child{ border-bottom:0; }

/* Open state */
.pg-menu-open .pg-menu-overlay{ opacity:1; pointer-events:auto; }
.pg-menu-open .pg-menu-panel{ transform:translateX(0); }
.pg-menu-open{ overflow:hidden; } /* κλείδωμα scroll */

/* Header/burger layering ώστε να φαίνεται το Χ πάνω από την κουρτίνα */
.pg-header{ z-index:120; } /* πάνω από overlay(90) & panel(100) */
.pg-menu-open .pg-header{
  background:transparent; border-bottom:0; pointer-events:none; /* δεν μπλοκάρει κλικ */
}
.pg-menu-open .pg-burger{
  position:fixed; top:16px; right:16px;
  z-index:210; background:rgba(255,255,255,.92);
  border-radius:8px; padding:6px; box-shadow:var(--pg-shadow-1);
  pointer-events:auto;
}

/* Burger → Χ animation */
.pg-menu-open .pg-burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.pg-menu-open .pg-burger span:nth-child(2){ opacity:0; }
.pg-menu-open .pg-burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Responsive toggle: σε μικρές οθόνες κρύψε το desktop menu & δείξε burger */
@media (max-width:900px){
  .pg-burger{ display:inline-flex; align-items:center; justify-content:center; }
  .pg-nav{ display:none; }
}