/* ============================================================================
   Tenis Uživo — DESKTOP redesign (clean rebuild, no legacy patching).
   Desktop (>=769px) renders fresh .tu-* markup from the templates; the legacy
   markup is hidden and only shown on mobile (<769px), which stays byte-identical.
   ============================================================================ */
@media screen and (min-width: 769px) {

  :root{
    --tu-page:#f1f1f1; --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;
  }

  /* ---- breakpoint toggle ---- */
  .tu-legacy-home { display:none !important; }
  .tu-home { display:block; }

  /* ---- page = grey (beat the tournament-skin inline override) ---- */
  html body, html.tour-skin-on body { background:#f1f1f1 !important; font-family:var(--tu-sans) !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:#f1f1f1 !important; border:0 !important; box-shadow:none !important; }
  body::before { content:""; display:block; height:4px; background:var(--tu-clay); }

  /* ---- header: hide legacy #header, render clean .tu-header ---- */
  #header { display:none !important; }
  html { overflow-x:clip; }                                          /* safety for the 100vw full-bleed below */
  .tu-header { display:block; background:#fff; width:100vw; margin-left:calc(50% - 50vw); }  /* full-bleed bg; .tu-wrap inside stays 1080 centered & aligned with content */
  .tu-wrap { max-width:1080px; margin:0 auto; padding:0 18px; box-sizing:border-box; }   /* 18px aligns the logo/nav with the content card */

  /* top bar: logo (top-left) + tagline (beside, divider) + players (bottom-right) */
  .tu-header__top { background:#fff; }
  .tu-header__top .tu-wrap { display:flex; align-items:flex-end; height:88px; }
  .tu-logo { align-self:flex-start; display:block; }
  .tu-logo img { height:60px; display:block; }
  .tu-tagline { align-self:flex-start; margin:19px 0 0 16px; padding-left:16px; border-left:2px solid var(--tu-hair); font:700 11px/1.45 var(--tu-head); letter-spacing:1.3px; text-transform:uppercase; color:var(--tu-muted); max-width:170px; }
  .tu-players { margin-left:auto; align-self:flex-end; }
  .tu-players img { height:80px; display:block; }

  /* nav bar (flat teal) */
  .tu-nav { background:var(--tu-teal); }
  .tu-nav .tu-wrap { display:flex; align-items:center; height:48px; position:relative; }
  .tu-nav__home { display:flex; align-items:center; color:#fff; padding:0 16px; height:48px; background:rgba(0,0,0,.10); }
  .tu-nav__menu { display:flex; list-style:none; margin:0; padding:0; }
  .tu-nav__menu > li { position:relative; }
  .tu-nav__menu > li > a { display:flex; align-items:center; gap:5px; color:#fff; font:700 13.5px/1 var(--tu-head); letter-spacing:.3px; padding:0 15px; height:48px; }
  .tu-nav__menu > li > a:hover { background:rgba(0,0,0,.08); }
  /* the WP menu already includes a "Traži" search item — hide it; the clean search at far-right replaces it */
  .tu-nav__menu .menu-search-trazi, .tu-nav__menu li[class*="search"] { display:none !important; }
  .tu-nav__menu > li.menu-item-has-children > a::after { content:""; width:7px; height:7px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); margin:-4px 0 0 4px; opacity:.85; }
  .tu-nav__menu ul.sub-menu { display:none; position:absolute; top:48px; left:0; min-width:210px; background:#fff; box-shadow:var(--tu-sh); list-style:none; margin:0; padding:6px 0; z-index:60; border-radius:0 0 8px 8px; }
  .tu-nav__menu li:hover > ul.sub-menu { display:block; }
  .tu-nav__menu ul.sub-menu a { display:block; padding:9px 16px; color:var(--tu-ink); font:600 13px/1.3 var(--tu-sans); }
  .tu-nav__menu ul.sub-menu a:hover { background:#f3f4f6; color:var(--tu-clay); }
  /* search pushed far right */
  .tu-nav__search { margin-left:auto; }
  .tu-nav__search summary { list-style:none; display:flex; align-items:center; gap:6px; color:#fff; font:700 13.5px/1 var(--tu-head); padding:0 15px; height:48px; cursor:pointer; }
  .tu-nav__search summary::-webkit-details-marker { display:none; }
  .tu-nav__search[open] summary { background:rgba(0,0,0,.08); }
  .tu-search { position:absolute; right:0; top:48px; background:#fff; box-shadow:var(--tu-sh); padding:10px; z-index:60; border-radius:0 0 8px 8px; }
  .tu-search input { border:1px solid var(--tu-hair); border-radius:6px; padding:8px 12px; width:240px; font:400 14px var(--tu-sans); }

  /* ---- layout: content column is transparent; the white card is .tu-main ---- */
  #content_container #content { background:transparent !important; box-shadow:none !important; border-radius:0 !important; width:654px !important; margin:0 20px 0 0 !important; padding:0 !important; }
  #sidebar { background:transparent !important; width:370px !important; }
  /* live-score board + Notifikacije: pinned by JS only AFTER the whole sidebar has
     scrolled past (not immediately); poll/rankings scroll normally above. */
  #sidebar .tu-sidebar-sticky { background:var(--tu-page); }
  #sidebar .tu-sidebar-sticky.tu-pinned { position:fixed; top:20px; z-index:50; animation:tu-rise .25s ease; }
  @keyframes tu-rise { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
  #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; }
  /* Google ad -> white card like the other widgets, 300px unit centered */
  #sidebar #quads-ad1_widget { background:var(--tu-card) !important; border-radius:12px !important; box-shadow:var(--tu-sh) !important; padding:16px !important; text-align:center !important; overflow:hidden !important; }
  #sidebar #quads-ad1_widget ins.adsbygoogle { margin-left:auto !important; margin-right:auto !important; }

  /* ============================ HOME (clean .tu-*) ============================ */
  .tu-main { background:var(--tu-card); border-radius:12px; box-shadow:var(--tu-sh); overflow:hidden; }

  /* carousel hero */
  .tu-kicker { display:block; font:800 11px/1.3 var(--tu-head); letter-spacing:1.1px; text-transform:uppercase; color:var(--tu-teal-d); }
  .tu-carousel { position:relative; overflow:hidden; }
  .tu-carousel__track { display:flex; transition:transform .45s ease; }
  .tu-slide { flex:0 0 100%; min-width:100%; }
  .tu-slide__media { display:block; }
  .tu-slide__media img { width:100%; height:344px; object-fit:cover; display:block; }
  .tu-slide__body { padding:20px 28px 22px; }
  .tu-slide__body .tu-kicker { color:var(--tu-clay); margin-bottom:9px; }
  .tu-slide__title { margin:0 0 11px; }
  .tu-slide__title a { color:var(--tu-clay); font:800 28px/1.13 var(--tu-head); letter-spacing:-.3px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .tu-slide__lead { margin:0; font:400 16px/1.6 var(--tu-sans); color:var(--tu-ink2);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  /* arrows */
  .tu-carousel__arrow { position:absolute; top:172px; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:0; background:rgba(20,17,13,.55); cursor:pointer; z-index:5; display:flex; align-items:center; justify-content:center; }
  .tu-carousel__arrow:hover { background:rgba(20,17,13,.78); }
  .tu-carousel__arrow--prev { left:14px; } .tu-carousel__arrow--next { right:14px; }
  .tu-carousel__arrow::before { content:""; width:11px; height:11px; border-top:2px solid #fff; border-right:2px solid #fff; }
  .tu-carousel__arrow--prev::before { transform:rotate(-135deg); margin-left:4px; }
  .tu-carousel__arrow--next::before { transform:rotate(45deg); margin-right:4px; }
  /* dots */
  .tu-carousel__dots { position:absolute; top:314px; left:50%; transform:translateX(-50%); display:flex; gap:7px; z-index:5; }
  .tu-carousel__dot { width:8px; height:8px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.6); cursor:pointer; transition:width .2s; }
  .tu-carousel__dot.is-active { background:#fff; width:22px; border-radius:4px; }

  /* section header */
  .tu-sechead { display:flex; align-items:center; gap:10px; padding:0 28px; height:48px; border-top:1px solid var(--tu-hair); background:#fbfbfc; }
  .tu-sechead__dot { width:8px; height:8px; border-radius:50%; background:var(--tu-clay); }
  .tu-sechead b { font:800 12px/1 var(--tu-head); letter-spacing:1.3px; text-transform:uppercase; color:var(--tu-ink); }

  /* grid */
  .tu-grid { display:grid; grid-template-columns:1fr 1fr; }
  .tu-card2 { padding:20px 22px; box-sizing:border-box; border-bottom:1px solid var(--tu-hair); }
  .tu-card2:nth-child(odd) { border-right:1px solid var(--tu-hair); }
  .tu-card2__media { display:block; margin-bottom:13px; }
  .tu-card2__media img { width:100%; height:158px; object-fit:cover; border-radius:8px; display:block; }
  .tu-card2 .tu-kicker { margin-bottom:7px; }
  .tu-card2__title { margin:0 0 7px; }
  .tu-card2__title a { color:var(--tu-clay); font:700 17.5px/1.25 var(--tu-head); letter-spacing:-.2px; }
  .tu-card2__excerpt { margin:0; font:400 13.5px/1.55 var(--tu-sans); color:var(--tu-muted); }

  /* infinite-scroll trigger — hidden; its <a href> next-page link is read by the JS */
  .tu-pagination { display:none; }
  #infscr-loading { text-align:center; padding:18px; opacity:.7; }

  /* ============= ARTICLE / PAGE card (single, live-prenos, biography) ============= */
  /* .tu-article = white card. comments + "Ostale vesti" + the live commentary internals
     stay untouched. heading (h1.title) + meta kept exactly as prod. */
  .tu-article { background:var(--tu-card); border-radius:12px; box-shadow:var(--tu-sh); padding:30px 18px 38px; }
  .tu-article > .excerpt.block { border:0; width:auto !important; }
  /* body prose -> 18px + #1b1614e6. The live commentary feed (.newSingle entries) is NOT
     resized — only article prose / lead / page content. */
  /* post content: 18px + #1b1614e6 uniformly across the whole post, EXCEPT the dark
     live-score commentary widget (keeps its own size + light text) */
  .tu-article p, .tu-article li { font-size:18px !important; line-height:1.6 !important; }
  .tu-article p, .tu-article li, .tu-article em, .tu-article strong { color:#1b1614e6 !important; }
  .tu-article .tu-live-score p, .tu-article .tu-live-score li, .tu-article .tu-live-score em, .tu-article .tu-live-score strong { font-size:inherit !important; color:inherit !important; }
  /* clean in-card caption (kill the beige strip) */
  .tu-article .t_imageBox { background:transparent !important; padding:0 !important; margin:0 0 8px !important; border:0 !important; }
  .tu-article .t_imageBox img { width:100% !important; max-width:100% !important; display:block !important; margin:0 !important; border-radius:8px !important; }
  .tu-article .t_imageBox_caption { background:transparent !important; border:0 !important; text-align:left !important; padding:9px 2px 0 !important; color:var(--tu-muted) !important; font:400 13.5px/1.5 var(--tu-sans) !important; }
  .tu-article .t_imageBox_caption:empty { display:none !important; }
  /* biography (no-sidebar page): content spans full width; card is a centered reading column */
  body.page-template-page-no-sidebar-thumb #content_container #content { width:auto !important; margin-right:0 !important; }
  body.page-template-page-no-sidebar-thumb .tu-article { max-width:820px; margin:0 auto; }
}

/* mobile keeps the legacy layout; hide the clean desktop markup */
@media screen and (max-width: 768px) { .tu-home, .tu-header { display:none; } }
