/* =========================================================================
   Rowerowa Osada — REDESIGN trasy-rowerowe.html
   Ładowany WYŁĄCZNIE na trasy-rowerowe.html — nie wpływa na inne strony.
   Zasada: KEEP THE CONTENT & THE MAP+VIDEO WIDGET — REPLACE THE VISUAL LAYER.
   Treść tras (opisy, statystyki, linki, GPX, Mapy.com) oraz mechanika
   popupu z interaktywną mapą (routeData / openRouteModal / closeRouteModal
   w inline <script>) pozostają dokładnie takie same jak w produkcyjnym
   pliku — ten plik zmienia wyłącznie markup prezentacji i CSS.
   KRYTYCZNE: iframe widgetu trassy.pl MUSI mieć szerokość >= 1200px
   (Bootstrap col-xl-6: mapa | wideo). Poniżej 1200px col-12 składa je pionowo.
   Nie używać globalnej .modal-content (w styles.css ma max-width:28rem).
   Tokeny/navbar/footer/przyciski są 1:1 z redesign-home.css / redesign-cennik.css
   / redesign-blog.css (ten sam design system co strona główna).
   ========================================================================= */

:root{
  --rd-ink:#0E1512;
  --rd-forest:#1E3A2F;
  --rd-stone:#F6F3EC;
  --rd-surface:#FBFAF7;
  --rd-ember:#E85D2C;
  --rd-ember-deep:#C94A1E;
  --rd-muted:#8A8578;
  --rd-line:#DFD9C9;
  --rd-mapy:#469944;
}

body{
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
  background:var(--rd-stone) !important;
}

/* =========================================================================
   NAVBAR — identyczny system co index.html / cennik.html / blog.html
   ========================================================================= */
header.rd-navbar{
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--rd-line);
  backdrop-filter:blur(14px);
}
header.rd-navbar .rd-nav-link{
  font-family:'Archivo',sans-serif; font-weight:600; font-size:13.5px;
  letter-spacing:.02em; color:var(--rd-forest);
  transition:color .25s ease;
}
header.rd-navbar .rd-nav-link:hover{ color:var(--rd-ember); }
header.rd-navbar .rd-nav-link.rd-active{ color:var(--rd-ember); }
header.rd-navbar .rd-icon-btn{ color:var(--rd-forest); transition:color .2s ease, background-color .2s ease; }
header.rd-navbar .rd-icon-btn:hover{ color:var(--rd-ember); background:var(--rd-stone); }
header.rd-navbar .rd-logo-img{ filter:none; }

.rd-btn-ember{
  background:var(--rd-ember); color:#fff; font-family:'Archivo',sans-serif; font-weight:700;
  letter-spacing:.02em; font-size:13.5px;
  padding:.7rem 1.5rem; border-radius:4px; display:inline-flex; align-items:center; gap:.5rem;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  box-shadow:0 10px 24px -10px rgba(232,93,44,.6);
  border:none; cursor:pointer;
}
.rd-btn-ember:hover{ background:var(--rd-ember-deep); transform:translateY(-1px); color:#fff; }

.rd-btn-outline-forest{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Archivo',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase;
  border:1.5px solid var(--rd-forest); color:var(--rd-forest);
  padding:.75rem 1.25rem; border-radius:4px; background:transparent;
  transition:background-color .2s ease, color .2s ease; cursor:pointer;
}
.rd-btn-outline-forest:hover{ background:var(--rd-forest); color:#fff; }

.rd-btn-mapy{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase;
  border:1.5px solid var(--rd-mapy); color:#fff;
  padding:.75rem 1.25rem; border-radius:4px; background:var(--rd-mapy);
  box-shadow:0 10px 24px -12px rgba(70,153,68,.55);
  transition:background-color .2s ease, transform .2s ease; cursor:pointer;
}
.rd-btn-mapy:hover{ background:#3a8038; transform:translateY(-1px); }

/* =========================================================================
   TOPO / GPS decorative pattern — 1:1 z redesign-home.css
   ========================================================================= */
.rd-topo-pattern{
  position:relative;
  background-image:
    repeating-radial-gradient(circle at 15% 20%, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, transparent 1px, transparent 34px),
    repeating-radial-gradient(circle at 85% 75%, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, transparent 1px, transparent 46px);
}

/* =========================================================================
   HERO
   ========================================================================= */
.rd-hero{
  position:relative; min-height:60vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--rd-ink);
}
.rd-hero-bg{ position:absolute; inset:0; z-index:0; }
.rd-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.rd-hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(14,21,18,.35) 0%, rgba(14,21,18,.25) 35%, rgba(14,21,18,.94) 100%);
}
.rd-hero-content{ position:relative; z-index:10; width:100%; padding:6.5rem 0 3.25rem; }
.rd-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.28); border-radius:999px;
  padding:.5rem .95rem; margin-bottom:1.3rem;
}
.rd-eyebrow-dot{ width:5px; height:5px; border-radius:999px; background:var(--rd-ember); flex-shrink:0; }
.rd-hero h1{
  font-family:'Bebas Neue',sans-serif; text-transform:uppercase; color:#fff; line-height:.92;
  letter-spacing:.01em; font-size:clamp(2.6rem,7vw,5.2rem); margin:0; max-width:20ch;
}
.rd-hero p{ color:rgba(255,255,255,.82); font-size:1.05rem; line-height:1.65; max-width:38rem; margin:1.1rem 0 0; }
.rd-hero-stats{ display:flex; gap:2.5rem; margin-top:2.25rem; padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.15); flex-wrap:wrap; }
.rd-hero-stat-num{ font-family:'Archivo',sans-serif; font-weight:800; font-size:1.6rem; color:#fff; }
.rd-hero-stat-label{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:.25rem; }

/* =========================================================================
   SECTION HEAD
   ========================================================================= */
.routes-section{ padding:5rem 0; }
.rd-section-head{ text-align:center; max-width:40rem; margin:0 auto 3rem; }
.rd-section-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rd-ember); display:inline-block; margin-bottom:1rem;
}
.rd-section-head h2{ font-family:'Archivo',sans-serif; font-weight:800; font-size:2.2rem; letter-spacing:-.02em; margin:0 0 .75rem; color:var(--rd-ink); }
.rd-section-head p{ color:var(--rd-muted); font-size:1.02rem; line-height:1.6; margin:0; }

/* =========================================================================
   FILTERS — .filter-btn / data-level: hooki JS bez zmian
   ========================================================================= */
.routes-filter{ display:flex; justify-content:center; gap:.65rem; margin-bottom:3.5rem; flex-wrap:wrap; }
.filter-btn{
  font-family:'Archivo',sans-serif; font-weight:600; font-size:13px; letter-spacing:.02em;
  padding:.65rem 1.4rem; border-radius:999px; border:1.5px solid var(--rd-line);
  background:#fff; color:var(--rd-forest); cursor:pointer; transition:all .25s ease;
}
.filter-btn:hover{ border-color:var(--rd-ember); color:var(--rd-ember); }
.filter-btn.active{ background:var(--rd-ember); border-color:var(--rd-ember); color:#fff; }

/* =========================================================================
   ROUTE CARDS — .route-card / data-level: hooki JS bez zmian.
   JS ustawia inline style display:'grid' przy filtrowaniu — dlatego
   .route-card MUSI mieć display:grid jako wartość domyślną.
   ========================================================================= */
.routes-grid{ display:flex; flex-direction:column; gap:2.5rem; margin-top:0; }
.route-card{
  display:grid; grid-template-columns:1.05fr 1fr; gap:0;
  background:#fff; border:1px solid var(--rd-line); border-radius:6px; overflow:hidden;
}
.route-card:nth-child(even){ direction:rtl; }
.route-card:nth-child(even) > *{ direction:ltr; }

.route-image{
  position:relative; min-height:340px; overflow:hidden; margin:0; border:none; box-shadow:none; transform:none;
}
.route-image img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }

.route-difficulty{
  position:absolute; top:1.1rem; left:1.1rem; z-index:5;
  font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(255,255,255,.94); border-radius:999px; padding:.35rem .8rem; color:var(--rd-forest);
  border:none; box-shadow:none; backdrop-filter:blur(6px);
}
.route-difficulty.easy{ color:#3f7d52; }
.route-difficulty.medium{ color:var(--rd-ember-deep); }

.route-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(14,21,18,0); opacity:1; transition:background .3s ease;
}
.route-image:hover .route-overlay{ background:rgba(14,21,18,.28); }
.btn-play{
  display:inline-flex; align-items:center; gap:.55rem; background:rgba(255,255,255,.95); color:var(--rd-ink);
  font-family:'Archivo',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:.75rem 1.3rem; border-radius:999px; border:none; cursor:pointer;
  opacity:0; transform:translateY(6px); transition:all .3s ease; box-shadow:none;
}
.route-image:hover .btn-play{ opacity:1; transform:translateY(0); }
.btn-play i{ font-size:1rem; }

.route-stats,
.route-title-section,
.route-description{
  grid-area:unset; padding:0; margin:0; border:none; background:none; text-align:left;
}
.route-body{ padding:2.25rem 2.25rem 2rem; display:flex; flex-direction:column; }
.route-number{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--rd-muted);
  text-transform:uppercase; margin:0 0 .6rem; font-weight:500;
}
.route-title{
  font-family:'Archivo',sans-serif; font-weight:800; font-size:1.35rem; line-height:1.22; letter-spacing:-.005em;
  color:var(--rd-ink); margin:0 0 1.1rem; text-align:left; text-transform:none;
}
.route-stats{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.25rem; flex-direction:row; align-items:center; justify-content:flex-start; }
.route-stats .stat{
  display:inline-flex; align-items:center; gap:.4rem; font-family:'JetBrains Mono',monospace; font-size:11.5px;
  color:var(--rd-forest); background:var(--rd-stone); border:1px solid var(--rd-line); border-radius:999px; padding:.4rem .8rem;
}
.route-stats .stat i{ color:var(--rd-forest); font-size:.85rem; }
.route-stats .stat.bike-type{ color:#3f7d52; border-color:rgba(63,125,82,.25); background:rgba(63,125,82,.08); }
.route-stats .stat.bike-type i{ color:#3f7d52; }
.route-stats .stat:nth-child(2),
.route-stats .stat:nth-child(3){ color:var(--rd-forest); border-color:var(--rd-line); background:var(--rd-stone); }

.route-description p{ color:var(--rd-muted); font-size:.94rem; line-height:1.7; margin:0 0 1.25rem; }
.route-description strong{ color:var(--rd-ink); font-weight:600; }
.route-description a{ color:var(--rd-ember); text-decoration:underline; text-decoration-color:rgba(232,93,44,.35); }

.route-highlights{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:.5rem; margin-bottom:1.5rem; }
.route-highlights span{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'Archivo',sans-serif; font-weight:600; font-size:11.5px; color:var(--rd-forest);
  background:#fff; border:1px solid var(--rd-line); border-radius:999px; padding:.35rem .75rem;
  box-shadow:none;
}
.route-highlights i{ color:var(--rd-mapy); font-size:.85rem; }

.route-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:auto; }
.route-actions .btn{
  flex:none; padding:.7rem 1.15rem; font-size:12px; font-weight:700; border-radius:4px;
  text-transform:uppercase; letter-spacing:.03em; border:1.5px solid transparent;
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; text-decoration:none;
}
.route-actions .btn-primary{ background:var(--rd-ember); color:#fff; border-color:var(--rd-ember); box-shadow:0 10px 24px -12px rgba(232,93,44,.55); }
.route-actions .btn-primary:hover{ background:var(--rd-ember-deep); }
.route-actions .btn-outline{ background:transparent; color:var(--rd-forest); border-color:var(--rd-forest); }
.route-actions .btn-outline:hover{ background:var(--rd-forest); color:#fff; }
.route-actions .btn-secondary{ background:var(--rd-mapy); color:#fff; border-color:var(--rd-mapy); box-shadow:0 10px 24px -12px rgba(70,153,68,.55); }
.route-actions .btn-secondary:hover{ background:#3a8038; }

@media(max-width:860px){
  .route-card,
  .route-card:nth-child(even){ grid-template-columns:1fr; direction:ltr; }
  .route-image{ min-height:260px; }
  .route-body{ padding:1.75rem 1.5rem; }
}

/* =========================================================================
   MODAL — restyling KOSMETYCZNY.
   Widget trassy.pl (Bootstrap col-xl-6) daje mapę i wideo obok siebie
   TYLKO gdy iframe ma min-width:1200px. max-width:1200px + ramka 1px
   dawały ~1198px i układ pionowy. Box musi być wyraźnie szerszy niż 1200px.
   NIE używamy globalnej .modal-content (styles.css: max-width:28rem).
   Mechanizm display:none/flex sterowany przez JS pozostaje bez zmian.
   ========================================================================= */
.route-modal{
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(8,12,10,.82); z-index:1000; align-items:center; justify-content:center; padding:12px;
}
.route-modal-box{
  background:var(--rd-surface); border-radius:10px;
  width:min(1400px,100%); max-width:1400px; margin:0;
  max-height:90vh; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);
  display:flex; flex-direction:column;
  border:0;
}
.modal-header{
  display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.5rem;
  background:var(--rd-stone); border-bottom:1px solid var(--rd-line); flex-shrink:0;
}
.modal-header h3{ font-family:'Archivo',sans-serif; font-weight:700; font-size:.98rem; color:var(--rd-ink); margin:0; }
.modal-body{
  flex:1 1 auto; min-height:0; overflow:hidden;
  display:flex; flex-direction:column;
}
.modal-map{ width:100%; height:80vh; min-height:0; overflow:hidden; background:#0b100e; }
.modal-map iframe{ width:100%; height:100%; border:0; display:block; }
.modal-close{
  width:30px; height:30px; border-radius:999px; background:#fff; border:1px solid var(--rd-line);
  display:flex; align-items:center; justify-content:center; color:var(--rd-muted); font-size:14px; cursor:pointer;
  transition:all .2s ease;
}
.modal-close:hover{ color:var(--rd-ember); border-color:var(--rd-ember); }

@media(max-width:768px){
  .route-modal{ padding:0; }
  .route-modal-box{ height:100vh; max-height:100vh; border-radius:0; width:100%; max-width:none; }
  .modal-map{ height:auto; flex:1; }
}

/* =========================================================================
   MAP TOAST — restyling kosmetyczny, mechanizm .visible bez zmian
   ========================================================================= */
.map-toast{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9);
  background:rgba(14,21,18,.95); color:#fff; padding:1.1rem 1.75rem; border-radius:999px;
  font-family:'Archivo',sans-serif; font-size:.95rem; font-weight:600; text-align:center; z-index:2000;
  opacity:0; visibility:hidden; transition:all .5s cubic-bezier(.4,0,.2,1);
  box-shadow:0 20px 60px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.1);
  pointer-events:none; display:flex; align-items:center; gap:.75rem; white-space:nowrap;
}
.map-toast.visible{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.map-toast i{ color:var(--rd-ember); font-size:1.1rem; }
@media(max-width:768px){
  .map-toast{ font-size:.85rem; padding:.9rem 1.4rem; width:90%; white-space:normal; }
}

/* =========================================================================
   FOOTER — 1:1 z redesign-blog.css / redesign-cennik.css
   ========================================================================= */
footer.rd-footer{ background:var(--rd-ink) !important; color:rgba(255,255,255,.72) !important; }
footer.rd-footer h3{
  font-family:'Archivo',sans-serif !important; font-weight:700 !important; font-size:1rem !important;
}
footer.rd-footer a:hover{ color:var(--rd-ember) !important; }
.rd-footer-bottom{ background:rgba(0,0,0,.15); }

::selection{ background:var(--rd-ember); color:#fff; }

@media (prefers-reduced-motion: reduce){
  .route-card, .route-image img, .btn-play{ transition:none !important; }
}