/*
Theme Name: PBN Base
Author: pbn-generator
Description: Minimal block theme generated by pbn-generator. Do not edit manually.
Version: 1.0
Requires at least: 6.1
Tested up to: 6.6
Requires PHP: 8.0
Text Domain: pbn-base
*/

/* =============================================================
   SITE HEADER & MASTHEAD
   ============================================================= */

.site-header {
  padding-top: 1.5rem;
  padding-bottom: 0;
  border-bottom: 2px solid var(--wp--preset--color--primary);
  margin-bottom: 2.5rem;
}

.site-header .wp-block-site-title a {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wp--preset--color--primary);
  display: block;
  padding-bottom: 0.9rem;
}

/* =============================================================
   SITE NAVIGATION  (category row rendered inside header)
   ============================================================= */

.site-nav {
  padding-bottom: 0.6rem;
  column-gap: 1.25rem !important;
  row-gap: 0 !important;
}

.site-nav .wp-block-paragraph {
  margin: 0;
  line-height: 1;
}

.site-nav a {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wp--preset--color--secondary);
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--wp--preset--color--accent);
}

/* =============================================================
   IMAGE PLACEHOLDERS  (grey box fallback when no image_url is set)
   ============================================================= */

.img-placeholder {
  background-color: var(--wp--preset--color--surface);
  width: 100%;
  display: block;
}

.img-placeholder--hero    { aspect-ratio: 21 / 9; }
.img-placeholder--feature { aspect-ratio: 3  / 2; }
.img-placeholder--card    { aspect-ratio: 16 / 9; margin-bottom: 0.75rem; }

/* =============================================================
   REAL IMAGES  (pbn-img — same aspect ratios as placeholders)
   ============================================================= */

figure.pbn-img {
  margin: 0;
  overflow: hidden;
  width: 100%;
}

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

figure.pbn-img--hero    { aspect-ratio: 21 / 9; }
figure.pbn-img--feature { aspect-ratio: 3  / 2; }
figure.pbn-img--card    { aspect-ratio: 16 / 9; margin-bottom: 0.75rem; }

/* Match placeholder spacing in hero context */
.hero-section figure.pbn-img {
  margin-bottom: 1.5rem;
}

/* =============================================================
   CATEGORY LABELS  (shared across all section types)
   ============================================================= */

.article-category {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: 0.3rem;
  margin-top: 0;
}

/* =============================================================
   SECTION LABELS  (article_grid section heading)
   ============================================================= */

h2.wp-block-heading.section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--secondary);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--wp--preset--color--surface);
  margin-bottom: 1.5rem;
}

/* =============================================================
   HERO SECTION
   ============================================================= */

.hero-section {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--wp--preset--color--surface);
}

.hero-section h1.wp-block-heading {
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.1;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

.hero-section .img-placeholder--hero {
  margin-bottom: 1.5rem;
}

.hero-centered {
  text-align: center;
  padding-top: 2.5rem;
}

.hero-centered h1.wp-block-heading {
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.1;
}

/* =============================================================
   FEATURED ARTICLE
   ============================================================= */

.featured-article {
  padding-top: 2rem;
  padding-bottom: 2.5rem;
  border-top: 3px solid var(--wp--preset--color--primary);
  border-bottom: 1px solid var(--wp--preset--color--surface);
}

.featured-article h2.wp-block-heading {
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  line-height: 1.15;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

/* column gap in the with_image variant */
.featured-article .wp-block-columns {
  align-items: center;
  column-gap: 2.5rem;
}

/* =============================================================
   ARTICLE GRID & CARDS
   ============================================================= */

.article-grid {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.article-card {
  border-top: 2px solid var(--wp--preset--color--accent);
  padding-top: 0.75rem;
}

.article-card h3.wp-block-heading {
  font-size: 1rem;
  line-height: 1.25;
  margin-top: 0.15rem;
  margin-bottom: 0.4rem;
}

.article-card > p:not(.article-category) {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--wp--preset--color--secondary);
  margin-top: 0;
}

/* =============================================================
   CATEGORY STRIP
   ============================================================= */

.category-strip {
  padding: 1.75rem 1.5rem;
  background-color: var(--wp--preset--color--surface);
}

.category-strip h3.wp-block-heading {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--secondary);
  margin-bottom: 0.75rem;
}

.category-strip .wp-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-strip .wp-block-list li {
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 0.9rem;
}

.category-strip .wp-block-list li:last-child {
  border-bottom: none;
}

/* =============================================================
   ARTICLE LINKS  (linked headings in featured/grid/strip)
   ============================================================= */

.article-card h3.wp-block-heading a.article-link,
.featured-article h2.wp-block-heading a.article-link {
  text-decoration: none;
  color: inherit;
}

.article-card h3.wp-block-heading a.article-link:hover,
.featured-article h2.wp-block-heading a.article-link:hover {
  color: var(--wp--preset--color--accent);
}

.category-strip .wp-block-list a.article-link {
  text-decoration: none;
  color: var(--wp--preset--color--primary);
}

.category-strip .wp-block-list a.article-link:hover {
  color: var(--wp--preset--color--accent);
}

/* =============================================================
   SINGLE ARTICLE PAGE
   ============================================================= */

.single-article {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

/* Article header block: category label + title + excerpt (deck) */
.article-header {
  margin-bottom: 2rem;
}

.article-header h1.wp-block-heading {
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.1;
  margin-top: 0.4rem;
  margin-bottom: 0.75rem;
}

/* Back-navigation link above the article header */
p.article-back-link {
  margin-bottom: 1.5rem;
  margin-top: 0;
}

a.back-link {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wp--preset--color--secondary);
}

a.back-link:hover {
  color: var(--wp--preset--color--accent);
}

/* Deck / standfirst below the title */
p.article-excerpt {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--wp--preset--color--secondary);
  margin-top: 0;
  margin-bottom: 0;
  max-width: 65ch;
}

/* Publication meta: date · byline */
p.article-meta {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wp--preset--color--secondary);
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* Top image (hero-size, same aspect ratio as homepage hero) */
.single-article figure.pbn-img {
  margin-bottom: 2.5rem;
}

/* Body paragraphs */
.single-article p {
  line-height: 1.8;
  margin-bottom: 1.25rem;
  max-width: 70ch;
}

/* =============================================================
   CATEGORY LINKS  (category label linked to category page)
   ============================================================= */

.article-category a.category-link {
  text-decoration: none;
  color: var(--wp--preset--color--accent);
}

.article-category a.category-link:hover {
  text-decoration: underline;
}

.category-strip h3.wp-block-heading a.category-link {
  text-decoration: none;
  color: var(--wp--preset--color--secondary);
}

.category-strip h3.wp-block-heading a.category-link:hover {
  color: var(--wp--preset--color--accent);
}

/* =============================================================
   CATEGORY PAGE  (archive-like listing page)
   ============================================================= */

.category-page {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.category-page > h1.wp-block-heading {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.1;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid var(--wp--preset--color--primary);
  margin-bottom: 1rem;
}

.category-description {
  font-size: 1rem;
  color: var(--wp--preset--color--secondary);
  margin-bottom: 2rem;
  margin-top: 0;
  max-width: 60ch;
}