/* ==========================================================================
   wyborcza.pl — design tokens (sampled from reference screenshots)
   ========================================================================== */
:root {
  --red: #dc1a21;
  --red-dark: #b3151b;
  --black: #000000;
  --gray-meta: #8b8b8b;
  --gray-date: #707070;
  --gray-section-bg: #f0efec;
  --gray-divider: #e5e5e5;
  --gray-border: #cccccc;
  --green-check: #08a453;
  --white: #ffffff;

  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--black);
  background: var(--white);
}

a { color: inherit; }

#container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main-content {
  flex: 1;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px 60px;
}

.section-heading {
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 400;
  color: #6b6b6b;
  font-size: 34px;
  margin: 40px 0 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--black);
}

/* ==========================================================================
   Offer bar (decorative, non-home pages only)
   ========================================================================== */
.offerbar {
  background: var(--red);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: bold;
  flex-wrap: wrap;
  text-align: center;
}

.offerbar-text strong { text-decoration: underline; }

.offerbar-btn {
  background: var(--white);
  color: var(--red);
  border: none;
  border-radius: 3px;
  padding: 6px 14px;
  font-weight: bold;
  font-size: 13px;
  cursor: default;
}

/* ==========================================================================
   Masthead
   ========================================================================== */
.masthead-top {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.masthead-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.icon-btn {
  background: none;
  border: none;
  color: var(--black);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 4px;
}

.burger-menu { display: none; }

.masthead-center { justify-self: center; }

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--black);
}

.logo-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.logo-wordwrap {
  display: flex;
  flex-direction: column;
}

.logo-word {
  font-family: var(--font-serif);
  font-weight: bold;
  font-size: 34px;
  line-height: 1;
}

.logo-tagline {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #8b8b8b;
  margin-top: 4px;
}

.masthead-right {
  justify-self: end;
}

.login-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--black);
  white-space: nowrap;
}

/* ==========================================================================
   Nav row
   ========================================================================== */
.navbar {
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
}

.nav-links {
  max-width: 1400px;
  margin: 0 auto;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 30px;
  justify-content: center;
}

.nav-links a {
  display: inline-block;
  text-decoration: none;
  color: var(--black);
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 3px solid transparent;
}

.nav-links a:hover {
  color: var(--red);
}

.nav-links a.active {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* ==========================================================================
   Ticker (top stories strip)
   ========================================================================== */
.ticker {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 18px 40px;
  border-bottom: 1px solid var(--gray-divider);
}

.ticker-item {
  display: flex;
  gap: 10px;
  text-decoration: none;
  color: var(--black);
}

.ticker-thumb {
  width: 60px;
  height: 44px;
  flex-shrink: 0;
  background: var(--gray-section-bg);
  overflow: hidden;
}

.ticker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ticker-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ticker-title {
  font-family: var(--font-sans);
  font-weight: bold;
  font-size: 13.5px;
  line-height: 1.3;
}

.ticker-item:hover .ticker-title { text-decoration: underline; }

.ticker-section {
  color: var(--red);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Homepage — lead stories
   ========================================================================== */
.home-lead {
  background: var(--gray-section-bg);
  display: grid;
  grid-template-columns: 1.7fr auto 1fr;
  gap: 30px;
  padding: 34px 40px;
  margin: 0 -40px;
}

.home-lead-divider {
  width: 1px;
  background: #cfcdc8;
}

.eyebrow {
  display: inline-block;
  color: var(--red);
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.home-lead-img, .home-side-img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.home-side-img { height: 220px; }

.home-lead-body { margin-top: 16px; }

.home-lead-title {
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1.15;
  margin: 0 0 14px;
}

.home-lead-title a, .home-side-title a { text-decoration: none; color: var(--black); }
.home-lead-title a:hover, .home-side-title a:hover { text-decoration: underline; }

.home-side-title {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.home-lead-desc {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 12px;
}

.home-lead-byline {
  display: inline-block;
  color: var(--gray-meta);
  font-size: 12.5px;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.home-lead-byline:hover { text-decoration: underline; }

/* ==========================================================================
   Homepage — card grid ("Další témata")
   ========================================================================== */
.home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 10px;
}

.home-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.home-card-link { display: block; text-decoration: none; }

.home-card-media {
  width: 100%;
  height: 170px;
  background: var(--gray-section-bg);
  overflow: hidden;
}

.home-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.home-card-section {
  display: inline-block;
  margin-top: 10px;
  color: var(--red);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.home-card-body { margin-top: 6px; }

.home-card-title {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.3;
  margin: 4px 0 8px;
}

.home-card-title a { text-decoration: none; color: var(--black); }
.home-card-title a:hover { text-decoration: underline; }

.home-card-byline {
  color: var(--gray-meta);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-decoration: none;
}

/* ==========================================================================
   List (rubrika) pages
   ========================================================================== */
.page-list {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.page-item {
  display: flex;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--gray-divider);
  text-decoration: none;
  color: var(--black);
}

.page-authors-container .page-item { display: flex; }

.page-image {
  width: 220px;
  height: 150px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--gray-section-bg);
}

.page-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-content { flex: 1; }

.page-meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 6px;
}

.page-eyebrow {
  color: var(--red);
  font-weight: bold;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

.page-byline {
  color: var(--black);
  font-weight: bold;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

.page-title {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 8px;
}

.page-item:hover .page-title { text-decoration: underline; }

.page-description { color: #333; margin: 0 0 8px; font-size: 15px; line-height: 1.4; }

.page-date { color: var(--gray-date); font-size: 13px; margin: 0; }

.button-container {
  display: flex;
  justify-content: center;
  margin: 30px auto;
}

#load-more {
  background: var(--red);
  color: var(--white);
  border: none;
  display: none;
  padding: 11px 26px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.03em;
  cursor: pointer;
  border-radius: 3px;
}

#load-more:hover { background: var(--red-dark); }

/* ==========================================================================
   Single article
   ========================================================================== */
.post {
  max-width: 760px;
  margin: 30px auto 0;
}

.post-eyebrow { display: block; text-align: left; }

.post-title {
  font-family: var(--font-serif);
  font-size: 42px;
  line-height: 1.15;
  margin: 0 0 20px;
}

.post-rule {
  border: none;
  border-top: 2px solid var(--black);
  width: 90px;
  margin: 0 0 18px;
}

.post-meta { margin-bottom: 10px; }

.post-date { color: var(--gray-date); font-size: 14px; }

.post-author {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--black);
  font-family: var(--font-serif);
  font-size: 16px;
  text-decoration: none;
  margin-bottom: 22px;
}

.post-author:hover { text-decoration: underline; }

.author-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.post-image { margin-bottom: 6px; }

.post-image-inner {
  width: 100%;
  height: 420px;
  overflow: hidden;
}

.post-image-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-alt {
  color: var(--gray-date);
  font-size: 13px;
  margin: 8px 0 0;
}

.image-alt-dot { color: var(--red); }

.post-audio-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--gray-border);
  border-radius: 22px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: bold;
  letter-spacing: 0.03em;
  color: #555;
  margin: 18px 0;
}

.post-description {
  font-family: var(--font-serif);
  font-weight: bold;
  font-size: 19px;
  line-height: 1.5;
  margin: 10px 0 22px;
}

.post-content {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.7;
  color: #1a1a1a;
}

.post-content p { margin: 0 0 20px; }

.post-content p:first-of-type::first-letter {
  float: left;
  font-size: 66px;
  line-height: 0.85;
  padding: 6px 10px 0 0;
  font-weight: bold;
}

.post-content a {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.related { max-width: 1400px; margin: 40px auto 0; }

/* ==========================================================================
   Search page
   ========================================================================== */
.search-page { max-width: 900px; margin: 0 auto; }

.search-form {
  display: flex;
  max-width: 520px;
  margin: 0 auto 30px;
  border: 2px solid var(--red-dark);
  border-radius: 4px;
  overflow: hidden;
}

.search-form input[type="search"] {
  border: none;
  padding: 12px 14px;
  font-size: 16px;
  outline: none;
  flex: 1;
  font-family: var(--font-sans);
}

.search-form button {
  background: var(--red);
  color: var(--white);
  border: none;
  padding: 12px 20px;
  font-weight: bold;
  cursor: pointer;
}

.search-form button:hover { background: var(--red-dark); }

.search-results-empty {
  text-align: center;
  color: #555;
}

.loading-container { display: flex; justify-content: center; }

.search-loading {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid var(--red);
  width: 60px;
  height: 60px;
  animation: spin 1.4s linear infinite;
  display: none;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ==========================================================================
   Authors
   ========================================================================== */
.page-authors-container {
  display: flex;
  flex-direction: column;
}

.page-authors-container .page-image {
  width: 90px;
  height: 90px;
  border-radius: 50%;
}

.page-authors-container .page-image img { border-radius: 50%; }

.single-author-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 0;
}

.single-author-box {
  display: flex;
  gap: 30px;
  align-items: center;
  max-width: 800px;
}

.single-author-icon { width: 160px; flex-shrink: 0; }
.single-author-icon img { width: 100%; border-radius: 50%; display: block; }

.single-author-details h1 {
  font-family: var(--font-serif);
  font-size: 30px;
  margin: 0 0 10px;
}

.single-author-bio { font-size: 16px; line-height: 1.6; color: #333; }

.author-posts { max-width: 900px; width: 100%; margin: 30px auto 0; }

@media (max-width: 700px) {
  .single-author-box { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   404
   ========================================================================== */
.error-page {
  text-align: center;
  padding: 80px 0;
  font-family: var(--font-serif);
}

.error-page a { color: var(--red); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--white);
  border-top: 5px solid var(--red);
  margin-top: 50px;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 40px 20px;
}

.footer-top { margin-bottom: 20px; }

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--black);
}

.footer-logo { width: 30px; height: 30px; }

.footer-brand-word {
  font-family: var(--font-serif);
  font-weight: bold;
  font-size: 24px;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.footer-col-title {
  margin: 0 0 10px;
  font-size: 15px;
  border-bottom: 2px solid var(--red);
  padding-bottom: 8px;
}

.footer-col-title a, .footer-col-title span {
  color: var(--black);
  text-decoration: none;
  font-weight: bold;
}

.footer-article-list { list-style: none; margin: 0; padding: 0; }

.footer-article-item { margin: 7px 0; font-size: 13.5px; }

.footer-article-item a { color: #222; text-decoration: none; }
.footer-article-item a:hover { text-decoration: underline; }

.footer-article-list--decorative li span { color: #555; }

.footer-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1px solid var(--gray-divider);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 3px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.02em;
  cursor: default;
}

.btn-red { background: var(--red); color: var(--white); }
.btn-black { background: var(--black); color: var(--white); }
.btn-outline { background: var(--white); color: var(--black); border: 1.5px solid var(--gray-border); }

.social-icons { display: flex; gap: 10px; margin-left: auto; }

.social-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.footer-divider {
  border: none;
  border-top: 1px solid var(--gray-divider);
  margin: 10px 0;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.02em;
  color: #222;
  margin-bottom: 14px;
}

.footer-fineprint {
  font-size: 12px;
  color: #777;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticker { grid-template-columns: repeat(2, 1fr); }
  .footer-columns { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .home-lead { grid-template-columns: 1fr; }
  .home-lead-divider { display: none; }
  .home-lead-img { height: 260px; }
}

@media (max-width: 760px) {
  #main-content { padding: 0 18px 40px; }
  .masthead-top { padding: 14px 18px; grid-template-columns: auto 1fr auto; }
  .logo-word { font-size: 24px; }
  .logo-tagline { display: none; }
  .login-btn span { display: none; }

  .burger-menu { display: inline-flex; }

  .nav-links {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 10px 0;
  }

  .nav-links.active { display: flex; }

  .ticker { grid-template-columns: 1fr; padding: 14px 18px; }
  .home-lead { margin: 0 -18px; padding: 24px 18px; }
  .home-grid { grid-template-columns: 1fr; }
  .page-item { flex-direction: column; }
  .page-image { width: 100%; height: 200px; }
  .footer-columns { grid-template-columns: repeat(2, 1fr); }
  .post-title { font-size: 30px; }
  .post-image-inner { height: 240px; }
}