/* GUSTI E-map — POI / event detail card.
 * Echoes the E-manual LOCATION page: photo, gradient category band (clean edge,
 * no decorative wave), blue heading + turquoise rule, light-turquoise info panel.
 * Desktop: slide-in right. Mobile: bottom sheet (responsive.css).
 */
.poi-card{
  position:fixed;top:calc(var(--header-h) + 14px);right:16px;z-index:46;
  width:min(392px,calc(100vw - 32px));
  max-height:calc(100vh - var(--header-h) - 30px);
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  transform:translateX(calc(100% + 28px));opacity:0;
  transition:transform var(--dur) var(--ease),opacity 160ms linear;
}
.poi-card.open{transform:none;opacity:1}

.pc-close{
  position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;border-radius:9px;
  background:rgba(255,255,255,.9);color:var(--ink);font-size:18px;line-height:1;z-index:5;
  box-shadow:var(--shadow-sm);transition:background var(--dur);
}
.pc-close:hover{background:#fff}
.pc-grip{display:none}

.pc-scroll{overflow-y:auto;overflow-x:hidden}

/* ---- photo gallery ---- */
.pc-photo{position:relative;aspect-ratio:16/10;background:var(--turq-wash);overflow:hidden}
.pc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pc-photo.empty{
  aspect-ratio:16/5;
  background:
    radial-gradient(130% 170% at 90% 10%,var(--turq-wash-2),transparent 60%),
    linear-gradient(180deg,#fbfdfd,var(--turq-wash));
}
/* subtle prev / next — appear on hover (always visible on touch) */
.pc-gnav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1;color:var(--ink);cursor:pointer;
  background:rgba(255,255,255,.82);box-shadow:var(--shadow-sm);
  opacity:0;transition:opacity var(--dur),background var(--dur);
}
.pc-photo:hover .pc-gnav,.pc-gnav:focus-visible{opacity:1}
.pc-gnav:hover{background:#fff}
.pc-gnav.prev{left:8px}
.pc-gnav.next{right:8px}
.pc-gcount{
  position:absolute;right:8px;bottom:8px;
  font-size:10px;font-weight:700;letter-spacing:.05em;color:#fff;
  background:rgba(29,47,60,.55);border-radius:999px;padding:2px 8px;
}
@media (hover:none){ .pc-gnav{opacity:.92} }

.pc-thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;padding:8px 10px 0}
.pc-thumbs button{border:0;padding:0;border-radius:8px;overflow:hidden;aspect-ratio:3/2;background:var(--wash);cursor:pointer;opacity:.72;transition:opacity var(--dur);position:relative}
.pc-thumbs button.active,.pc-thumbs button:hover{opacity:1}
.pc-thumbs button.active::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--turq);border-radius:8px}
.pc-thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- gradient category band (no decorative wave — clean edge into the body) ---- */
.pc-band{
  position:relative;padding:15px 18px 16px;color:#fff;background:var(--grad);
}
.pc-band .cat{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;opacity:.96}
.pc-band .cat::after{content:"";display:block;width:34px;height:2px;background:#fff;border-radius:2px;margin-top:6px;opacity:.9}
.pc-band h2{margin:9px 0 0;font-size:20px;line-height:1.24;font-weight:800;letter-spacing:-.01em}
.pc-band .region{margin-top:7px;font-size:11.5px;font-weight:600;opacity:.92}

/* ---- body ---- */
.pc-content{padding:18px 18px 20px}
.pc-approx{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--turq-d);
  background:var(--turq-wash);border-radius:999px;padding:4px 10px;margin-bottom:12px;
}
.pc-approx svg{width:12px;height:12px}

.pc-h{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.pc-h::after{content:"";display:block;width:52px;height:3px;background:var(--turq);border-radius:3px;margin:6px 0 12px}
.pc-desc{margin:0 0 6px;font-size:13px;line-height:1.62;color:var(--ink)}
.pc-desc + .pc-desc{margin-top:10px}
.pc-desc-wrap.clamped{
  max-height:8.2em;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);
          mask-image:linear-gradient(180deg,#000 62%,transparent);
}
.pc-more{
  border:0;background:transparent;padding:2px 0;margin-top:2px;
  font-size:12px;font-weight:700;color:var(--blue);
}
.pc-more:hover{text-decoration:underline}

.pc-info{
  margin-top:18px;background:var(--turq-wash);border-radius:14px;padding:14px 15px;
}
.pc-row{padding:8px 0;border-top:1px solid rgba(84,190,197,.22);font-size:12.5px}
.pc-row:first-child{border-top:0;padding-top:2px}
.pc-row .k{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--turq-d);margin-bottom:3px}
.pc-row .v{color:var(--ink);word-break:break-word;line-height:1.5}
.pc-row .v a{font-weight:600}

.pc-actions{display:flex;gap:8px;margin-top:16px}
.pc-actions a{
  flex:1;text-align:center;border:1px solid var(--line-2);border-radius:10px;padding:9px 10px;
  font-size:12px;font-weight:700;color:var(--ink);transition:all var(--dur);
}
.pc-actions a:hover{border-color:var(--turq);color:var(--turq-d);text-decoration:none}
.pc-actions a.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.pc-actions a.primary:hover{background:var(--blue-d)}

.pc-routes{margin-top:16px}
.pc-routebtn{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;border:1px solid var(--line);
  background:var(--paper);border-radius:10px;padding:9px 11px;font-size:12px;font-weight:600;color:var(--blue);
  margin-bottom:6px;transition:all var(--dur);line-height:1.35}
.pc-routebtn:hover{background:var(--turq-wash);border-color:var(--turq)}
.pc-routebtn svg{width:13px;height:13px;flex:0 0 auto;margin-top:2px}
.pc-routebtn span{min-width:0;overflow-wrap:anywhere}

.pc-social{display:flex;flex-wrap:wrap;gap:6px}
.pc-social a{font-size:11.5px;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--ink-soft)}
.pc-social a:hover{border-color:var(--turq);color:var(--turq-d);text-decoration:none}

/* ---- route detail (GUSTI editorial routes) — same card, no photo band ---- */
.poi-card.route-mode .pc-band{padding-top:18px;padding-right:54px}
.pc-route-desc{margin-bottom:16px}
.pc-country{margin:12px 0 6px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--turq-d)}
.pc-itin{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.pc-stop{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;border:1px solid var(--line);
  background:var(--paper);border-radius:10px;padding:8px 10px;font-size:12.5px;font-weight:600;color:var(--ink);
  line-height:1.35;transition:all var(--dur)}
.pc-stop:hover{background:var(--turq-wash);border-color:var(--turq)}
.pc-stop-n{flex:0 0 auto;min-width:22px;font-size:11px;font-weight:800;color:var(--blue);padding-top:1px}
.pc-stop-name{min-width:0;overflow-wrap:anywhere}
.pc-conn{margin:12px 0 2px;padding:10px 12px;border-left:2px dashed var(--blue);background:var(--wash);border-radius:0 10px 10px 0}
.pc-conn.indicative{border-left-style:dotted;border-left-width:3px}
.pc-conn-h{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.pc-conn-sub{margin-top:3px;font-size:12px;color:var(--ink);line-height:1.45}
.pc-conn-sub span{font-size:11px;color:var(--ink-soft)}
.pc-route-clear{flex:1;border:1px solid var(--line-2);background:var(--paper);border-radius:10px;padding:9px 10px;
  font-size:12px;font-weight:700;color:var(--ink-soft);transition:all var(--dur)}
.pc-route-clear:hover{border-color:var(--turq);color:var(--turq-d)}