/*
Theme Name: Teraz Włocławek PRO
Theme URI: https://terazwloclawek.pl
Author: Teraz Włocławek
Description: W pełni responsywny motyw portalowy. Układ Grid 70/30, system etykiet newsów i optymalizacja pod Google News.
Version: 0.6.8
License: GNU General Public License v2 or later
Text Domain: terazwloclawek-pro
*/

:root {
  /* Kolory bazowe */
  --tw-bg: #ffffff;
  --tw-surface: #ffffff;
  --tw-text: #1a1a1a;
  --tw-muted: #777777;
  --tw-border: #eeeeee;
  
  /* Kolory akcentowe */
  --tw-top-green: #86ad00;
  --tw-red: #ed1c24;
  --tw-orange: #d97706;
  --tw-blue: #06A2CB;
  --tw-yellow: #f59e0b; /* Kolor dla etykiety NOWE */
  
  /* Typografia */
  --tw-font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --tw-font-heading: 'Poppins', sans-serif;

  /* Zmienne dynamiczne (nadpisywane przez functions.php) */
  --tw-logo-w-desktop: 240px;
  --tw-logo-w-mobile: 180px;
  --tw-header-pad-desktop: 15px;
  --tw-menu-font: 'Poppins', sans-serif;
}

/* ===== RESET & BAZA ===== */
* { box-sizing: border-box; }
body { 
    margin: 0; 
    font-family: var(--tw-font-main); 
    background: var(--tw-bg); 
    color: var(--tw-text); 
    line-height: 1.5; 
    -webkit-font-smoothing: antialiased; 
}
a { color: inherit; text-decoration: none; transition: 0.2s; }
img { max-width: 100%; height: auto; display: block; }

.container { 
    width: min(1200px, calc(100% - 30px)); 
    margin-inline: auto; 
}

/* ===== ETYKIETY (BADGES) ===== */
.tw-lbl {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  text-transform: uppercase;
}
.tw-lbl-urgent { background: var(--tw-red); }
.tw-lbl-important { background: var(--tw-orange); }
.tw-lbl-exclusive { background: var(--tw-blue); }
.tw-lbl-new { background: var(--tw-yellow); color: #000; } /* Ciemny tekst dla kontrastu */

/* ===== HEADER & NAWIGACJA ===== */
.tw-header { 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    background: #fff; 
    border-bottom: 1px solid var(--tw-border); 
    padding: 10px 0; 
}
.tw-header-inner { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 15px; 
}
.tw-logo img { 
    width: 100%;
    max-width: var(--tw-logo-w-mobile); 
}

.tw-menu { display: none; } /* Ukryte na mobile */

@media (min-width: 1024px) {
    .tw-logo img { max-width: var(--tw-logo-w-desktop); }
    .tw-header { padding: var(--tw-header-pad-desktop) 0; }
    .tw-menu { 
        display: flex; 
        gap: 15px; 
        list-style: none; 
        margin: 0; 
        padding: 0; 
        font-family: var(--tw-menu-font); 
        font-weight: 700; 
        font-size: 14px; 
    }
    .tw-menu a:hover { color: var(--tw-top-green); }
}

/* ===== STRONA GŁÓWNA - UKŁAD (GRID 70/30) ===== */
.tw-home-wrapper { margin-top: 25px; margin-bottom: 50px; }

/* Domyślnie 1 kolumna (Mobile) */
.tw-home-grid { display: flex; flex-direction: column; gap: 30px; }

/* Desktop: 2 kolumny */
@media (min-width: 1024px) {
    .tw-home-grid { 
        display: grid; 
        grid-template-columns: 1fr 340px; 
        align-items: start; 
    }
}

.tw-block-title { 
    font-family: var(--tw-font-heading); 
    font-size: 18px; 
    font-weight: 800; 
    margin: 0 0 12px 0; 
    text-transform: uppercase; 
    color: #333; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 5px; 
}
.tw-clr-green { color: var(--tw-top-green); border-bottom-color: var(--tw-top-green); }

/* LEWA KOLUMNA: TOP FEATURED */
.tw-top-featured-card { position: relative; width: 100%; overflow: hidden; }
.tw-featured-img-pnl { 
    position: relative; 
    width: 100%; 
    aspect-ratio: 16 / 9;
    background-size: cover; 
    background-position: center; 
    display: flex; 
    align-items: flex-end; 
    background-color: #f5f5f5;
}

.tw-featured-text-pnl { 
    padding: 15px; 
    width: 100%; 
    background: linear-gradient(transparent, rgba(0,0,0,0.85)); 
}

/* Data na zdjęciu */
.tw-featured-date-on-img { margin-bottom: 8px; }
.tw-featured-date-on-img time { color: #fff; font-size: 12px; font-weight: 400; opacity: 0.9; }

/* Tytuł na zielonym tle - poprawka nachodzenia linii */
.tw-featured-title { margin: 0; }
.tw-featured-title span { 
    background: var(--tw-top-green); 
    color: #fff; 
    padding: 4px 10px; 
    font-size: 19px; 
    line-height: 1.6; 
    font-family: var(--tw-font-heading); 
    font-weight: 900; 
    box-decoration-break: clone; 
    -webkit-box-decoration-break: clone; 
}

@media (min-width: 1024px) { 
    .tw-featured-img-pnl { height: 480px; aspect-ratio: auto; }
    .tw-featured-text-pnl { padding: 30px; } 
    .tw-featured-title span { 
        font-size: 32px; 
        padding: 6px 14px; 
        line-height: 1.7; /* Interlinia dla desktopa */
    } 
}

/* Licznik zdjęć */
.tw-badge-gallery { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background: var(--tw-top-green); 
    color: #fff; 
    padding: 4px 10px; 
    font-size: 13px; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    font-weight: 700; 
    z-index: 10;
}

/* PRAWA KOLUMNA: SIDEBAR (ZWARTY UKŁAD) */
.tw-side-featured-item { 
    display: flex; 
    gap: 12px; 
    margin-bottom: 6px; 
    padding-bottom: 8px; 
    border-bottom: 1px solid var(--tw-border); 
}
.tw-side-item-thumb img { 
    width: 85px; 
    height: 60px; 
    object-fit: cover; 
}
.tw-side-item-text h3 { 
    margin: 0; 
    font-size: 13px; 
    font-weight: 700; 
    line-height: 1.25; 
    color: #111; 
}

/* Lista punktowana */
.tw-side-news-list { list-style: none; padding: 0; margin: 0; }
.tw-side-news-list li { 
    padding: 5px 0; 
    border-bottom: 1px solid var(--tw-border); 
    display: flex; 
    align-items: flex-start; 
}
.tw-side-news-list li::before { 
    content: "•"; 
    color: #cccccc; 
    font-size: 24px; 
    margin-right: 10px; 
    line-height: 0.6; 
}
.tw-side-news-list a { 
    color: #333; 
    font-size: 13px; 
    font-weight: 400; 
    line-height: 1.35; 
}
.tw-side-news-list a:hover { color: var(--tw-top-green); }

/* Przycisk DAJ CYNK */
.tw-btn-cynk-red { 
    display: inline-block; 
    background: var(--tw-red); 
    color: #fff !important; 
    padding: 8px 16px; 
    font-weight: 800; 
    text-transform: uppercase; 
    font-size: 12px; 
    margin-top: 15px;
    border-radius: 2px;
}

@media (max-width: 1023px) {
    .tw-btn-cynk-red { display: block; text-align: center; padding: 12px; }
}

/* ===== FOOTER ===== */
.tw-footer { 
    background: #fff; 
    border-top: 1px solid var(--tw-border); 
    padding: 40px 0; 
    margin-top: 60px; 
    text-align: center; 
    color: var(--tw-muted); 
    font-size: 13px; 
}