/* layout.css — Page structure and grid system */

/* ─── Page Shell ─────────────────────────────────────── */
.page-wrapper {
  max-width: 1280px;
  margin:    0 auto;
  padding:   0 1.5rem;
}

/* ─── Masthead ─────────────────────────────────────────── */
.masthead {
  background:    var(--white);
  color:         var(--ink);
  padding:       0;
}

.masthead-inner {
  position:        relative;
  max-width:       1280px;
  margin:          0 auto;
  padding:         0 1.5rem;
}

.masthead-brand {
  display: block;
  text-align: center;
  height: clamp(110px, 16vw, 140px);
  overflow: hidden;
  position: relative;
}

.site-logo {
  height: clamp(180px, 26vw, 240px);
  width: auto;
  display: block;
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  object-fit: contain;
}

.masthead-date {
  position:       absolute;
  right:          1.5rem;
  bottom:         10px;
  font-family:    var(--font-ui);
  font-size:      var(--text-xs);
  font-weight:    600;
  color:          var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .masthead {
    padding-bottom: 0.75rem;
  }
  .masthead-brand {
    height: clamp(80px, 12vw, 100px);
    margin-bottom: 0.25rem;
  }
  .site-logo {
    height: clamp(130px, 20vw, 160px);
    top: -20px;
  }
  .masthead-date {
    position: static;
    text-align: center;
    margin-top: 0.25rem;
    display: block;
  }
}





.nav-links {
  display:         flex;
  gap:             0;
  flex:            1;
  overflow-x:      auto;
  scrollbar-width: none;
  white-space:     nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-links::-webkit-scrollbar {
  display:         none;
}

.nav-links a {
  font-family:    var(--font-ui);
  font-size:      var(--text-sm);
  font-weight:    600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--ink);
  padding:        0.9rem 1rem;
  position:       relative;
  transition:     color 0.15s;
}

.nav-links a::after {
  content:    '';
  position:   absolute;
  bottom:     0; left: 50%; right: 50%;
  height:     2px;
  background: var(--accent-red);
  transition: left 0.2s, right 0.2s;
}

.nav-links a:hover { color: var(--accent-red); }
.nav-links a:hover::after, .nav-links a.active::after { left: 0; right: 0; }
.nav-links a.active { color: var(--accent-red); }



.tab-switcher-bar {
  background:    var(--masthead-bg);
  border-bottom: 2px solid var(--accent-red);
  padding:       0;
}

.tab-switcher-bar .nav-links {
  max-width:     1280px;
  margin:        0 auto;
  padding:       0 1.5rem;
}

.tab-switcher-bar .nav-links a {
  color:         #e0e0e0;
}

.tab-switcher-bar .nav-links a:hover,
.tab-switcher-bar .nav-links a.active {
  color:         var(--white);
}

/* ─── Breaking News Ticker ──────────────────────────── */
.ticker-bar {
  background:    var(--accent-red);
  color:         var(--white);
  display:       flex;
  align-items:   center;
  overflow:      hidden;
  font-family:   var(--font-ui);
  font-size:     var(--text-sm);
  height:        2.2rem;
}

.ticker-label {
  background:  #900;
  padding:     0 1rem;
  font-weight: 700;
  font-size:   var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  height:      100%;
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

.ticker-track {
  flex:    1;
  overflow: hidden;
  position: relative;
  height:  100%;
}

.ticker-content {
  display:   flex;
  gap:       3rem;
  height:    100%;
  align-items: center;
  white-space: nowrap;
  animation: tickerScroll 30s linear infinite;
}

@keyframes tickerScroll {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}

.ticker-content:hover { animation-play-state: paused; }
.ticker-item a { color: var(--white); font-weight: 500; }
.ticker-item a:hover { text-decoration: underline; }
.ticker-dismiss {
  padding:     0 0.75rem;
  color:       rgba(255,255,255,0.7);
  font-size:   1.2rem;
  flex-shrink: 0;
  cursor:      pointer;
}
.ticker-dismiss:hover { color: var(--white); }

/* ─── Newspaper Homepage Grid ───────────────────────── */
.homepage-grid {
  display:               grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap:                   0;
  padding:               1.5rem 0;
  border-top:            3px solid var(--ink);
  border-bottom:         1px solid var(--rule);
  margin:                1rem 0;
}

.col-divider {
  background: var(--rule);
  margin:     0;
}

.hero-col    { padding: 0 1.5rem; }
.middle-col  { padding: 0 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-col { padding: 0 1.5rem; }

/* ─── Section Header ─────────────────────────────────── */
.section-header {
  display:         flex;
  align-items:     center;
  gap:             0.75rem;
  margin:          2rem 0 1.25rem;
  border-top:      3px solid var(--ink);
  padding-top:     0.5rem;
}

.section-header h2 {
  font-size:   var(--text-xl);
  font-weight: 700;
}

.section-header-line {
  flex:        1;
  height:      1px;
  background:  var(--rule);
  margin-left: 0.5rem;
}

/* ─── Post Cards Grid ───────────────────────────────── */
.posts-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   0;
  border-top:            1px solid var(--rule);
}

.posts-grid .post-card {
  border-right:  1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding:       1.25rem;
}

.posts-grid .post-card:nth-child(4n) { border-right: none; }

/* ─── Newsletter Subscribe Section ─────────────────── */
.subscribe-section {
  background:  var(--ink);
  color:       var(--white);
  text-align:  center;
  padding:     3rem 1.5rem;
  margin:      2rem 0;
}

.subscribe-section h2 {
  font-family: var(--font-serif);
  color:       var(--white);
  font-size:   var(--text-3xl);
  margin-bottom: 0.5rem;
}

.subscribe-form {
  display:         flex;
  max-width:       480px;
  margin:          1.5rem auto 0;
  gap:             0;
  border:          1px solid #444;
}

.subscribe-form input {
  flex:        1;
  padding:     0.75rem 1rem;
  background:  transparent;
  border:      none;
  color:       var(--white);
  font-family: var(--font-ui);
  font-size:   var(--text-base);
  outline:     none;
}

.subscribe-form input::placeholder { color: #888; }

.subscribe-form button {
  background:    var(--accent-red);
  color:         var(--white);
  padding:       0.75rem 1.5rem;
  font-family:   var(--font-ui);
  font-size:     var(--text-sm);
  font-weight:   600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:    background 0.15s;
}

.subscribe-form button:hover { background: var(--accent-dark); }

/* ─── Footer ─────────────────────────────────────────── */
.site-footer {
  background:  var(--masthead-bg);
  color:       #aaa;
  padding:     3rem 0 1.5rem;
  margin-top:  2rem;
}

.footer-inner {
  max-width:  1280px;
  margin:     0 auto;
  padding:    0 1.5rem;
}

.footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   3rem;
  padding-bottom:        2rem;
  border-bottom:         1px solid #333;
  margin-bottom:         1.5rem;
}

.footer-brand-name {
  font-family: var(--font-serif);
  font-size:   var(--text-2xl);
  color:       var(--white);
  margin-bottom: 0.5rem;
}

.footer-tagline { font-size: var(--text-sm); margin-bottom: 1.2rem; }
.footer-social   { display: flex; gap: 0.75rem; }
.footer-social a {
  width:       32px; height: 32px;
  background:  #222;
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       #aaa;
  transition:  background 0.15s, color 0.15s;
  font-size:   var(--text-sm);
}
.footer-social a:hover { background: var(--accent-red); color: var(--white); }

.footer-col h4 {
  font-family:    var(--font-ui);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--white);
  margin-bottom:  1rem;
}

.footer-col ul li { margin-bottom: 0.5rem; }
.footer-col ul a { font-size: var(--text-sm); transition: color 0.15s; }
.footer-col ul a:hover { color: var(--white); }

.footer-bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       var(--text-xs);
  flex-wrap:       wrap;
  gap:             0.5rem;
}

/* ─── Reading Progress Bar ───────────────────────────── */
#reading-progress {
  position:   fixed;
  top:        0; left: 0;
  width:      0%;
  height:     3px;
  background: var(--accent-red);
  z-index:    9999;
  transition: width 0.1s linear;
}

/* ─── Advertiser Slider Box ──────────────────────────── */
.ad-slider-box {
  width:           100%;
  max-width:       300px;
  height:          250px;
  margin:          1.5rem auto;
  position:        relative;
  background:      var(--paper-dark);
  border:          1px solid var(--rule);
  overflow:        hidden;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.ad-slider-track {
  width:    100%;
  height:   100%;
  position: relative;
}

.ad-slide {
  position:       absolute;
  top:            0;
  left:           0;
  width:          100%;
  height:         100%;
  opacity:        0;
  transition:     opacity 0.6s ease-in-out;
  display:        flex;
  align-items:    center;
  justify-content: center;
  pointer-events: none;
}

.ad-slide.active {
  opacity:        1;
  pointer-events: auto;
}

.ad-slide a {
  display:         block;
  width:           100%;
  height:          100%;
  text-decoration: none;
}

.ad-slide img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.ad-placeholder-graphic {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--white);
  font-family:     var(--font-ui);
  font-size:       var(--text-sm);
  font-weight:     600;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  text-align:      center;
  padding:         1rem;
}

/* ─── Related Grid ───────────────────────────────────── */
#related-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0;
  border-top:            1px solid var(--rule);
}

/* ─── Gutter (Skyscraper) Ads ─────────────────────────── */

/* Homepage: side ads on screens 1600px and up */
@media (min-width: 1600px) {
  .page-wrapper:not([style*="860px"]) {
    position: relative;
    --content-width: 1280px;
  }

  .page-wrapper:not([style*="860px"]) #ad-box-1,
  .page-wrapper:not([style*="860px"]) #ad-box-2 {
    position:        absolute !important;
    top:             0;
    margin:          0 !important;
    z-index:         10;
    --gutter-center: calc(25vw - var(--content-width) / 4);
    --ad-width:      clamp(150px, calc(0.7 * (50vw - var(--content-width) / 2)), 420px);
    width:           var(--ad-width) !important;
    aspect-ratio:    1 / 1;
    height:          auto !important;
  }

  .page-wrapper:not([style*="860px"]) #ad-box-1 {
    right: calc(100% + var(--gutter-center) - var(--ad-width) / 2) !important;
    left:  auto !important;
  }

  .page-wrapper:not([style*="860px"]) #ad-box-2 {
    left:  calc(100% + var(--gutter-center) - var(--ad-width) / 2) !important;
    right: auto !important;
  }
}

/* Article Page: side ads on screens 1200px and up */
@media (min-width: 1200px) {
  .page-wrapper[style*="860px"] {
    position: relative;
    --content-width: 860px;
  }

  .page-wrapper[style*="860px"] #ad-box-1,
  .page-wrapper[style*="860px"] #ad-box-2 {
    position:        absolute !important;
    top:             0;
    margin:          0 !important;
    z-index:         10;
    --gutter-center: calc(25vw - var(--content-width) / 4);
    --ad-width:      clamp(150px, calc(0.7 * (50vw - var(--content-width) / 2)), 420px);
    width:           var(--ad-width) !important;
    aspect-ratio:    1 / 1;
    height:          auto !important;
  }

  .page-wrapper[style*="860px"] #ad-box-1 {
    right: calc(100% + var(--gutter-center) - var(--ad-width) / 2) !important;
    left:  auto !important;
  }

  .page-wrapper[style*="860px"] #ad-box-2 {
    left:  calc(100% + var(--gutter-center) - var(--ad-width) / 2) !important;
    right: auto !important;
  }
}