/* ============================
   MyLayover — Guides Page
   ============================ */

.mlw-guides-page {
  position: relative;
  padding: 34px 18px 60px;
}

.mlw-guides-header {
  max-width: 1200px;
  margin: 0 auto 22px;
}

.mlw-guides-header__top {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 560px);
  gap: 16px;
  align-items: end;
}

.mlw-guides-header__left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mlw-guides-title {
  font-size: clamp(34px, 4vw, 52px);
  margin: 0;
  line-height: 1.05;
  color: #fff;
}

.mlw-guides-subtitle {
  margin: 12px 0 0;
  color: rgba(255,255,255,0.72);
  font-size: 18px;
  max-width: 70ch;
}

/* Filters button (in header) */
.mlw-guides-panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);

  cursor: pointer;
}

.mlw-guides-panel-toggle:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
}

/* Search */
.mlw-guides-search {
  position: relative;
}

.mlw-guides-search__label {
  position: absolute;
  left: -9999px;
}

.mlw-guides-search__input {
  width: 100%;
  padding: 14px 44px 14px 14px;
  border-radius: 14px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  outline: none;
}

.mlw-guides-search__input::placeholder {
  color: rgba(255,255,255,0.55);
}

.mlw-guides-search__clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 30px;
  height: 30px;
  border-radius: 10px;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;

  cursor: pointer;
  visibility: hidden;
}

/* Drawer */
.mlw-guides-panel {
  position: absolute;
  left: 18px;
  top: 116px;
  width: min(360px, calc(100vw - 36px));
  max-height: calc(100vh - 160px);
  overflow: auto;

  z-index: 80;

  padding: 14px;
  border-radius: 18px;

  background: rgba(10, 18, 32, 0.78);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow: 0 28px 70px rgba(0,0,0,0.62);

  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms ease, opacity 180ms ease;
}

.mlw-guides-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mlw-guides-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 10px;
}

.mlw-guides-panel__title {
  color: #fff;
  font-weight: 650;
  letter-spacing: 0.2px;
}

.mlw-guides-panel__close {
  width: 38px;
  height: 38px;
  border-radius: 14px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;

  cursor: pointer;
}

.mlw-guides-panel__section {
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.mlw-guides-panel__section:first-of-type {
  border-top: 0;
}

.mlw-guides-panel__label {
  color: rgba(255,255,255,0.68);
  font-size: 13px;
  margin: 0 0 10px;
  letter-spacing: 0.2px;
}

.mlw-guides-panel__link {
  display: block;
  padding: 12px 12px;
  border-radius: 14px;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);

  color: #fff;
  text-decoration: none;
}

.mlw-guides-panel__link:hover {
  background: rgba(255,255,255,0.08);
}

.mlw-guides-filter {
  width: 100%;
  display: block;
  text-align: left;

  padding: 12px 12px;
  border-radius: 14px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;

  cursor: pointer;
  margin: 0 0 10px;
}

.mlw-guides-filter:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
}

.mlw-guides-filter.is-active {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}

/* Grid */
.mlw-guides-grid {
  max-width: 1200px;
  margin: 20px auto 0;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.mlw-guide-card {
  position: relative;
  display: block;
  min-height: 320px;

  border-radius: 26px;
  overflow: hidden;

  background-size: cover;
  background-position: center;

  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 22px 55px rgba(0,0,0,0.45);

  text-decoration: none;
}

.mlw-guide-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.55)
  );
}

.mlw-guide-card__top {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 2;
}

.mlw-guide-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mlw-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  font-size: 13px;
}

.mlw-guide-card__content {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
}

.mlw-guide-card__title {
  margin: 0;
  color: #fff;
  font-size: 34px;
  line-height: 1.05;
}

.mlw-guide-card__country {
  margin-top: 8px;
  color: rgba(255,255,255,0.72);
  font-size: 16px;
}

.mlw-guide-card__airports {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.mlw-airport-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 14px;

  background: rgba(10, 18, 32, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  font-size: 13px;
  letter-spacing: 0.4px;
}

.mlw-airport-pill--empty {
  opacity: 0.75;
}

.mlw-guides-noresults {
  max-width: 1200px;
  margin: 26px auto 0;
}

.mlw-guides-noresults__panel {
  padding: 18px;
  border-radius: 18px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
}

/* Responsive */
@media (max-width: 1100px) {
  .mlw-guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .mlw-guides-header__top {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .mlw-guides-panel {
    top: 160px;
  }
}

@media (max-width: 650px) {
  .mlw-guides-grid { grid-template-columns: 1fr; }
  .mlw-guide-card { min-height: 300px; }
  .mlw-guide-card__title { font-size: 30px; }
}
/* =========================================
   Guides page fixes (paste at bottom)
   ========================================= */

/* 1) Page background: match site header/footer (dark base + subtle glows) */
body.page-template-page-guides,
body.page-template-guides-page,
body.page-template-page-guides-php,
body.page-template-guides {
  background: #0b1220 !important;
}

.mlw-guides-page {
  background: transparent !important;
  /* subtle ambient glow like the rest of your theme */
  background-image:
    radial-gradient(900px 520px at 18% 8%, rgba(0, 190, 255, 0.10), transparent 55%),
    radial-gradient(900px 520px at 82% 18%, rgba(255, 120, 90, 0.08), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 2) Remove the heavy shade overlay on the card hero image */
.mlw-guide-card__shade {
  display: none !important;
}

/* Ensure text still reads over bright images (soft local fade only near bottom) */
.mlw-guide-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.00) 45%,
    rgba(0,0,0,0.20) 70%,
    rgba(0,0,0,0.38) 100%
  );
}

/* 3) Make the top “guide type” pills glassy again */
.mlw-tag {
  background: rgba(10, 18, 32, 0.35) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.95) !important;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 10px 26px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

/* Slight hover lift */
.mlw-guide-card:hover .mlw-tag {
  background: rgba(10, 18, 32, 0.44) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* Glassy airport pills too (keep consistent) */
.mlw-airport-pill {
  background: rgba(10, 18, 32, 0.40) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 10px 26px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

/* Optional: tighten the tags area so it feels premium */
.mlw-guide-card__top {
  top: 16px !important;
  left: 16px !important;
  right: 16px !important;
}
.mlw-guide-card__tags { gap: 10px !important; }
/* ============================
   MyLayover — Guides CARD FIX
   Fix: clipped titles, weird pill placement, inconsistent overlays
   ============================ */

/* Card base */
.mlw-guides-page a.mlw-guide-card{
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  isolation: isolate;

  /* image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* size + grid alignment */
  min-height: 320px;
  height: 100%;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);

  /* remove any accidental underline/visited junk */
  text-decoration: none !important;
}

/* Kill the old full-image shade if it exists */
.mlw-guides-page .mlw-guide-card__shade{
  display: none !important;
}

/* Add ONLY a bottom readability gradient (not a blanket shade) */
.mlw-guides-page a.mlw-guide-card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.38) 25%,
      rgba(0,0,0,0) 58%
    );
  z-index: 1;
}

/* Ensure top area doesn't clip */
.mlw-guides-page .mlw-guide-card__top{
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Tags container (guide types) */
.mlw-guides-page .mlw-guide-card__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}

/* Tag pill — glassy again */
.mlw-guides-page .mlw-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 12px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

/* Bottom content block */
.mlw-guides-page .mlw-guide-card__content{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;

  display: grid;
  gap: 6px;

  /* prevents text getting clipped at top of card */
  padding-top: 10px;
}

/* Title + country */
.mlw-guides-page .mlw-guide-card__title{
  margin: 0;
  padding: 0;
  color: #fff;
  font-weight: 750;
  letter-spacing: -0.02em;

  font-size: 40px;
  line-height: 1.06;

  /* keep long city names from exploding */
  text-wrap: balance;
  max-width: 100%;
}

.mlw-guides-page .mlw-guide-card__country{
  color: rgba(255,255,255,.78);
  font-size: 18px;
  line-height: 1.2;
}

/* Airport pills row */
.mlw-guides-page .mlw-guide-card__airports{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* Airport pills — glassy, not grey blocks */
.mlw-guides-page .mlw-airport-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;

  background: rgba(10,18,32,.42);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 14px 34px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  color: rgba(255,255,255,.95);
  font-size: 16px;
  letter-spacing: 0.06em;
}

/* If your template outputs an "empty" airports state */
.mlw-guides-page .mlw-guide-card__airports--empty{
  opacity: .75;
}
.mlw-guides-page .mlw-airport-pill--empty{
  min-width: auto;
  letter-spacing: 0;
  font-size: 14px;
}

/* Responsive tune */
@media (max-width: 980px){
  .mlw-guides-page a.mlw-guide-card{ min-height: 280px; border-radius: 22px; }
  .mlw-guides-page .mlw-guide-card__title{ font-size: 34px; }
}
@media (max-width: 560px){
  .mlw-guides-page a.mlw-guide-card{ min-height: 260px; }
  .mlw-guides-page .mlw-guide-card__title{ font-size: 30px; }
  .mlw-guides-page .mlw-airport-pill{ height: 40px; min-width: 58px; }
}
/* ---- SEARCH RESTORE (override Astra input defaults) ---- */
.mlw-guides-page .mlw-guides-search{
  position: relative;
  width: min(760px, 100%);
  margin-left: auto;
}

.mlw-guides-page .mlw-guides-search__label{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.mlw-guides-page input.mlw-guides-search__input{
  width: 100%;
  height: 56px;
  padding: 0 52px 0 18px;
  border-radius: 999px;

  /* FORCE glass (Astra likes to override inputs) */
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;

  outline: none !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08) !important;

  -webkit-appearance: none;
  appearance: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.mlw-guides-page input.mlw-guides-search__input::placeholder{
  color: rgba(255,255,255,.55) !important;
}

.mlw-guides-page input.mlw-guides-search__input:focus{
  border-color: rgba(120,200,255,.55) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    0 0 0 3px rgba(120,200,255,.18),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.mlw-guides-page .mlw-guides-search__clear{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);

  display: grid;
  place-items: center;
  cursor: pointer;
}

.mlw-guides-page .mlw-guides-search__clear:hover{
  background: rgba(255,255,255,.12);
}