/* ============================================================================
   Tenis Uživo — DESKTOP redesign (matches /tmp/mockup/home5.html + single5.html)
   DESKTOP ONLY. Everything is wrapped in @media (min-width:769px) so mobile is
   byte-identical to prod. Does NOT restyle the internals of protected widgets:
   tu-poll, live-score board, commentary, ATP/WTA rankings, comments, "Ostale
   vesti" slider — only places them in the new layout.
   ============================================================================ */
@media screen and (min-width: 769px) {

  /* ---- palette ---- */
  :root{
    --tu-page:#e7e9ec; --tu-card:#fff; --tu-ink:#1a1c20; --tu-ink2:#42464d; --tu-muted:#80858c;
    --tu-hair:#ececef; --tu-clay:#ca4f2e; --tu-teal:#2ea3b4; --tu-teal-d:#2c8c9b;
    --tu-sh:0 1px 2px rgba(18,22,30,.05),0 8px 24px rgba(18,22,30,.06);
    --tu-head:'Archivo',system-ui,sans-serif; --tu-sans:'Mulish',system-ui,sans-serif;
  }

  /* ---- page = grey, kill the old blue/white frames ----
     High specificity (html / html.tour-skin-on) so it beats the tournament-skin's
     inline `.tour-skin-on body{...!important}` injected after wp_head in header.php. */
  html body, html.tour-skin-on body { background:#e7e9ec !important; font-family:'Mulish',system-ui,sans-serif !important; }
  html .container, html.tour-skin-on .container,
  html #master_wrap, html.tour-skin-on #master_wrap,
  html #content_container, html #content_container_bg {
    background:#e7e9ec !important; border:0 !important; box-shadow:none !important;
  }

  /* ---- header: white, flat teal nav ---- */
  #header { background:#fff !important; }
  /* empty Google ad slot renders as a ~100px white band below the nav — not in the
     design; hide on desktop (revenue note: re-place the ad if wanted) */
  #header #header-box-ads { display:none !important; }
  #navigation, #navigation.blue { background:#2ea3b4 !important; background-image:none !important; border:0 !important; box-shadow:none !important; }
  #navigation a, #nav.sf-menu > li > a, #navigation .home {
    background:transparent !important; background-image:none !important; color:#fff !important;
    font-family:'Archivo',sans-serif !important; font-weight:700 !important; text-shadow:none !important;
  }
  #nav.sf-menu > li > a:hover, #navigation .home:hover { background:rgba(0,0,0,.08) !important; }
  #nav.sf-menu ul { background:#2ea3b4 !important; }
  /* clay brand top line */
  body::before { content:""; display:block; height:4px; background:#ca4f2e; }
  /* tagline: UPPERCASE, 2-line, left divider (matches mockup) */
  #header h2, #heading h2 { text-transform:uppercase !important; font:700 11px/1.45 'Archivo',sans-serif !important; letter-spacing:1.3px !important; color:var(--tu-muted) !important; border-left:2px solid var(--tu-hair) !important; padding-left:13px !important; max-width:150px !important; margin-top:8px !important; }
  /* clean nav: remove item dividers, push search to the far right edge */
  #nav.sf-menu > li { border:0 !important; background:none !important; }
  #navigation #finish-nav-border { display:none !important; }
  #navigation { position:relative !important; }
  #navigation .menu-search-trazi { position:absolute !important; right:6px !important; top:0 !important; }

  /* ---- CONTENT = one white card ---- */
  #content_container #content {
    background:#fff !important; border-radius:12px !important; box-shadow:var(--tu-sh) !important;
    overflow:hidden !important; width:654px !important; margin:0 20px 0 0 !important;
    box-sizing:border-box !important; padding:0 !important;
  }
  /* kill empty junk that produced the white band */
  #content #featured_posts, #content #slider, #content > br, #content .tu-board--mobile-only { display:none !important; }

  /* ---- CAROUSEL hero, flush at the top of the card ---- */
  #content .wpcp-carousel-section, #content .wpcp-carousel-wrapper {
    margin:0 !important; border-radius:0 !important; background:transparent !important; padding:0 !important;
  }
  #content .wpcp-slide-image, #content .wpcp-slide-image a { display:block !important; }
  #content .wpcp-slide-image img { width:100% !important; height:344px !important; object-fit:cover !important; display:block !important; border-radius:0 !important; }
  #content .wpcp-all-captions { position:static !important; background:#fff !important; padding:20px 28px 22px !important; margin:0 !important; box-shadow:none !important; }
  #content .wpcp-post-title { margin:0 !important; }
  #content .wpcp-post-title, #content .wpcp-post-title a { color:var(--tu-clay) !important; font:800 28px/1.13 'Archivo',sans-serif !important; letter-spacing:-.3px !important; text-shadow:none !important; }
  #content .wpcp-next-button, #content .wpcp-prev-button, #content .swiper-button-next, #content .swiper-button-prev {
    width:42px !important; height:42px !important; border-radius:50% !important; background:rgba(20,17,13,.55) !important; color:#fff !important; margin-top:-150px !important;
  }
  #content .wpcp-next-button:after, #content .wpcp-prev-button:after, #content .swiper-button-next:after, #content .swiper-button-prev:after { font-size:16px !important; color:#fff !important; }

  /* ---- GRID = real even 2-col grid (not floats) ---- */
  #content div#posts.blue {
    display:grid !important; grid-template-columns:1fr 1fr !important; gap:0 !important;
    background:transparent !important; padding:0 !important; border:0 !important; float:none !important; width:auto !important;
  }
  #posts .page-navigation { display:none !important; }
  /* "Najnovije vesti" section header (clay dot + label), spans both columns */
  #content div#posts.blue::before {
    content:"Najnovije vesti"; grid-column:1 / -1; order:-1;
    font:800 12px/1 'Archivo',sans-serif; letter-spacing:1.3px; text-transform:uppercase; color:var(--tu-ink);
    padding:18px 22px 18px 42px; border-top:1px solid var(--tu-hair); background:#fbfbfc;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><circle cx='4' cy='4' r='4' fill='%23ca4f2e'/></svg>");
    background-repeat:no-repeat; background-position:24px center;
  }
  #content div#posts .post {
    float:none !important; width:auto !important; background:#fff !important; border:0 !important;
    box-sizing:border-box !important; padding:20px 22px !important; margin:0 !important;
    border-bottom:1px solid var(--tu-hair) !important;
    display:flex !important; flex-direction:column !important;   /* stack + reorder children */
  }
  #content div#posts .post.left { border-right:1px solid var(--tu-hair) !important; }
  /* flatten the nested .min/.text so thumb/title/excerpt become reorderable flex items */
  .post .min, .post .text { display:contents !important; }
  /* exact mockup order: image (1) -> kicker (2) -> title (3) -> excerpt (4) */
  .post .thumb_cont { order:1 !important; display:block !important; width:100% !important; background:none !important; border:0 !important; padding:0 !important; margin:0 0 13px !important; }
  .post .categorie { order:2 !important; background:none !important; padding:0 !important; margin:0 0 8px !important; border:0 !important; }
  .post h2 { order:3 !important; margin:0 0 7px !important; }
  .post .text p { order:4 !important; }
  /* reset the old fixed 240x88 thumb box (HIGH specificity to beat #content #posts
     .post .text a.thumb {...} and its :hover span.hidden{display:block!important}) */
  #content #posts .post .text a.thumb,
  #content #posts .post .text a.thumb:hover,
  #content #posts .post a.thumb, .post .thumb_cont .thumb {
    display:block !important; width:100% !important; height:auto !important; min-height:0 !important;
    background:none !important; background-color:transparent !important; border:0 !important;
    padding:0 !important; margin:0 !important; position:static !important;
    overflow:hidden !important; border-radius:8px !important; float:none !important;
  }
  /* the lurking hover box "old thumbnail shit" — kill it at matching specificity */
  #content #posts .post .text a.thumb span.hidden,
  #content #posts .post .text a.thumb:hover span.hidden,
  .post .thumb .hidden { display:none !important; }
  .post .desktop-thumb { width:100% !important; height:158px !important; object-fit:cover !important; border-radius:8px !important; display:block !important; }
  .post .mobile-thumb { display:none !important; }
  .post .categorie h3 {
    color:var(--tu-teal-d) !important; font:800 11px/1.3 'Archivo',sans-serif !important;
    letter-spacing:.7px !important; text-transform:uppercase !important; margin:0 !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  }
  .post h2 a { color:var(--tu-clay) !important; font:700 17.5px/1.25 'Archivo',sans-serif !important; letter-spacing:-.2px !important; display:block !important; }
  .post .text p { color:var(--tu-muted) !important; font:400 13.5px/1.55 'Mulish',sans-serif !important; margin:0 !important;
    display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; }
  .post .more { display:none !important; }

  /* ---- SIDEBAR: place protected widgets as floating cards (internals untouched) ---- */
  #sidebar { background:transparent !important; width:370px !important; }
  #sidebar .tu-board, #sidebar .sidebar-notifikacije-btn, #sidebar .tu-poll, #sidebar .tutr-widget-container {
    border-radius:12px !important; box-shadow:var(--tu-sh) !important; overflow:hidden !important;
  }

  /* ============================ SINGLE ARTICLE (single5) ============================ */
  /* Article is #content > #postcontainer. Do NOT touch .related-section (Ostale vesti)
     or the comments block. */
  body.single #content_container #content { padding:30px 38px 38px !important; }
  body.single #content #postcontainer { background:transparent !important; }
  body.single #postcontainer h1, body.single #postcontainer .post-title, body.single .block h1 {
    color:var(--tu-clay) !important; font:800 33px/1.13 'Archivo',sans-serif !important; letter-spacing:-.4px !important;
  }
  /* body prose: identical to prod (arial #555 1.6) but 18px */
  body.single #content .block p, body.single #postcontainer .block p {
    font:400 18px/1.6 arial,Helvetica,sans-serif !important; color:#555 !important;
  }
  /* lead (first/bold paragraph) also 18px */
  body.single #content .block p:first-of-type, body.single #postcontainer .lead {
    font-weight:700 !important; font-size:18px !important;
  }
}