/**
 * Tajlandia 2026 — styl druku / PDF (Ctrl+P → Zapisz jako PDF)
 * Włącz „Grafika w tle” / „Background graphics”, żeby zachować kolory i zdjęcia.
 */

@media screen {
  .print-only {
    display: none !important;
  }
}

@page {
  size: A4;
  margin: 12mm 14mm 16mm 14mm;
}

@page:first {
  margin-top: 10mm;
}

@media print {
  .print-only {
    display: block !important;
  }

  .screen-only-pdf-hint {
    display: none !important;
  }

  /* --- Silnik: kolory, tła, zdjęcia --- */
  html {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 10.5pt;
  }

  body {
    background: #ffffff !important;
    color: #1e293b !important;
    line-height: 1.45;
  }

  main {
    padding-top: 0 !important;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  /* Scrollbar / fixed chrome */
  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* --- Ukryj interfejs WWW --- */
  header,
  #overlay,
  aside#sidebar,
  #placeOverlay,
  .print-hide,
  .hero-print-hide,
  .map-screen-hint,
  button[onclick*="openPlaceModal"],
  button[onclick*="toggleSidebar"],
  button[onclick*="switchTab"],
  #heroPrev,
  #heroNext,
  #heroDots {
    display: none !important;
  }

  /* --- Widoczność treści ładowanej przez JS (fade-in) --- */
  .fade-in,
  .fade-in.visible {
    opacity: 1 !important;
    transform: none !important;
  }

  /* --- Bangkok: obie zakładki w jednym PDF --- */
  .tab-content.hidden,
  #bangkok-nowe.hidden {
    display: block !important;
    visibility: visible !important;
  }

  /* --- Akordeony: rozwinięte (jeśli dodasz na stronie) --- */
  .accordion-detail.hidden {
    display: block !important;
    visibility: visible !important;
    padding-top: 0.5rem !important;
    margin-top: 0.5rem !important;
    border-top: 1px solid #e2e8f0 !important;
  }

  .accordion-chev {
    display: none !important;
  }

  /* --- Okładka: hero jak strona tytułowa --- */
  section#top {
    position: relative !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    background: #020617 !important;
    page-break-after: always;
    break-after: page;
    margin: -2mm -14mm 8mm -14mm;
    padding: 0 14mm 20pt 14mm;
    box-sizing: content-box;
  }

  section#top > div.absolute.inset-0:first-of-type {
    position: relative !important;
    width: 100% !important;
    height: 200pt !important;
    min-height: 200pt !important;
    max-height: 200pt !important;
    inset: auto !important;
    overflow: hidden !important;
  }

  section#top .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    opacity: 1 !important;
  }

  section#top .hero-slide:not(.active) {
    display: none !important;
  }

  section#top .hero-zoom,
  section#top .hero-slide .absolute.inset-0.hero-zoom {
    transform: none !important;
    scale: 1 !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  section#top .absolute.bottom-6 {
    display: none !important;
  }

  section#top .relative.z-10 {
    position: relative !important;
    z-index: 2 !important;
    padding-top: 16pt !important;
    padding-bottom: 18pt !important;
  }

  section#top h1 {
    font-size: 28pt !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }

  section#top h1 .font-th {
    font-size: 36pt !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  section#top h1 .bg-clip-text,
  section#top h1 span.text-transparent.bg-clip-text {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color: #7dd3fc !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
  }

  section#top p,
  section#top .glass {
    color: #e2e8f0 !important;
    background: rgba(15, 23, 42, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* --- Mapy OSM: placeholder zamiast pustego kafelka --- */
  .print-map-slot {
    position: relative !important;
    height: 108pt !important;
    min-height: 108pt !important;
    max-height: 108pt !important;
    overflow: hidden !important;
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #94a3b8 !important;
    border-radius: 10pt !important;
    background: linear-gradient(160deg, #e0f2fe 0%, #f8fafc 45%, #e2e8f0 100%) !important;
    box-shadow: 0 2pt 6pt rgba(15, 23, 42, 0.08) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-map-slot .leaflet-container,
  .print-map-slot .leaflet-pane,
  .print-map-slot .leaflet-control-container,
  .print-map-slot .leaflet-map-pane img {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .print-map-slot::after {
    content: "Mapa interaktywna (OpenStreetMap + Leaflet) — w przeglądarce możesz ją przesuwać i klikać znaczniki. W PDF zostawiamy linki Google Maps pod spodem.";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10pt 14pt;
    font-size: 8.5pt;
    line-height: 1.35;
    font-weight: 600;
    color: #334155;
    box-sizing: border-box;
  }

  /* --- Łamanie stron --- */
  section[id] {
    break-inside: auto;
  }

  h1,
  h2,
  h3,
  h4 {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  .section-card,
  .eat-spot,
  .tip-box,
  .food-card,
  .timeline-dot,
  .timeline-line,
  .img-reveal,
  .rounded-3xl.bg-gradient-to-br,
  .rounded-3xl.bg-gradient-to-br.from-slate-900,
  .rounded-3xl.bg-gradient-to-br.from-slate-900.via-slate-800,
  .osm-map-shell,
  .print-map-slot {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Siatki: nie rozrywaj pojedynczej kolumny w połowie */
  .grid > .section-card,
  .grid > .eat-spot,
  .grid > article {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* --- Karty i obramowania --- */
  .section-card,
  .eat-spot {
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2pt 8pt rgba(15, 23, 42, 0.06) !important;
    background: #ffffff !important;
  }

  .eat-spot {
    background: linear-gradient(155deg, #ffffff 0%, #f8fafc 100%) !important;
  }

  .tip-box {
    border-left-width: 4px !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .food-card {
    border: 1px solid #fde68a !important;
    background: linear-gradient(90deg, #fffbeb 0%, #fff7ed 100%) !important;
  }

  /* --- Obrazy --- */
  img {
    max-width: 100% !important;
    height: auto !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .bento-tile img {
    transform: none !important;
  }

  .bento-tile::after {
    opacity: 0.88 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* --- Linki --- */
  a {
    color: #0369a1 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  a[href^="#"] {
    color: #0f172a !important;
    text-decoration: none;
  }

  /* --- Typografia sekcji --- */
  h2 {
    font-size: 20pt !important;
    letter-spacing: -0.02em;
    border-bottom: 2pt solid #e2e8f0;
    padding-bottom: 6pt;
    margin-bottom: 12pt !important;
  }

  h3 {
    font-size: 13pt !important;
    margin-top: 10pt !important;
  }

  h4 {
    font-size: 11pt !important;
  }

  p,
  li {
    orphans: 3;
    widows: 3;
  }

  /* --- Stopka --- */
  footer {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-top: 12pt;
    padding: 16pt 12pt !important;
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-radius: 8pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  footer a {
    color: #22d3ee !important;
  }

  footer .text-white {
    color: #ffffff !important;
  }

  /* --- Checklist (bez interakcji w papierze) --- */
  input[type="checkbox"] {
    appearance: auto !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* --- Ciemne sekcje (gradient slate) --- */
  .rounded-3xl.bg-gradient-to-br.from-slate-900 {
    border: 1px solid #334155 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* --- Opcjonalny baner druku między zakładkami --- */
  .print-bangkok-banner {
    break-before: page;
    page-break-before: always;
    margin-top: 0;
    margin-bottom: 14pt;
    padding: 14pt 16pt;
    border: 2px solid #38bdf8;
    border-radius: 10pt;
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%) !important;
    text-align: center;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-bangkok-banner h3 {
    margin: 0 !important;
    font-size: 16pt !important;
    color: #0c4a6e !important;
  }

  .print-bangkok-banner p {
    margin: 6pt 0 0 !important;
    font-size: 9pt !important;
    color: #64748b !important;
  }

  .print-bangkok-kicker {
    font-size: 8pt !important;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #0284c7 !important;
    margin-bottom: 4pt;
  }

  /* --- Marginesy sekcji --- */
  section {
    padding-top: 8pt !important;
    padding-bottom: 8pt !important;
  }

  .max-w-6xl,
  .max-w-5xl,
  .max-w-\[1600px\] {
    max-width: 100% !important;
  }

  /* --- Bento: lekko mniejszy na papierze --- */
  #bento {
    page-break-after: avoid;
  }

  #bento .bento-tile {
    break-inside: avoid;
    min-height: 0 !important;
  }

  /* --- Plan: oś czasu --- */
  #plan .section-card {
    break-inside: avoid;
  }

  /* --- Hakone tło dekoracyjne --- */
  #hakone .absolute.inset-0.z-0 img {
    opacity: 0.2 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #hakone .bg-gradient-to-b {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}