/* =================================================
   4Canti — Newspaper Design System
   Replaces Bootstrap + style.css + homeStyle.css
================================================= */

/* ---- Custom Properties ---- */
:root {
  --ink:       #111111;
  --ink-2:     #444444;
  --ink-3:     #777777;
  --paper:     #F9F6F0;
  --paper-w:   #FFFFFF;
  --rule:      #D9D2C5;
  --accent:    #C0281E;
  --accent-dk: #8B0000;
  --ff-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-body:   Georgia, 'Times New Roman', serif;
  --ff-sans:   system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --max-w:     1240px;
  --pad:       clamp(1rem, 3vw, 2rem);
  --radius:    4px;
  --shadow:    0 1px 4px rgba(0,0,0,.08);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--ff-body); background: var(--paper); color: var(--ink); line-height: 1.7; margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.1em; }
h1,h2,h3,h4,h5,h6 { margin: 0; line-height: 1.25; }
ul,ol { padding-left: 1.5em; }
figure { margin: 0; }

/* ---- Container ---- */
.container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad); }
.container-narrow { width: 100%; max-width: 780px; margin-inline: auto; padding-inline: var(--pad); }

/* ============================================
   MICRO GRID  (Bootstrap class names)
============================================ */
.row { display: flex; flex-wrap: wrap; }
[class*="col-"] { width: 100%; min-width: 0; }

/* gap utilities */
.g-3 { gap: 1rem; }
.g-4 { gap: 1.5rem; }

/* column widths — base (xs): 100% already set */
@media (min-width: 576px) {
  .col-sm-6  { width: 50%; }
  .col-sm-12 { width: 100%; }
}
@media (min-width: 768px) {
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.333%; }
  .col-md-6  { width: 50%; }
  .col-md-8  { width: 66.666%; }
  .col-md-9  { width: 75%; }
  .col-md-12 { width: 100%; }
}
@media (min-width: 992px) {
  .col-lg-4  { width: 33.333%; }
  .col-lg-6  { width: 50%; }
  .col-lg-8  { width: 66.666%; }
  .col-lg-12 { width: 100%; }
}

/* spacing helpers */
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.p-3  { padding: 1rem; }
.p-4  { padding: 1.5rem; }
.small { font-size: .875em; }
.text-muted { color: var(--ink-3); }

/* ratio (video embeds) */
.ratio { position: relative; width: 100%; }
.ratio::before { display: block; content: ""; }
.ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ratio-16x9::before { padding-top: 56.25%; }


/* ============================================
   SITE HEADER
============================================ */

/* Top-bar */
.site-topbar {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-sans);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.site-topbar .tb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.site-topbar a { color: #ccc; }
.site-topbar a:hover { color: #fff; }

/* Logo zone */
.site-logo-bar {
  background: var(--paper-w);
  border-bottom: 3px solid var(--accent);
  text-align: center;
  padding: 1.25rem var(--pad) .8rem;
}
.site-logo-bar a { display: inline-block; }
.site-logo-bar img { max-height: 64px; width: auto; margin-inline: auto; transition: max-height .25s; }

/* Navbar */
.site-nav {
  background: var(--paper-w);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 200;
  transition: box-shadow .2s;
}
.site-nav.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.1); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad);
  min-height: 48px;
  padding-top: .25rem;
  padding-bottom: .25rem;
  gap: .25rem;
}
.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block;
  font-family: var(--ff-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: .4rem .7rem;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active { color: var(--accent); border-bottom-color: var(--accent); }

/* compact logo in sticky nav (shown when scrolled past header) */
.nav-logo { display: none; }
.nav-logo img { height: 30px; width: auto; }
@media (min-width: 768px) {
  .site-nav.scrolled .nav-logo { display: block; margin-right: .75rem; }
}

/* Hamburger */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  color: var(--ink);
  line-height: 1;
}
.nav-hamburger svg { display: block; }

/* Mobile menu overlay */
.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 299;
}
.nav-mobile-overlay.open { display: block; }

/* Mobile drawer */
.nav-mobile {
  position: fixed;
  top: 0; right: -100%;
  width: min(80vw, 320px);
  height: 100%;
  background: var(--paper-w);
  z-index: 300;
  padding: 1.5rem;
  transition: right .3s ease;
  overflow-y: auto;
}
.nav-mobile.open { right: 0; }
.nav-mobile ul { list-style: none; margin: 0; padding: 0; margin-top: 2rem; }
.nav-mobile ul a {
  display: block;
  font-family: var(--ff-sans);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: .75rem 0;
  border-bottom: 1px solid var(--rule);
}
.nav-mobile ul a:hover { color: var(--accent); }
.nav-mobile-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--ink-2);
  line-height: 1;
}

/* ---- Responsive nav ---- */
@media (max-width: 767px) {
  .nav-links { display: none; }
  .nav-hamburger { display: block; }
  .site-logo-bar { display: none; }
  .nav-logo-mobile { display: block !important; }
}
.nav-logo-mobile { display: none; }
.nav-logo-mobile img { height: 36px; width: auto; }

/* Spacer so content doesn't go under sticky nav */
.nav-spacer { height: 0; }

/* ============================================
   HOMEPAGE SECTIONS
============================================ */
.bodyclass { padding-top: 1.5rem; padding-bottom: 3rem; }

.homepage-section-box {
  background: var(--paper-w);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.homepage-section-title {
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--accent);
}
.homepage-section-title h2 {
  font-family: var(--ff-serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.homepage-section-title hr { display: none; }

/* Article card */
.homepage-article {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* layout-left: image left, text right, tags full-width on top */
.homepage-article.layout-left,
.homepage-article.layout-right {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .3rem .75rem;
}
.homepage-article.layout-left  .homepage-tags-top,
.homepage-article.layout-right .homepage-tags-top { flex: 0 0 100%; }
.homepage-article.layout-left  .homepage-media { flex: 0 0 38%; max-width: 38%; }
.homepage-article.layout-right .homepage-media { flex: 0 0 38%; max-width: 38%; order: 2; }
.homepage-article.layout-left  .homepage-content,
.homepage-article.layout-right .homepage-content { flex: 1; min-width: 0; }
.homepage-article.layout-left  .homepage-audio-player,
.homepage-article.layout-left  .homepage-audio-badge { flex: 0 0 100%; }
.homepage-article.layout-right .homepage-audio-player,
.homepage-article.layout-right .homepage-audio-badge { flex: 0 0 100%; }

/* media (image / video) */
.homepage-media { margin-bottom: .6rem; overflow: hidden; }
.homepage-media img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  transition: transform .3s ease;
}
.homepage-media a:hover img { transform: scale(1.03); }

/* tags */
.homepage-tags-top {
  font-family: var(--ff-sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.tag-primo     { color: var(--accent); }
.tag-secondario { color: #1a6bb5; }

/* content text */
.homepage-content {}
.homepage-subtitle {
  font-family: var(--ff-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .3rem;
}
.homepage-content h5 {
  font-family: var(--ff-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: .25rem;
  transition: color .15s;
}
.homepage-content a:hover h5 { color: var(--accent); }

.homepage-content h5.copertina {
  font-size: 1.55rem;
  line-height: 1.2;
}

.homepage-excerpt {
  font-family: var(--ff-sans);
  font-size: .82rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: .3rem;
}
.homepage-excerpt a { color: var(--accent); font-weight: 600; }
.homepage-excerpt a:hover { text-decoration: underline; }

/* Audio */
.homepage-audio-player { margin-top: .5rem; }
.homepage-audio-player audio { width: 100%; height: 36px; }

.homepage-audio-badge { cursor: pointer; margin-bottom: .5rem; }
.podcast-cover { position: relative; display: inline-block; }
.podcast-cover img { width: 100%; max-width: 120px; border-radius: 4px; }
.podcast-play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5);
  background: rgba(0,0,0,.25);
  border-radius: 4px;
  transition: background .2s;
}
.podcast-cover:hover .podcast-play-btn { background: rgba(0,0,0,.45); }


/* ============================================
   ARTICLE PAGE
============================================ */
.article-wrap {
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--pad);
  padding-top: 2rem;
  padding-bottom: 4rem;
}

/* breadcrumb */
.article-breadcrumb {
  font-family: var(--ff-sans);
  font-size: .75rem;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
}
.article-breadcrumb a { color: var(--ink-3); }
.article-breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.article-breadcrumb span { margin: 0 .4em; }

/* category label */
.article-cat-label {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 2px solid var(--accent);
  padding-top: .3rem;
  margin-bottom: 1rem;
}

/* headline */
.article-title {
  font-family: var(--ff-serif);
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: .75rem;
}

/* deck / subtitle */
.article-subtitle {
  font-family: var(--ff-body);
  font-size: 1.15rem;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* meta line */
.article-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--ff-sans);
  font-size: .78rem;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: .55rem 0;
  margin-bottom: 1.5rem;
}
.article-meta-date::before { content: "📅 "; font-size: .7em; }

/* hero */
.article-hero {
  margin-bottom: 1.75rem;
  overflow: hidden;
  border-radius: var(--radius);
}
.article-hero img { width: 100%; max-height: 480px; object-fit: cover; }
.article-hero figcaption {
  font-family: var(--ff-sans);
  font-size: .72rem;
  color: var(--ink-3);
  padding: .35rem 0 0;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .4rem;
}

/* audio */
.article-audio-box {
  background: var(--paper);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
}
.article-audio-label {
  font-family: var(--ff-sans);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.article-audio-box audio { width: 100%; }

/* body copy */
.article-body {
  font-size: 1.06rem;
  line-height: 1.85;
  color: var(--ink);
}
.article-body p { margin-bottom: 1.35rem; }
.article-body h2 {
  font-family: var(--ff-serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2rem 0 .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
}
.article-body h3 {
  font-family: var(--ff-serif);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 1.5rem 0 .5rem;
}
.article-body img {
  width: 100%; border-radius: var(--radius);
  margin: 1.25rem 0;
}
.article-body blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.5rem 0;
  padding: .75rem 1.25rem;
  font-style: italic;
  color: var(--ink-2);
  background: rgba(192,40,30,.04);
}
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--accent-dk); }
.article-body ul, .article-body ol { margin-bottom: 1.35rem; }

/* related */
.related-section {
  border-top: 3px double var(--rule);
  padding-top: 2rem;
  margin-top: 3rem;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--pad);
}
.related-heading {
  font-family: var(--ff-serif);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: .5rem;
  margin-bottom: 1.5rem;
}
.related-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.related-card { flex: 1 1 240px; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper-w); }
.related-card img { width: 100%; height: 160px; object-fit: cover; }
.related-card-body { padding: .75rem; }
.related-card-body h6 {
  font-family: var(--ff-serif);
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .4rem;
  line-height: 1.3;
}
.related-card-body a.read-more {
  font-family: var(--ff-sans);
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .05em;
}
.related-card-body a.read-more:hover { text-decoration: underline; }
.mini-audio { font-size: .7rem; margin-bottom: .25rem; }

/* ============================================
   CATEGORY PAGE
============================================ */
.cat-page { padding-top: 2rem; padding-bottom: 4rem; }

.cat-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid var(--accent);
}
.cat-header h1 {
  font-family: var(--ff-serif);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  color: var(--ink);
}
.cat-header p {
  font-family: var(--ff-sans);
  font-size: .82rem;
  color: var(--ink-3);
  margin: .3rem 0 0;
}

/* news card grid */
.news-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.news-card { flex: 1 1 280px; max-width: 100%; background: var(--paper-w); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s; }
.news-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }

.news-card-media { overflow: hidden; aspect-ratio: 16/9; background: #e8e4dc; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.news-card:hover .news-card-media img { transform: scale(1.04); }
.news-card-media-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; font-family: var(--ff-sans); font-size: .75rem; color: var(--ink-3);
}

.news-card-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.news-card-tag {
  font-family: var(--ff-sans); font-size: .65rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin-bottom: .4rem;
}
.news-card-title {
  font-family: var(--ff-serif); font-size: 1.05rem; font-weight: 700; line-height: 1.3;
  color: var(--ink); margin-bottom: .5rem; transition: color .15s;
}
.news-card:hover .news-card-title { color: var(--accent); }
.news-card-excerpt {
  font-family: var(--ff-sans); font-size: .8rem; color: var(--ink-2); line-height: 1.5;
  flex: 1; margin-bottom: .75rem;
}
.news-card-read {
  font-family: var(--ff-sans); font-size: .75rem; font-weight: 700;
  letter-spacing: .05em; color: var(--accent); align-self: flex-start;
}
.news-card-read:hover { text-decoration: underline; }
.news-card-video { aspect-ratio: 16/9; }
.news-card-video iframe { width: 100%; height: 100%; border: 0; }

@media (min-width: 640px) {
  .news-grid .news-card { flex-basis: calc(50% - .75rem); max-width: calc(50% - .75rem); }
}
@media (min-width: 960px) {
  .news-grid .news-card { flex-basis: calc(33.333% - 1rem); max-width: calc(33.333% - 1rem); }
}

/* ============================================
   FOOTER
============================================ */
.site-footer {
  background: var(--ink);
  color: #aaa;
  font-family: var(--ff-sans);
  font-size: .8rem;
  margin-top: 4rem;
}
.site-footer .footer-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 2rem var(--pad) 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-footer a { color: #aaa; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-copy { color: #666; }

/* ============================================
   COOKIE BANNER
============================================ */
#cook_ie_banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--ink); color: #ddd;
  font-family: var(--ff-sans); font-size: .8rem;
  padding: .85rem var(--pad);
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
  z-index: 9999;
  border-top: 2px solid var(--accent);
}
#cook_ie_banner a { color: #aaa; text-decoration: underline; }
#cook_ie_banner a:hover { color: #fff; }
#cookie-accept {
  padding: .4rem .9rem;
  background: var(--accent); border: none; color: #fff;
  font-family: var(--ff-sans); font-size: .8rem; font-weight: 700;
  border-radius: var(--radius); cursor: pointer; transition: background .15s;
}
#cookie-accept:hover { background: var(--accent-dk); }

/* ============================================
   MISC UTILITIES
============================================ */
.rounded { border-radius: var(--radius); }
.d-none  { display: none; }
.d-flex  { display: flex; }
.h-100   { height: 100%; }
.w-100   { width: 100%; }

/* CKEditor content in admin — keep in style.css but override here for body */
.bodyclass { 
  min-height: 50vh;
}