/* Podstránky webu karatebruntal.cz — články (aktuality), fotoalba a jejich přehledy. Návrh „Aréna“ jako hlavní stránka. */
:root{
  --ink:#0E1220; --ink-2:#141A2C; --ink-3:#1B2338; --line:#273049;
  --aka:#D8232A; --aka-hi:#FF4D52; --ao:#1F5FD6; --ao-hi:#7FA8FF;
  --paper:#F2F4F8; --steel:#9AA3B8; --faint:#848DA3;
  --seam:linear-gradient(100deg, var(--aka) 0 50%, var(--ao) 50% 100%);
  --font-d:"Anton", "Arial Narrow", Impact, sans-serif;
  --font-t:"Barlow", "Helvetica Neue", Arial, sans-serif;
  --wrap:1180px;
}
*,*::before,*::after{ box-sizing:border-box; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
html,body{ overflow-x:clip; }
body{ margin:0; background:var(--ink); color:var(--paper); font-family:var(--font-t); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
      display:flex; flex-direction:column; min-height:100vh; }
img{ max-width:100%; display:block; height:auto; }
a{ color:var(--ao-hi); text-decoration:none; }
a:hover{ color:var(--paper); }
:focus-visible{ outline:2px solid var(--ao-hi); outline-offset:3px; }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--aka); color:#fff; padding:10px 18px; z-index:200; font-weight:600; }
.skip:focus{ left:12px; top:12px; }
[data-placeholder]:empty, .chip:empty{ display:none; }
img[data-optional]:not([src]), img[data-optional][src=""]{ display:none; }

/* ===== NAVIGACE (stejná jako na hlavní stránce, jen pořád s pozadím) ===== */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; background:rgba(14,18,32,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav-in{ display:flex; align-items:center; gap:28px; height:64px; }
.brand{ display:flex; align-items:center; gap:12px; color:var(--paper); }
.brand:hover{ color:var(--paper); }
.brand-logo{ width:44px; height:44px; flex:none; }
.brand-name{ font-family:var(--font-d); font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.brand-name small{ color:var(--faint); font-family:var(--font-t); font-weight:600; font-size:.7rem; letter-spacing:.2em; display:block; margin-top:1px; }
.nav-links{ display:flex; gap:2px; margin-left:auto; }
.nav-links a{ color:var(--steel); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; padding:8px 9px; }
.nav-links a:hover, .nav-links a[aria-current]{ color:var(--paper); }
.nav-links a[aria-current]{ box-shadow:inset 0 -2px 0 var(--aka); }
.btn{
  display:inline-block; position:relative; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:.85rem; padding:13px 26px; color:#fff; background:var(--aka); font-family:var(--font-t);
  transform:skewX(-6deg); transition:background .18s ease, transform .18s ease; border:0; cursor:pointer;
}
.btn > span{ display:inline-block; transform:skewX(6deg); }
.btn:hover{ background:#B5161D; color:#fff; transform:skewX(-6deg) translateY(-1px); }
.btn.ghost{ background:transparent; box-shadow:inset 0 0 0 2px var(--ao); color:var(--ao-hi); }
.btn.ghost:hover{ box-shadow:inset 0 0 0 2px var(--ao-hi); color:var(--paper); background:rgba(31,95,214,.12); }
.nav .btn{ padding:9px 18px; font-size:.78rem; flex:none; }
.burger{ display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:10px; }
.burger span{ display:block; width:26px; height:2px; background:var(--paper); margin:6px 0; transition:transform .2s ease, opacity .2s ease; }
.menu-overlay{ position:fixed; inset:0; z-index:90; background:rgba(14,18,32,.97); display:none; flex-direction:column; justify-content:center; padding:80px 32px 40px; }
.menu-overlay.open{ display:flex; }
.menu-overlay a{ font-family:var(--font-d); font-size:clamp(2rem,8vw,3.2rem); text-transform:uppercase; color:var(--paper); padding:8px 0; border-bottom:1px solid var(--line); }
.menu-overlay a:hover{ color:var(--aka-hi); }
.menu-overlay .btn{ margin-top:28px; align-self:flex-start; font-family:var(--font-t); font-size:.85rem; border-bottom:0; padding:13px 26px; }
body.menu-open{ overflow:hidden; }
body.menu-open .burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
@media (max-width: 1100px){ .nav-links, .nav .btn{ display:none; } .burger{ display:block; } }

/* ===== OBSAH PODSTRÁNKY ===== */
.sub-main{ flex:1; padding:118px 0 88px; position:relative; }
.sub-main::before{ content:""; position:absolute; inset:64px 0 auto 0; height:420px; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 70% at 0% 0%, rgba(216,35,42,.16), transparent 70%), radial-gradient(55% 70% at 100% 0%, rgba(31,95,214,.18), transparent 70%); }
.post{ max-width:900px; margin-inline:auto; padding-inline:24px; }
.post.album, .archive.albums-page{ max-width:var(--wrap); }
.archive{ max-width:980px; margin-inline:auto; padding-inline:24px; }
.back{ display:inline-flex; align-items:center; gap:8px; color:var(--steel); font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; }
.back:hover{ color:var(--paper); }
.post-head{ margin-top:30px; }
.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0; color:var(--faint); font-weight:700; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; }
.post-meta::before{ content:""; width:26px; height:3px; background:var(--seam); flex:none; }
.post-date{ font-variant-numeric:tabular-nums; }
.chip{ display:inline-block; background:var(--aka); color:#fff; font-weight:700; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; padding:5px 10px; }
.post-title{ margin:.3em 0 0; font-family:var(--font-d); font-weight:400; text-transform:uppercase; font-size:clamp(2.3rem, 6.4vw, 4.2rem); line-height:1.02; letter-spacing:.01em; text-wrap:balance; overflow-wrap:anywhere; }
.post-perex{ margin:20px 0 0; max-width:40em; color:#C6CCDA; font-size:1.2rem; line-height:1.55; }
.post-cover{ margin:36px 0 0; border:1px solid var(--line); background:var(--ink-3); }
.post-cover:has(img[data-optional]:not([src])), .post-cover:has(img[data-optional][src=""]){ display:none; }
.post-cover img{ width:100%; cursor:zoom-in; }
.post-cover figcaption{ padding:10px 14px; color:var(--faint); font-size:.85rem; }

/* text článku */
.post-body{ margin-top:36px; max-width:44em; color:#D5DAE5; font-size:1.06rem; line-height:1.72; overflow-wrap:break-word; }
.post-body > :first-child{ margin-top:0; }
.post-body p{ margin:0 0 1.1em; }
.post-body h2{ margin:1.7em 0 .5em; font-family:var(--font-d); font-weight:400; text-transform:uppercase; font-size:1.75rem; line-height:1.1; letter-spacing:.02em; color:var(--paper); }
.post-body h3{ margin:1.5em 0 .4em; font-size:1.2rem; line-height:1.3; color:var(--paper); }
.post-body ul, .post-body ol{ margin:0 0 1.1em; padding-left:1.4em; }
.post-body li{ margin:.25em 0; }
.post-body li::marker{ color:var(--aka-hi); font-weight:700; }
.post-body a{ color:var(--ao-hi); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.post-body a:hover{ color:var(--paper); }
.post-body strong, .post-body b{ color:var(--paper); }
.post-body blockquote{ margin:1.4em 0; padding:4px 0 4px 20px; border-left:3px solid var(--aka); color:var(--steel); font-style:italic; }
.post-body figure{ margin:1.9em 0; }
.post-body figure img{ width:100%; border:1px solid var(--line); cursor:zoom-in; }
.post-body figcaption{ margin-top:8px; color:var(--faint); font-size:.88rem; }
.post-body figcaption:empty{ display:none; }

/* ===== FOTKY (album i galerie článku) ===== */
.album-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; margin-top:40px; }
.post .album-grid:empty{ display:none; }
.post.album .album-grid:empty{ display:block; }
.post.album .album-grid:empty::before{ content:"Fotky se sem teprve chystají."; color:var(--faint); }
.g-item{ position:relative; display:block; width:100%; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); background:var(--ink-3); cursor:zoom-in; padding:0; font:inherit; color:inherit; }
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.g-item:hover img, .g-item:focus-visible img{ transform:scale(1.05); }
.g-item .cap{ position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px; text-align:left;
  background:linear-gradient(180deg, transparent, rgba(10,14,26,.9)); color:var(--paper); font-weight:600; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease; }
.g-item .cap:empty{ display:none; }
.g-item:hover .cap, .g-item:focus-visible .cap{ opacity:1; transform:none; }

/* ===== SDÍLENÍ ===== */
.share{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-top:52px; padding-top:22px; border-top:1px solid var(--line); }
.share > span{ color:var(--faint); font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin-right:4px; }
.share a, .share button{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line); background:none; color:var(--paper);
  font:600 .82rem var(--font-t); letter-spacing:.06em; cursor:pointer; }
.share a:hover, .share button:hover, .share a:focus-visible, .share button:focus-visible{ border-color:var(--ao-hi); color:var(--paper); }

/* ===== PŘEHLED AKTUALIT ===== */
.archive h1{ margin:.3em 0 0; font-family:var(--font-d); font-weight:400; text-transform:uppercase; font-size:clamp(2.6rem, 7vw, 4.6rem); line-height:1; }
.archive .lead{ color:var(--steel); max-width:40em; margin:14px 0 0; }
.year{ display:flex; align-items:center; gap:14px; margin:52px 0 16px; font-family:var(--font-d); font-weight:400; font-size:1.7rem; letter-spacing:.04em; color:var(--paper); }
.year::after{ content:""; flex:1; height:1px; background:var(--line); }
.news-list{ display:flex; flex-direction:column; gap:14px; }
.news-row{ position:relative; display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:18px; align-items:start; padding:20px 22px;
  background:var(--ink-3); border:1px solid var(--line); border-left:3px solid var(--ao); transition:border-color .18s ease, transform .18s ease; }
.news-row:hover{ border-left-color:var(--aka); transform:translateX(3px); }
.news-date{ margin:0; color:var(--ao-hi); font-weight:700; font-size:.86rem; letter-spacing:.06em; font-variant-numeric:tabular-nums; padding-top:2px; }
.news-row h3{ margin:0 0 4px; font-size:1.08rem; font-weight:700; letter-spacing:.01em; }
.news-row h3 a{ color:var(--paper); }
.news-row h3 a::after{ content:""; position:absolute; inset:0; }
.news-row:hover h3 a{ color:var(--ao-hi); }
.news-row p{ margin:0; color:var(--steel); font-size:.94rem; }
.news-row .chip{ margin-bottom:8px; }
.news-thumb{ width:150px; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line); }
.empty{ color:var(--faint); margin-top:40px; }

/* ===== ALBA ===== */
.albums{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; margin-top:8px; }
.album-card{ position:relative; display:flex; flex-direction:column; background:var(--ink-3); border:1px solid var(--line); color:var(--paper); transition:border-color .18s ease, transform .18s ease; }
.album-card:hover{ border-color:var(--ao-hi); color:var(--paper); transform:translateY(-3px); }
.album-cover{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--ink-2); }
.album-cover img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.album-card:hover .album-cover img{ transform:scale(1.04); }
.album-count{ position:absolute; left:12px; bottom:12px; background:rgba(10,14,26,.86); color:var(--paper); font-weight:700; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; padding:5px 9px; }
.album-info{ display:block; padding:16px 18px 20px; border-top:3px solid var(--aka); }
.album-card:nth-child(even) .album-info{ border-top-color:var(--ao); }
.album-date{ display:block; color:var(--faint); font-weight:700; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; }
.album-title{ display:block; margin-top:4px; font-family:var(--font-d); font-weight:400; text-transform:uppercase; font-size:1.35rem; line-height:1.12; letter-spacing:.02em; overflow-wrap:anywhere; }
.post.album .post-meta .album-count{ position:static; background:none; padding:0; font-size:inherit; letter-spacing:inherit; color:var(--faint); }

/* ===== PATIČKA ===== */
footer{ border-top:1px solid var(--line); padding:30px 0 42px; }
.foot{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; color:var(--faint); font-size:.85rem; }
.foot .brand-logo{ width:30px; height:30px; }
.foot a{ color:var(--steel); }
.foot a:hover{ color:var(--paper); }

/* ===== ZVĚTŠENÁ FOTKA ===== */
.lb{ position:fixed; inset:0; z-index:150; background:rgba(8,10,18,.95); display:none; align-items:center; justify-content:center; padding:34px; }
.lb.open{ display:flex; }
.lb figure{ margin:0; max-width:min(1100px, 94vw); }
.lb img{ max-width:100%; max-height:80vh; object-fit:contain; border:1px solid var(--line); margin-inline:auto; }
.lb figcaption{ text-align:center; margin-top:14px; color:var(--steel); font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; }
.lb-close{ position:absolute; top:18px; right:18px; background:var(--ink-3); border:1px solid var(--line); color:var(--paper); font:700 1rem var(--font-t);
  padding:10px 16px; cursor:pointer; letter-spacing:.1em; text-transform:uppercase; }
.lb-close:hover{ border-color:var(--aka-hi); color:var(--aka-hi); }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; display:grid; place-items:center;
  background:var(--ink-3); border:1px solid var(--line); color:var(--paper); font:600 1.5rem/1 var(--font-t); cursor:pointer; }
.lb-nav:hover, .lb-nav:focus-visible{ border-color:var(--aka-hi); color:var(--aka-hi); }
.lb-prev{ left:18px; }
.lb-next{ right:18px; }
.lb-count{ position:absolute; top:28px; left:24px; margin:0; color:var(--steel); font-weight:700; font-size:.8rem; letter-spacing:.16em; }
.lb.single .lb-nav{ display:none; }

@media (max-width: 860px){
  .albums{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .news-thumb{ display:none; }
  .news-row{ grid-template-columns:110px minmax(0,1fr); }
}
@media (max-width: 600px){
  body{ font-size:16px; }
  .brand-logo{ width:38px; height:38px; }
  .sub-main{ padding:100px 0 64px; }
  .post-perex{ font-size:1.08rem; }
  .post-body{ font-size:1rem; }
  .albums{ grid-template-columns:1fr; gap:16px; }
  .album-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; margin-top:28px; }
  .news-row{ grid-template-columns:1fr; gap:4px; }
  .lb{ padding:70px 12px 96px; }
  .lb-nav{ top:auto; bottom:22px; transform:none; }
  .lb-prev{ left:calc(50% - 64px); }
  .lb-next{ right:calc(50% - 64px); }
}
@media print{ .nav, .menu-overlay, .share, .lb, .back{ display:none !important; } body{ background:#fff; color:#000; } .sub-main{ padding-top:0; } }