/* =========================================================
   AAAF Moldova Park — Explore + Park map
   Tokens live in style.css, shared components in pages.css.
   ========================================================= */

/* Anchors have to clear the fixed header */
.ex-chips-band,.ex-block,.ex-day,.ex-zones,.ex-plan,.zone-card,.place-item,.map-stage,.map-places{scroll-margin-top:110px}

/* Compact hero (map page) -------------------------------- */
.page-hero-compact{padding:132px 0 52px}
.page-hero-compact .lead{margin-top:18px}

/* Category chips ----------------------------------------- */
.ex-chips-band{padding:34px 0 0}
.ex-chips{display:flex;flex-wrap:wrap;gap:10px}
.ex-chip{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14.5px;font-weight:600;transition:background .2s,border-color .2s,color .2s}
.ex-chip .i{width:18px;height:18px;color:var(--green);transition:color .2s}
.ex-chip:hover{background:var(--green);border-color:var(--green);color:#fff}
.ex-chip:hover .i{color:var(--sand)}

/* Editorial blocks --------------------------------------- */
.ex-blocks .ex-block+.ex-block{margin-top:96px}
.split-rev .split-media{order:2}
.ex-block-body h3{font-size:clamp(28px,3.1vw,40px);font-weight:800;line-height:1.05;letter-spacing:-.035em}
.ex-block-body>p{margin-top:16px;max-width:52ch;font-size:17px;line-height:1.6;color:var(--ink-2)}
.ex-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:7px 14px;border-radius:999px;background:rgba(47,110,143,.13);color:#245A76;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.ex-badge .i{width:16px;height:16px}
.ex-meta{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;background:var(--cream-2);font-size:14px;font-weight:700}
.ex-meta .i{width:17px;height:17px;color:var(--green)}
/* Hours pill + "see on map" share one row; the gazebo CTA sits on its own row below */
.ex-block-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
.ex-block-cta{margin-top:24px}
.ex-gazebo-img{object-position:100% 50%}

/* Three photos in one media column (forest block) */
.ex-trio{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.3fr 1fr;gap:12px;overflow:visible;border-radius:0}
.ex-trio>figure{position:relative;overflow:hidden;border-radius:18px}
.ex-trio>figure:first-child{grid-column:1/-1;border-radius:24px}
.ex-trio img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.04)}
.ex-trio figcaption{left:12px;bottom:12px;font-size:12px}

/* Daily programme ---------------------------------------- */
.day-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));row-gap:30px;border-top:1px solid rgba(255,255,255,.16)}
.day-list li{position:relative;padding:26px 16px 0 0}
.day-list li::before{content:"";position:absolute;left:0;top:-5.5px;width:11px;height:11px;border-radius:50%;background:var(--sand)}
.day-list time{display:block;font-size:21px;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.day-list span{display:block;margin-top:6px;font-size:14.5px;color:rgba(255,255,255,.72)}
.day-note{margin-top:36px;font-size:14px;color:rgba(255,255,255,.58)}

/* Zones --------------------------------------------------- */
.zone-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.zone-card{display:flex;flex-direction:column;min-height:212px;padding:26px;border-radius:20px;background:#fff;border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.zone-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.zone-num{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--green);opacity:.55}
.zone-card h3{margin:16px 0 8px;font-size:23px;font-weight:800;letter-spacing:-.025em}
.zone-card p{font-size:15px;color:var(--muted)}
.zone-go{margin-top:auto;padding-top:18px;color:var(--green)}
.zone-go .i{width:20px;height:20px;transition:transform .2s}
.zone-card:hover .zone-go .i{transform:translate(3px,-3px)}

/* Plan your day ------------------------------------------ */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.plan-card{display:flex;flex-direction:column;padding:30px;border-radius:22px;background:#fff;border:1px solid var(--line)}
.plan-time{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.plan-time .i{width:16px;height:16px;color:var(--green)}
.plan-card h3{margin:14px 0 16px;font-size:26px;font-weight:800;letter-spacing:-.03em}
.plan-steps{margin-bottom:26px;counter-reset:plan}
.plan-steps li{position:relative;padding:12px 0 12px 40px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.plan-steps li:last-child{border-bottom:0}
.plan-steps li::before{counter-increment:plan;content:counter(plan);position:absolute;left:0;top:11px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--cream);font-size:12px;font-weight:800;color:var(--green)}
.plan-card .btn{margin-top:auto;align-self:flex-start}

/* Map page ------------------------------------------------ */
.map-page{padding:56px 0 72px}
.map-page .map-grid{align-items:start}
/* Grid items default to min-width:auto; without this the 640px swipeable map
   canvas widens the whole column and pushes the filters off a 390px screen. */
.map-page .map-grid>*{min-width:0}
.map-side{position:sticky;top:104px}
.map-side .filters{margin:0 0 26px}
.map-page .filter{min-height:40px}
.map-sub{margin-bottom:10px;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.map-legend{padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.map-legend ul{display:grid;gap:11px}
.map-legend li{display:flex;align-items:center;gap:13px;font-size:14px;font-weight:600}
.lg{flex:none;width:24px;height:10px;border-radius:3px}
.lg-you{width:12px;height:12px;border-radius:50%;background:#2F7BF5;box-shadow:0 0 0 3px rgba(47,123,245,.2)}
.lg-walk{background:#F7F3EA;border:1px solid var(--line)}
.lg-trail{height:0;border-top:3px dotted #B0BCA2;border-radius:0}
.lg-zone{background:#ECE2CF;border:1px solid rgba(21,24,22,.08)}
/* Phones get a wider, swipeable canvas so the zone labels stay legible */
.map-swipe{display:none;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--muted)}
.map-swipe .i{width:14px;height:14px}

/* Every place, grouped by category ------------------------ */
.map-places{padding-top:88px}
.place-group{margin-bottom:44px}
.place-group:last-child{margin-bottom:0}
.place-group-title{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.place-group-title .sw{flex:none;width:10px;height:10px;border-radius:50%}
.place-group-title em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--muted)}
.place-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.place-item{display:flex;gap:16px;padding:20px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.place-item:target{border-color:var(--green);box-shadow:0 0 0 3px rgba(31,61,43,.12)}
.place-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:13px;background:var(--cream);color:var(--pin,var(--green))}
.place-ic .i{width:21px;height:21px}
.place-item h4{font-size:18px;font-weight:800;letter-spacing:-.02em}
.place-item-meta,.place-item-zone{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:13.5px;color:var(--muted)}
.place-item-meta{font-weight:600;color:var(--ink-2)}
.place-item-meta .i,.place-item-zone .i{width:15px;height:15px;color:var(--pin,var(--green))}

/* Getting here -------------------------------------------- */
.map-getting{padding:0 0 var(--section)}
.getting{display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding:30px 34px;border-radius:24px;background:var(--cream-2);border:1px solid var(--line)}
.getting-ic{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:#fff;color:var(--green)}
.getting-ic .i{width:26px;height:26px}
.getting-body{flex:1;min-width:260px}
.getting h2{font-size:23px;font-weight:800;letter-spacing:-.025em}
.getting p{margin-top:6px;font-size:15px;color:var(--muted)}
.getting .btn .i{width:18px;height:18px}

/* Responsive ---------------------------------------------- */
@media (max-width:1100px){
  .zone-grid,.plan-grid,.place-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .day-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ex-blocks .ex-block+.ex-block{margin-top:64px}
  .split-rev .split-media{order:0}
  .ex-block .split-media{aspect-ratio:16/10}
  .map-side{position:static}
  .map-page{padding:40px 0 56px}
  .map-places{padding-top:72px}
}
/* Tablets: the sidebar sits above the map, so spread it out instead of
   leaving the legend and the selected place stretched across one thin line */
@media (min-width:861px) and (max-width:1100px){
  .map-page .place-card{padding:14px}
  .map-page .place-card img{width:118px;height:118px}
  .map-page .map-legend{padding:20px 24px}
  .map-page .map-legend ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
}
@media (max-width:860px){
  /* 44px tap targets: text links grow an invisible hit area, the same technique
     home.css uses on the homepage — nothing moves on screen. */
  .page-hero-compact{padding:112px 0 40px}
  .ex-chips-band{padding-top:26px}
  .ex-chip{padding:0 14px;gap:7px;font-size:13.5px}
  .ex-chip .i{width:16px;height:16px}
  .ex-blocks .ex-block+.ex-block{margin-top:52px}
  .ex-block-body h3{font-size:30px}
  .ex-block-body>p{font-size:16px}
  .ex-trio{grid-template-rows:1.15fr 1fr;gap:10px}
  .day-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .day-list li{padding-right:10px}
  .zone-grid,.plan-grid,.place-list{grid-template-columns:1fr}
  .zone-card,.plan-card{padding:24px}
  .zone-card{min-height:0}
  .map-page .filter{min-height:44px}
  .map-places{padding-top:56px}
  .place-group{margin-bottom:34px}
  .getting{padding:24px 20px;gap:18px}
  .getting .btn{width:100%}
}
@media (max-width:600px){
  .map-page .map-canvas{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .map-page .map-canvas::-webkit-scrollbar{display:none}
  .map-page .map-canvas svg{width:640px;max-width:none}
  .map-swipe{display:flex}
}