/* ---------------------------------------------------------------------
   pages.css
   Supplementary styles for pages that did not exist in the original
   static design (single article, author, contact, static page, 404).
   Kept in a separate file, on purpose, so style.css -- extracted
   directly from the original HTML -- stays untouched and pixel-exact.
   Reuses the same CSS custom properties defined in style.css (:root).
   --------------------------------------------------------------------- */

.page-section{
  padding: 30px 0 60px;
}

/* ---- Single article ---- */
.single-article .archive-title{ margin-bottom: 14px; }
.single-article .article-meta{
  font-family:'Inter', sans-serif;
  font-size: 13px;
  color: var(--meta);
  margin-bottom: 22px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}
.single-article .article-figure{ margin-bottom: 24px; }
.single-article .article-figure img{
  width:100%;
  height:auto;
  display:block;
}
.single-article .article-figure figcaption{
  font-family:'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--meta);
  padding-top: 8px;
}
.single-article .article-body{ max-width: 760px; font-size: 17px; line-height: 1.7; }
.single-article .article-body p{ margin-bottom: 18px; }

/* ---- Article gallery (unlimited photos) ---- */
.single-article .article-gallery{ margin: 8px 0 26px; }
.single-article .article-gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 4px;
}
.single-article .article-gallery-item{ margin:0; }
.single-article .article-gallery-item img{
  width:100%;
  height:auto;
  display:block;
}
.single-article .article-gallery-item figcaption{
  font-family:'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--meta);
  padding: 8px 4px 0;
  line-height: 1.45;
}
.single-article .article-gallery-count{
  font-family:'Inter', sans-serif;
  font-size: 12px;
  color: var(--meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 10px;
}

/* ---- Author page ---- */
.author-header{
  display:flex;
  align-items:center;
  gap: 20px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 26px;
}
.author-header img{
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
}
.author-header h1{
  font-family:'Playfair Display', serif;
  font-weight: 700;
  font-size: 26px;
}
.author-header .author-title{
  font-family:'Inter', sans-serif;
  font-size: 13px;
  color: var(--meta);
  margin-top: 4px;
}
.author-bio{ max-width: 640px; color: var(--ink-soft); }

/* ---- Static page / contact ---- */
.static-page .article-body{ max-width: 760px; font-size: 17px; line-height: 1.7; }
.contact-form{ max-width: 480px; display:flex; flex-direction:column; gap: 14px; margin-top: 20px; }
.contact-form label{ font-family:'Inter', sans-serif; font-size: 13px; font-weight:600; }
.contact-form input,
.contact-form textarea{
  font-family:'Inter', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
}
.contact-form textarea{ min-height: 140px; resize: vertical; }
.contact-form button{
  align-self:flex-start;
  background: var(--masthead-red);
  color: var(--paper);
  border: none;
  padding: 10px 22px;
  font-family:'Inter', sans-serif;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  font-size: 12px;
  cursor:pointer;
}
.contact-form button:hover{ background:#8C1D19; }

/* ---- 404 ---- */
.error-page{
  text-align:center;
  padding: 90px 0 110px;
}
.error-page .error-code{
  font-family:'Playfair Display', serif;
  font-weight:900;
  font-size: clamp(64px, 12vw, 130px);
  color: var(--masthead-red);
  line-height:1;
}
.error-page h1{
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size: 24px;
  margin: 10px 0 16px;
}
.error-page p{ color: var(--ink-soft); margin-bottom: 26px; }
.error-page .btn-home{
  display:inline-block;
  background: var(--masthead-red);
  color: var(--paper);
  padding: 10px 22px;
  font-family:'Inter', sans-serif;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  font-size: 12px;
}
.error-page .btn-home:hover{ background:#8C1D19; }

/* ---- Ad slot (components/advertisement.php) ----
   Compact frames: any image size is cropped (object-fit: cover) into a
   short box matching that placement's standard banner size, and a
   placeholder fills it until a banner exists.

   Standard web banner sizes used here:
   - Header / Footer: 728x90 leaderboard (kept short)
   - In-article / in-feed: 700x90 billboard
   - Sidebar square: 300x250 (square, kept square)
   - Popup: 300x100 slim bar at the screen edge */
.ad-slot{ text-align:center; margin: 16px 0; }
.ad-slot__frame{
  display:block;
  width:100%;
  max-width: 728px;
  height: 90px;
  margin: 0 auto;
  overflow:hidden;
  position:relative;
  background: var(--rule);
  border: 1px solid var(--rule);
  text-decoration: none;
}
.ad-slot--in_feed_native .ad-slot__frame{
  max-width: 700px;
  height: 90px;
}
.ad-slot--sidebar_square .ad-slot__frame,
.ad-slot--sidebar .ad-slot__frame{
  max-width: 300px;
  height: auto;
  aspect-ratio: 1 / 1;
}
.ad-slot--popup .ad-slot__frame{
  max-width: 300px;
  height: 100px;
}
.ad-slot__img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.ad-placeholder{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  background:
    linear-gradient(135deg, rgba(0,0,0,.03) 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(315deg, rgba(0,0,0,.03) 25%, transparent 25%) 0 0 / 20px 20px,
    var(--paper);
}
.ad-placeholder__tag{
  font-family:'Inter', sans-serif;
  font-size: 11px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: var(--paper);
  background: var(--meta);
  padding: 3px 10px;
  border-radius: 3px;
}
.ad-placeholder__text{
  font-family:'Inter', sans-serif;
  font-size: 12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--meta);
}
.ad-slot-label{
  display:block;
  font-family:'Inter', sans-serif;
  font-size: 10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--meta);
  margin-top: 4px;
}
.ad-slot__close{
  position:absolute;
  top:4px;
  right:4px;
  z-index:2;
  width:22px;
  height:22px;
  line-height:20px;
  font-size:16px;
  text-align:center;
  color:#fff;
  background:rgba(0,0,0,.55);
  border:none;
  border-radius:3px;
  cursor:pointer;
}
.ad-slot__close:hover{ background:#000; }

/* Popup ad: fixed slim bar at the bottom-right of the screen */
.ad-slot--popup{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:1000;
  margin:0;
  padding:10px;
  background:var(--paper);
  border:1px solid var(--rule);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.ad-slot--popup .ad-slot-label{ display:none; }
.ad-slot--popup .ad-slot__frame{
  border:none;
  background:var(--paper);
}

/* ---- Breaking news ticker (one full headline scrolls after another) ---- */
.breaking-news-bar{
  background: var(--masthead-red);
  color: var(--paper);
}
.breaking-news-inner{
  display:flex;
  align-items:center;
  gap: 14px;
  height: 40px;
  font-family:'Inter', sans-serif;
  font-size: 13px;
}
.breaking-news-label{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  flex-shrink:0;
}
.breaking-news-viewport{
  position:relative;
  flex:1;
  height: 40px;
  overflow:hidden;
  mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.breaking-news-list{
  position:absolute;
  top:0;
  left:0;
  right:0;
  list-style:none;
  margin:0;
  padding:0;
}
.breaking-news-list li{
  height: 40px;
  display:flex;
  align-items:center;
}
.breaking-news-list a{
  display:block;
  max-width:100%;
  color: inherit;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.breaking-news-list a:hover{ text-decoration:underline; }

/* ---- Simple numbered pagination (used by components/pagination.php in future) ---- */
.pagination{
  display:flex;
  justify-content:center;
  gap: 8px;
  padding-top: 30px;
  font-family:'Inter', sans-serif;
  font-size: 13px;
}
.pagination-link{
  padding: 6px 12px;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
}
.pagination-link.active{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---- Two-column page layouts (main content + right sidebar) ---- */
.archive-with-sidebar{
  display:grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items:start;
}
.archive-sidebar{
  border-left: 1px solid var(--rule);
  padding-left: 26px;
}
@media (max-width: 1080px){
  .archive-with-sidebar{ grid-template-columns: 1fr; gap: 0; }
  .archive-sidebar{
    border-left:none;
    padding-left:0;
    border-top:1px solid var(--rule);
    padding-top:22px;
    margin-top:8px;
  }
}