/* =========================================================================
   SHAHDAG — Plan Your Trip
   Aesthetic: Cartographic / topographic route planner.
   Deep navy base, woven topographic poster art, teal + gold contour motifs,
   numbered route timeline, real embedded map. Scoped with .pl-
   ========================================================================= */

.pl {
  --pl-line: rgba(191, 227, 239, .14);
  --pl-line-strong: rgba(43, 182, 204, .35);
  background:
    radial-gradient(1200px 800px at 12% -10%, rgba(31,122,140,.18), transparent 60%),
    radial-gradient(1000px 700px at 100% 110%, rgba(19,40,59,.9), transparent 55%),
    var(--night);
  color: var(--ice-soft);
}

/* contour / grid helper used over hero */
.pl-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--pl-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--pl-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 120% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 40%, #000 30%, transparent 78%);
  opacity: .6;
}

/* shared section heading treatment */
.pl-section-head { margin-inline: auto; margin-block-end: clamp(2rem, 5vw, 3.2rem); }
.pl-section-head h2 {
  font-family: var(--f-serif);
  color: var(--snow);
}
.pl-section-head .kicker { color: var(--teal-br); margin-block-end: .9rem; }

/* =========================================================================
   HERO
   ========================================================================= */
.pl-hero {
  position: relative;
  min-height: clamp(560px, 84vh, 820px);
  display: flex; align-items: flex-end;
  padding-block: calc(var(--header-h) + 3rem) clamp(3rem, 8vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.pl-hero-bg {
  position: absolute; inset: 0; z-index: -3;
  background-size: cover; background-position: center;
  filter: saturate(.85) contrast(1.05);
  transform: scale(1.04);
}
.pl-hero-scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(to top, var(--night) 4%, rgba(11,22,34,.45) 45%, rgba(11,22,34,.7) 100%),
    linear-gradient(115deg, rgba(11,22,34,.82), rgba(11,22,34,.2));
}
.pl-hero-grid { z-index: -1; }

.pl-hero-inner { position: relative; max-width: 880px; }
.pl-hero-kicker { color: var(--gold); }
.pl-hero-title {
  font-family: var(--f-serif);
  font-size: clamp(2.6rem, 1.4rem + 6vw, 5.6rem);
  line-height: .98; color: var(--snow);
  margin-block: 1rem .9rem;
  letter-spacing: -.01em;
}
.pl-hero-sub {
  font-family: var(--f-cormorant);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.65rem);
  color: var(--ice); max-width: 60ch; line-height: 1.5;
}
.pl-coords {
  margin-block-start: 1.8rem;
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .7em;
  font-family: var(--f-display); font-size: .74rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ice);
  padding: .65em 1.2em; border-radius: 999px;
  border: 1px solid var(--pl-line-strong);
  background: rgba(8,17,25,.45);
  backdrop-filter: blur(6px);
}
.pl-coords-sep { color: var(--teal-br); }

/* =========================================================================
   ROUTE TIMELINE
   ========================================================================= */
.pl-route {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
.pl-route-art {
  position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 0;
  width: min(46%, 620px);
  background: url('../img/gen/map-art.jpg') center / cover;
  opacity: .14;
  mask-image: linear-gradient(to left, #000, transparent 90%);
  -webkit-mask-image: linear-gradient(to left, #000, transparent 90%);
  pointer-events: none;
}
.pl-route > .container { position: relative; z-index: 1; }

.pl-timeline {
  list-style: none; padding: 0;
  max-width: 760px;
  position: relative;
}
/* connecting line */
.pl-timeline::before {
  content: ""; position: absolute;
  inset-block: 1.4rem; inset-inline-start: clamp(1.55rem, 4vw, 2.1rem);
  width: 2px;
  background: linear-gradient(to bottom, var(--gold), var(--teal-br) 55%, rgba(43,182,204,.1));
  border-radius: 2px;
}
.pl-step {
  position: relative;
  display: grid;
  grid-template-columns: clamp(3.2rem, 8vw, 4.4rem) 1fr;
  gap: clamp(1.1rem, 3vw, 2rem);
  align-items: start;
  padding-block: clamp(1.3rem, 3vw, 2rem);
}
.pl-step-num {
  position: relative; z-index: 1;
  inline-size: clamp(3.2rem, 8vw, 4.4rem);
  block-size: clamp(3.2rem, 8vw, 4.4rem);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
  font-weight: 700; color: var(--night);
  background: radial-gradient(circle at 32% 28%, #ffd56b, var(--gold));
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(11,22,34,1), 0 0 0 7px var(--pl-line-strong),
              0 14px 30px -12px rgba(240,180,41,.7);
}
.pl-step-body h3 {
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.85rem);
  color: var(--snow); margin-block: .3rem .5rem;
}
.pl-step-body p { color: var(--ice); max-width: 52ch; }

/* =========================================================================
   HOW TO TRAVEL
   ========================================================================= */
.pl-how {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  border-block-start: 1px solid var(--pl-line);
}
.pl-how-grid {
  display: grid; gap: clamp(1.2rem, 3vw, 2rem);
  grid-template-columns: repeat(2, 1fr);
}
.pl-how-card {
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(31,122,140,.16), rgba(15,34,51,.55));
  border: 1px solid var(--pl-line-strong);
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.pl-how-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--pl-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--pl-line) 1px, transparent 1px);
  background-size: 38px 38px; opacity: .4;
  mask-image: radial-gradient(80% 80% at 85% 15%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(80% 80% at 85% 15%, #000, transparent 70%);
}
.pl-how-card:hover {
  transform: translateY(-6px);
  border-color: var(--teal-br);
  box-shadow: 0 24px 50px -26px rgba(0,0,0,.7);
}
.pl-how-icon {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center;
  inline-size: 3.4rem; block-size: 3.4rem;
  color: var(--gold);
  border: 1px solid var(--pl-line-strong);
  border-radius: 14px;
  background: rgba(8,17,25,.4);
  margin-block-end: 1.1rem;
}
.pl-how-icon svg { width: 2rem; height: 2rem; }
.pl-how-card h3 {
  position: relative; z-index: 1;
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem);
  color: var(--snow); margin-block-end: .5rem;
}
.pl-how-card p { position: relative; z-index: 1; color: var(--ice); }

/* =========================================================================
   WHEN TO COME (seasons)
   ========================================================================= */
.pl-seasons {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}
.pl-seasons-art {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('../img/gen/map-art.jpg') center / cover fixed;
  opacity: .08;
}
.pl-seasons > .container { position: relative; z-index: 1; }
.pl-seasons-grid {
  display: grid; gap: clamp(1.2rem, 3vw, 1.8rem);
  grid-template-columns: repeat(3, 1fr);
}
.pl-season {
  --acc: var(--teal-br);
  position: relative;
  padding: clamp(1.5rem, 3.5vw, 2.3rem);
  padding-block-start: clamp(1.8rem, 4vw, 2.6rem);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(15,34,51,.7), rgba(11,22,34,.55));
  border: 1px solid var(--pl-line);
  border-block-start: 3px solid var(--acc);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.pl-season:hover { transform: translateY(-5px); box-shadow: 0 22px 46px -26px rgba(0,0,0,.7); }
.pl-season-tag {
  display: block; inline-size: 2.6rem; block-size: .5rem;
  border-radius: 999px; background: var(--acc);
  margin-block-end: 1rem;
  box-shadow: 0 0 18px -2px var(--acc);
}
.pl-season h3 {
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem);
  color: var(--snow); margin-block-end: .5rem;
}
.pl-season p { color: var(--ice); }
.pl-season--winter  { --acc: #5ec8f0; }   /* cool blue */
.pl-season--summer  { --acc: #4fd08a; }   /* green */
.pl-season--shoulder{ --acc: var(--gold); } /* amber */

/* =========================================================================
   DON'T FORGET (checklist + media)
   ========================================================================= */
.pl-pack {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  border-block-start: 1px solid var(--pl-line);
}
.pl-pack-inner {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
}
.pl-pack-media {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--pl-line-strong);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}
.pl-pack-media img {
  width: 100%; height: 100%; object-fit: cover;
  min-height: 340px; aspect-ratio: 4/5;
  filter: saturate(.92) contrast(1.04);
}
.pl-pack-media-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(43,182,204,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,182,204,.18) 1px, transparent 1px);
  background-size: 48px 48px;
  mix-blend-mode: screen; opacity: .5;
}
.pl-checklist { list-style: none; padding: 0; display: grid; gap: .9rem; }
.pl-checklist li {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(31,122,140,.12), rgba(15,34,51,.4));
  border: 1px solid var(--pl-line);
  color: var(--ice-soft);
  transition: transform .3s var(--ease), border-color .3s;
}
.pl-checklist li:hover { transform: translateX(.2rem); border-color: var(--pl-line-strong); }
[dir="rtl"] .pl-checklist li:hover { transform: translateX(-.2rem); }
.pl-check {
  inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: .15rem;
  color: var(--night);
  background: radial-gradient(circle at 32% 28%, #ffd56b, var(--gold));
  border-radius: 7px; padding: 3px;
  box-shadow: 0 6px 16px -6px rgba(240,180,41,.7);
}

/* =========================================================================
   MAP
   ========================================================================= */
.pl-map {
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(4rem, 9vw, 7rem);
  border-block-start: 1px solid var(--pl-line);
}
.pl-map-frame {
  position: relative;
  padding: 10px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(31,122,140,.22), rgba(15,34,51,.55));
  border: 1px solid var(--pl-line-strong);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.85);
}
.pl-map-frame iframe { display: block; filter: saturate(.95); }
.pl-map-note {
  margin-block-start: 1.3rem;
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-display); font-size: .8rem; letter-spacing: .04em;
  color: var(--ice);
}
.pl-map-note svg { width: 1.2rem; height: 1.2rem; color: var(--gold); flex: none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 920px) {
  .pl-route-art { width: 60%; opacity: .1; }
}
@media (max-width: 760px) {
  .pl-how-grid { grid-template-columns: 1fr; }
  .pl-seasons-grid { grid-template-columns: 1fr; }
  .pl-pack-inner { grid-template-columns: 1fr; }
  .pl-pack-media { order: -1; }
  .pl-pack-media img { aspect-ratio: 16/10; min-height: 240px; }
  .pl-seasons-art { background-attachment: scroll; }
}
@media (max-width: 560px) {
  .pl-hero { min-height: 78vh; align-items: flex-end; }
  .pl-timeline::before { inset-inline-start: clamp(1.4rem, 7vw, 1.7rem); }
  .pl-step { gap: 1rem; }
}