@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --navy: #14213D;
  --navy-2: #1E3057;
  --paper: #F7F4EC;
  --paper-2: #EFEAE0;
  --card: #FFFFFF;
  --gold: #B8894B;
  --gold-dark: #93692F;
  --forest: #2F6F52;
  --forest-bg: #E7F0EA;
  --ink: #1F2430;
  --slate: #6B7280;
  --line: #E4DFD3;
  --line-dark: #2A3B63;
  --radius: 14px;
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--gold-dark);
  font-weight:600;
}

/* ===== HEADER ===== */
.top-strip{
  background: var(--navy);
  color: #C9D2E6;
  font-family: var(--font-mono);
  font-size:11.5px;
  letter-spacing:.03em;
}
.top-strip .wrap{
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 28px;
}
.top-strip span.dot{color:var(--gold); margin:0 6px;}

header.main{
  background: var(--navy);
  color:#fff;
  border-bottom: 1px solid var(--line-dark);
  position:sticky; top:0; z-index:50;
}
header.main .wrap{
  display:flex; align-items:center; gap:36px;
  padding:16px 28px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-size:24px; font-weight:600; letter-spacing:.01em;
  color:#fff;
}
.brand .mark{
  width:34px; height:34px; border-radius:50%;
  background: radial-gradient(circle at 32% 30%, #E7C48A, var(--gold) 55%, var(--gold-dark) 100%);
  border:2px dashed rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:700; font-size:13px; color:var(--navy);
}
nav.primary{display:flex; gap:28px; font-size:14.5px; font-weight:500;}
nav.primary a{color:#D7DDEB; padding:6px 0; border-bottom:2px solid transparent;}
nav.primary a:hover{color:#fff; border-color: var(--gold);}
.header-actions{margin-left:auto; display:flex; gap:12px; align-items:center;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:999px;
  font-size:13.5px; font-weight:600; cursor:pointer; border:none;
  font-family: var(--font-body);
}
.btn-gold{background: var(--gold); color:#fff;}
.btn-gold:hover{background: var(--gold-dark);}
.btn-ghost{background:transparent; color:#EDEDED; border:1px solid rgba(255,255,255,.28);}
.btn-ghost:hover{border-color:#fff; color:#fff;}
.btn-outline-navy{background:transparent; border:1.5px solid var(--navy); color:var(--navy);}
.btn-outline-navy:hover{background:var(--navy); color:#fff;}

/* ===== HERO ===== */
.hero{
  background:
    radial-gradient(1100px 420px at 85% -10%, rgba(184,137,75,.16), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff;
  padding:64px 0 84px;
}
.hero .wrap{display:grid; grid-template-columns: 1.15fr 0.85fr; gap:56px; align-items:center;}
.hero h1{
  font-family: var(--font-display);
  font-size:44px; line-height:1.12; font-weight:600; letter-spacing:-.01em;
  max-width:520px;
  margin:14px 0 16px;
}
.hero h1 em{font-style:italic; color:var(--gold);}
.hero p.lead{color:#C9D2E6; font-size:16px; max-width:460px; margin-bottom:30px;}

.search-panel{
  background:#fff; border-radius: var(--radius);
  padding:18px; box-shadow:0 24px 48px rgba(10,18,40,.35);
}
.search-row{display:flex; gap:10px;}
.search-row select, .search-row input{
  font-family: var(--font-body); font-size:14.5px; color:var(--ink);
  border:1.5px solid var(--line); border-radius:10px; padding:13px 14px;
  background: var(--paper);
}
.search-row input{flex:1.4;}
.search-row select{flex:1;}
.search-row .btn{padding:13px 22px; border-radius:10px; white-space:nowrap;}
.stat-row{display:flex; gap:28px; margin-top:24px;}
.stat-row .stat b{
  display:block; font-family: var(--font-mono); font-size:21px; color:#fff; font-weight:600;
}
.stat-row .stat span{font-size:12px; color:#A9B4CC;}

/* rotating "recently rated" showcase */
.rotator{
  position:relative; border-radius: 18px; overflow:hidden; height:400px;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
}
.rotator .slide{
  position:absolute; inset:0; opacity:0; transition:opacity .9s ease;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.rotator .slide.active{opacity:1;}
.rotator .slide .photo{
  position:absolute; inset:0;
}
.rotator .slide .photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,33,61,0) 30%, rgba(12,18,32,.92) 100%);
}
.rotator .slide .info{position:relative; padding:22px; z-index:2;}
.rotator .badge-live{
  position:absolute; top:16px; left:16px; z-index:3;
  background:rgba(20,33,61,.75); backdrop-filter: blur(3px);
  color:#fff; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  padding:6px 11px; border-radius:999px; display:flex; align-items:center; gap:7px;
}
.rotator .badge-live::before{
  content:""; width:7px; height:7px; border-radius:50%; background:#5FD08A;
  box-shadow:0 0 0 3px rgba(95,208,138,.25);
}
.rotator .info .cat{font-family:var(--font-mono); font-size:11px; color:var(--gold); letter-spacing:.06em; text-transform:uppercase;}
.rotator .info h4{font-family:var(--font-display); font-size:22px; font-weight:600; margin:4px 0 6px; color:#fff;}
.rotator .info .snippet{color:#D8DEEC; font-size:13.5px; max-width:340px;}
.rotator .dots{position:absolute; bottom:16px; right:18px; z-index:3; display:flex; gap:6px;}
.rotator .dots span{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); cursor:pointer;}
.rotator .dots span.active{background:#fff; width:20px; border-radius:5px;}

/* seal / stamp rating badge - signature element */
.seal{
  width:60px; height:60px; border-radius:50%;
  background:#fff;
  border:2px solid var(--gold);
  outline:2px dashed rgba(184,137,75,.55);
  outline-offset:3px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex-shrink:0;
}
.seal b{font-family:var(--font-mono); font-size:16px; color:var(--navy); line-height:1;}
.seal .stars{font-size:8px; color:var(--gold); letter-spacing:1px; margin-top:2px;}
.seal.sm{width:46px; height:46px;}
.seal.sm b{font-size:13px;}

/* ===== CATEGORY STRIP ===== */
.categories{padding:56px 0 8px;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:26px;}
.section-head h2{font-family:var(--font-display); font-size:28px; font-weight:600; margin-top:6px;}
.section-head a.all{font-size:13.5px; font-weight:600; color:var(--gold-dark); border-bottom:1.5px solid var(--gold);}
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.cat-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:20px; display:flex; gap:14px; align-items:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cat-card:hover{transform:translateY(-3px); box-shadow:0 12px 24px rgba(20,33,61,.08); border-color:var(--gold);}
.cat-card .icn{
  width:42px; height:42px; border-radius:10px; background:var(--forest-bg);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cat-card .icn svg{width:20px; height:20px; stroke:var(--forest); fill:none; stroke-width:1.7;}
.cat-card h5{font-size:14.5px; font-weight:700;}
.cat-card span{font-family:var(--font-mono); font-size:11.5px; color:var(--slate);}

/* ===== AD WIDGET generic ===== */
.ad-slot{
  border:1.5px dashed #C7BFA9; border-radius:12px;
  background:repeating-linear-gradient(135deg, #F1ECE0, #F1ECE0 10px, #EAE3D2 10px, #EAE3D2 20px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#8A7F63; text-align:center; gap:4px; padding:18px;
}
.ad-slot .eyebrow{color:#8A7F63;}
.ad-slot b{font-family:var(--font-mono); font-size:12.5px; color:#6B6248;}
.ad-slot small{font-size:11px;}

/* ===== TOP RATED + MAIN LAYOUT ===== */
.content-layout{padding:56px 0; display:grid; grid-template-columns: 1fr 320px; gap:44px;}
.top-list{display:flex; flex-direction:column; gap:12px;}
.rank-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; display:flex; align-items:center; gap:18px;
}
.rank-card .rank{
  font-family:var(--font-display); font-size:34px; font-weight:600; color:var(--line);
  width:44px; text-align:center; flex-shrink:0;
}
.rank-card:nth-child(-n+3) .rank{color:var(--gold);}
.rank-card .details{flex:1; min-width:0;}
.rank-card .row1{display:flex; align-items:center; gap:10px; margin-bottom:4px;}
.rank-card h4{font-size:16.5px; font-weight:700;}
.tag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em;
  background:var(--forest-bg); color:var(--forest); padding:3px 9px; border-radius:999px;
}
.rank-card p.excerpt{color:var(--slate); font-size:13.5px; max-width:520px;}
.rank-card .meta{font-family:var(--font-mono); font-size:11.5px; color:var(--slate); margin-top:6px;}
.rank-card .go{color:var(--gold-dark); font-size:13px; font-weight:600; flex-shrink:0;}
.rank-card.featured{
  background: linear-gradient(90deg, #FFFBF2, var(--card) 12%);
  border-color: var(--gold);
  border-left: 4px solid var(--gold);
}

.native-ad{
  grid-column:1/-1;
}
.native-ad-inner{
  display:flex; align-items:center; gap:18px; padding:16px 20px;
}

/* Sidebar */
.sidebar{display:flex; flex-direction:column; gap:24px;}
.side-box{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px;}
.side-box h3{font-family:var(--font-display); font-size:18px; margin-bottom:14px;}
.recent-item{display:flex; gap:11px; padding:11px 0; border-top:1px solid var(--line);}
.recent-item:first-child{border-top:none; padding-top:0;}
.recent-item .details h5{font-size:13.5px; font-weight:700;}
.recent-item .details .stars{color:var(--gold); font-size:11px; margin:2px 0;}
.recent-item .details p{font-size:12px; color:var(--slate);}
.recent-item .details time{font-family:var(--font-mono); font-size:10.5px; color:#A6A08C;}

.cta-box{
  background:var(--navy); color:#fff; border-radius:14px; padding:24px;
}
.cta-box h3{font-family:var(--font-display); font-size:19px; margin-bottom:8px;}
.cta-box p{font-size:13px; color:#C9D2E6; margin-bottom:16px;}

/* ===== BUSINESS CTA BANNER ===== */
.biz-banner{
  background: linear-gradient(120deg, var(--forest) 0%, #245a41 100%);
  color:#fff; border-radius:18px; padding:40px 44px;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  margin:12px 0 64px;
}
.biz-banner h3{font-family:var(--font-display); font-size:26px; font-weight:600; margin-bottom:8px;}
.biz-banner p{color:#DCEFE4; font-size:14.5px; max-width:460px;}

/* ===== FOOTER ===== */
footer{background:var(--navy); color:#B8C1D9; padding:52px 0 0;}
.foot-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; padding-bottom:36px; border-bottom:1px solid var(--line-dark);}
.foot-grid h5{color:#fff; font-size:13px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:14px; font-family:var(--font-mono); font-weight:600;}
.foot-grid li{margin-bottom:9px; font-size:13.5px;}
.foot-grid li a:hover{color:#fff;}
.foot-bottom{
  display:flex; justify-content:space-between; padding:20px 0;
  font-size:12px; font-family:var(--font-mono); color:#7D89A8;
}

/* obal SKUTEČNÉHO widgetu s reklamou — bez placeholder vzoru, jen zaoblení a vystředění obsahu */
.ad-widget{
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
}
.ad-widget img{ max-width:100%; height:auto; display:inline-block; border-radius:12px; }
.ad-widget-infeed{ grid-column: 1/-1; }

.leaderboard-ad{margin:36px 0;}

/* ===== MAGAZÍN ===== */
.article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.article-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease;
}
.article-card:hover{transform:translateY(-3px); box-shadow:0 14px 28px rgba(20,33,61,.10); border-color:var(--gold);}
.article-thumb{height:160px; background-size:cover; background-position:center;}
.article-body{padding:18px; display:flex; flex-direction:column; gap:6px;}
.article-body h3{font-family:var(--font-display); font-size:17px; font-weight:600; color:var(--ink); line-height:1.3;}
.article-body p{font-size:13.5px; color:var(--slate);}

@media(max-width:980px){
  .article-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .article-grid{grid-template-columns:1fr;}
}

/* ===== TABLET (≤980px) ===== */
@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .content-layout{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .rotator{height:320px;}
}

/* ===== MOBIL (≤640px) ===== */
@media(max-width:640px){
  .wrap{padding:0 16px;}

  /* horní lišta */
  .top-strip .wrap{flex-direction:column; align-items:flex-start; gap:2px; padding:8px 16px;}
  .top-strip{font-size:10.5px;}

  /* hlavička */
  header.main .wrap{flex-wrap:wrap; gap:12px; padding:12px 16px;}
  nav.primary{order:3; width:100%; overflow-x:auto; gap:18px; padding-bottom:2px; -webkit-overflow-scrolling:touch;}
  nav.primary a{white-space:nowrap;}
  .header-actions{margin-left:auto; gap:8px;}
  .header-actions .btn-ghost{display:none;} /* na mobilu necháváme jen primární akci */
  .brand{font-size:20px;}

  /* hero */
  .hero{padding:36px 0 48px;}
  .hero h1{font-size:30px; max-width:100%;}
  .hero p.lead{font-size:14.5px; max-width:100%;}
  .search-panel{padding:14px;}
  .search-row{flex-direction:column;}
  .search-row input, .search-row select, .search-row .btn{width:100%;}
  .stat-row{flex-wrap:wrap; gap:18px 28px;}
  .rotator{height:260px; border-radius:14px;}
  .rotator .info h4{font-size:18px;}

  /* kategorie */
  .cat-grid{grid-template-columns:1fr;}
  .section-head{flex-direction:column; align-items:flex-start; gap:10px;}

  /* karty firem / žebříček */
  .rank-card{flex-wrap:wrap; padding:16px;}
  .rank-card .rank{width:auto; font-size:26px;}
  .rank-card .details{min-width:0; flex-basis:100%; order:3;}
  .rank-card .go{order:2; margin-left:auto;}
  .rank-card .row1{flex-wrap:wrap; gap:6px;}
  .rank-card p.excerpt{max-width:100%;}

  /* postranní panel a widgety */
  .side-box{padding:16px;}
  .ad-slot{padding:14px;}

  /* CTA banner */
  .biz-banner{flex-direction:column; align-items:flex-start; padding:28px 22px; gap:16px;}
  .biz-banner .btn{width:100%; justify-content:center;}

  /* patička */
  .foot-grid{grid-template-columns:1fr; gap:24px; padding-bottom:24px;}
  .foot-bottom{flex-direction:column; gap:6px; text-align:left;}

  /* formuláře (přidat firmu, hodnocení) */
  .side-box form div[style*="display:flex"]{flex-direction:column; gap:0 !important;}
}