/* ==========================================================
   RozkladyJazdy - style.css
   Motyw inspirowany fizycznymi tablicami odjazdów (split-flap
   display): ciemny nagłówek, bursztynowe akcenty na godzinach,
   czytelna siatka miast i tabela rozkładu z przypiętą kolumną
   przystanków.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --ink:        #14171C;
  --ink-soft:   #3a3f46;
  --bg:         #F6F7F4;
  --surface:    #FFFFFF;
  --border:     #E1E5DF;
  --brand:      #36006d;   /* ciemny teal - nawiązanie do Wisłoka/Sanu */
  --brand-dark: #190032;
  --amber:      #F2A93B;   /* kolor "split-flap" na godzinach odjazdów */
  --amber-ink:  #3A2A05;
  --brand-green: #b3e229;
  --radius:     10px;
  --max-w:      1100px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-size:16px; line-height:1.55;
}
h1,h2,h3{
  font-family: 'Arial', sans-serif;
  font-weight:700; letter-spacing:.01em; line-height:1.1;
  margin:0 0 .5em;
}
h1{ font-size:clamp(1.8rem,4vw,2.6rem);  }
h2{ 
  line-height: 150%;
  margin: 16px 0px 8px 0;     
  font-size: 2.8rem;
  font-weight: 600;
}
p{font-family:'Inter',system-ui,-apple-system,sans-serif;}
a{ text-decoration:none; }
a:hover{ text-decoration:underline; }


.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 1.25rem; }

/* ---------- Header ---------- */
.site-header{ background:var(--brand-dark); color:#fff; padding:.9rem 0; }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; }
.site-header .logo{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.3rem;
  color:#fff; text-transform:uppercase; letter-spacing:.03em;
}
.main-nav a{ color:#fff; opacity:.9; font-weight:500; }
.main-nav a:hover{ opacity:1; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{ background:var(--surface); border-bottom:1px solid var(--border); font-size:.85rem; }
.breadcrumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:.6rem 0; color:var(--ink-soft); }
.breadcrumbs li:not(:last-child)::after{ content:"›"; margin-left:.4rem; color:var(--ink-soft); }
.breadcrumbs li[aria-current="page"]{ color:var(--ink); font-weight:600; }

.page-content{ padding:2rem 1.25rem 3rem; min-height:60vh; }
.lead{ color:var(--ink-soft); max-width:65ch; }

/* ---------- Wyszukiwarka przystanków ---------- */
.stop-search{
  display:flex; gap:.5rem; margin:1.5rem 0; max-width:520px;
}
.stop-search label{ position:absolute; left:-9999px; }
.stop-search input{
  flex:1; padding:1.2rem 1.5rem; border:2px solid var(--border); border-radius:var(--radius);
  font-size:1rem; font-family:inherit; font-size: 1.5rem;
}
.stop-search input:focus{ border-color:var(--brand); }
.stop-search button{
  background:var(--brand); color:#fff; border:none; padding:1.2rem 4rem;;
  border-radius:var(--radius); font-weight:600; cursor:pointer; font-family:inherit;
  font-size: 1.4rem;
}
.stop-search button:hover{ background:var(--brand-dark); }

/* ---------- Siatka miast ---------- */
.city-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin:1.5rem 0;
}
.city-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.25rem; display:flex; flex-direction:column; gap:.6rem;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.city-card:hover{
  transform:translateY(-2px); box-shadow:0 6px 18px rgba(11,93,107,.12);
  border-color:var(--brand); text-decoration:none;
}
.city-card h2{ margin:0; font-size:2.2rem; }
.city-card__cta{ color:var(--brand); font-weight:600; font-size: 1.4rem; }

/* ---------- Blok operatora / linie ---------- */
.operator-block{ margin:2rem 0; padding-top:1rem; border-top:1px solid var(--border); }
.route-badges{ display:flex; flex-wrap:wrap; gap:.5rem; }
.route-badge{
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .75rem;
  border-radius:6px; border:1px solid rgba(0,0,0,.08); font-weight:600; font-size: 1.4rem;;
}

.route-badge strong{ font-family:'JetBrains Mono',monospace; color: #FFF;}
.route-badge span{ font-weight:400; font-size: 1.4rem; }

.notice{
  background:#FFF7E8; border:1px solid #F3D896; color:#6B4A00;
  padding:.9rem 1rem; border-radius:var(--radius); max-width:65ch;
}

/* ---------- Strona linii: zakładki kierunków ---------- */
.controls{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.75rem; margin:1.25rem 0;
}
.direction-tabs{ display:flex; gap:.4rem; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.25rem; }
.direction-tabs a{
  padding:.5rem 1rem; border-radius:999px; color:var(--ink-soft); font-weight:600; font-size: 1.4rem;
}
.direction-tabs a.active{ background:var(--brand); color:#fff; }
.direction-tabs a:hover{ text-decoration:none; }
.toggle-all{ font-size:1.4rem; color:var(--ink-soft); text-decoration:underline; }
.operator-sub{ color:var(--ink-soft); margin-top:-.5rem; }

/* ---------- Tabela rozkładu (split-flap) ---------- */
.timetable-scroll{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
table.timetable{ border-collapse:collapse; width:100%; font-family:'JetBrains Mono',monospace; font-size:.85rem; }
table.timetable th, table.timetable td{ padding:.5rem .7rem; text-align:center; border-bottom:1px solid var(--border); white-space:nowrap; }
table.timetable thead th{ background:var(--brand-dark); color:var(--amber); font-weight:700; position:sticky; top:0; }
table.timetable .stop-col{
  text-align:left; font-family:'Inter',sans-serif; font-weight:500; position:sticky; left:0;
  background:var(--surface); border-right:2px solid var(--border); min-width:180px;
}
table.timetable thead th.stop-col{ background:var(--brand-dark); color:#fff; }
table.timetable tbody tr{font-size: 1.4rem;}
table.timetable tbody tr:nth-child(even) td:not(.stop-col){ background:#FAFBF9; }
table.timetable tbody tr:hover td{ background:#FFF3DC; }

/* ---------- Tablica odjazdów przystanku ---------- */
table.departures-board{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
table.departures-board th{ background:var(--brand-dark); color:#fff; text-align:left; padding:.6rem .9rem; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:.85rem; letter-spacing:.04em; }
table.departures-board td{ padding:.6rem .9rem; border-bottom:1px solid var(--border); }
table.departures-board tr:last-child td{ border-bottom:none; }
.dep-time{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1.05rem;
  background:var(--amber); color:var(--amber-ink); border-radius:6px; text-align:center;
}
.route-chip{
  display:inline-block; padding:.15rem .55rem; border-radius:4px; font-weight:700;
  font-family:'JetBrains Mono',monospace; font-size:.85rem; border:1px solid rgba(0,0,0,.1);
}

/* ---------- Wyniki wyszukiwania ---------- */
.search-results{ list-style:none; padding:0; max-width:520px; }
.search-results li{ padding:.6rem 0; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; gap:1rem; }
.search-results a{  font-size: 1.7rem;}
.muted{ color:var(--ink-soft); font-size: 1.3rem; }

/* ---------- Blok SEO ---------- */
.seo-block{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border); color:var(--ink-soft); max-width:75ch; }
.seo-block h2{ font-size:2rem; }
.seo-block p{ color:var(--ink-soft); }

/* ---------- Stopka ---------- */
.site-footer{ background:var(--brand-dark); color:#C9D6D8; padding:1.5rem 0; font-size:.85rem; }
.site-footer .attribution{ margin:0 0 .5rem; opacity:.85; }
.site-footer a{ color:#fff; }

/* ---------- Responsywność ---------- */
@media (max-width: 640px){
  .stop-search{ flex-direction:column; max-width:none; }
  .controls{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}


/*------------------------------------------- */

.container-1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: auto;
    position: relative;
    max-width: 1255px;
    width: 92%;
    margin: auto;
    margin-top: 20px;
    padding: 100px 20px;
}

@media(max-width:1024px) {
    .container-1 {
        
        padding: 50px 10px;
    }
}