/* =============================================================
   RESPONSIVE — Media Queries
   Mobile-first adjustments
   ============================================================= */

/* ============================================================
   TABLET — ≤ 1024px
   ============================================================ */
@media (max-width: 1024px) {

  /* ---- Layout ---- */
  .content-area.layout-two-col {
    grid-template-columns: 1fr 280px;
    gap: 2em;
  }

  /* ---- Blog grid — 2 columns still, smaller gap ---- */
  .blog-grid,
  .posts-grid,
  .posts-loop.loop-default {
    gap: 1.75em;
  }

  /* ---- Related posts — 2 columns ---- */
  .related-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- Hero title ---- */
  .post-hero-header .post-title.entry-title {
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  }
}

/* ============================================================
   MOBILE LANDSCAPE / SMALL TABLET — ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Variables override ---- */
  :root {
    --pc-content-padding: 1.25rem;
    --pc-h1-size: 36px;
    --pc-h1-line: 40px;
    --pc-h2-size: 28px;
    --pc-h2-line: 32px;
  }

  /* ---- Header ---- */
  .primary-navigation { display: none; }
  .header-cta { display: none; }
  .mobile-menu-toggle { display: flex; }

  .header-inner { height: 60px; }

  .nav-menu > li > a {
    height: 60px;
    line-height: 60px;
  }

  /* ---- Layout: remove sidebar, go single column ---- */
  .content-area.layout-two-col,
  .content-area.layout-single {
    grid-template-columns: 1fr;
  }

  .sidebar,
  .sidebar-blog {
    position: static;
    top: auto;
  }

  /* ---- Title area ---- */
  .title-area { padding: 1.75em 0; }
  .page-title { font-size: clamp(1.35rem, 5vw, 1.75rem); }

  /* ---- Blog grid — 1 column on mobile ---- */
  .blog-grid,
  .posts-grid,
  .posts-loop.loop-default {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }

  /* ---- Related posts — 1 column on mobile ---- */
  .related-posts-grid {
    grid-template-columns: 1fr;
  }

  /* ---- Post hero ---- */
  .post-hero-wrap { max-height: 420px; }
  .post-hero-image img { max-height: 420px; }

  .post-hero-header {
    padding: 1.5em var(--pc-content-padding) 1.75em;
  }

  .post-hero-header .post-title.entry-title {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }

  /* ---- Article body ---- */
  .post-body-wrap {
    padding: 1.75em var(--pc-content-padding) 0;
  }

  .post-single .post-content.entry-content {
    font-size: 1rem;
  }

  /* ---- Post nav ---- */
  .post-nav-inner {
    flex-direction: column;
    gap: 1.25em;
  }
  .nav-next { text-align: left; }

  /* ---- Footer ---- */
  .footer-bottom-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1em;
  }

  .footer-menu { justify-content: center; flex-wrap: wrap; }

  /* ---- Comments ---- */
  .comments-area {
    margin-top: 2em;
    padding-top: 2em;
  }
}

/* ============================================================
   MOBILE PORTRAIT — ≤ 480px
   ============================================================ */
@media (max-width: 480px) {

  /* ---- Footer widgets: 1 column ---- */
  .footer-widgets-inner {
    grid-template-columns: 1fr;
  }

  /* ---- Post card: smaller padding ---- */
  .post-item .post-header { padding: 1em 1em 0; }
  .post-item .post-content { padding: 0.5em 1em 0; }
  .post-item .post-footer { padding: 0.75em 1em 1em; }

  /* ---- Post meta: stack ---- */
  .post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2em;
  }
  .post-meta > span + span::before { display: none; }

  /* ---- 404 ---- */
  .error-404-inner { padding: 2.5em 0 1.5em; }

  /* ---- Hero on very small screens ---- */
  .post-hero-wrap { max-height: 300px; }
  .post-hero-image img { max-height: 300px; }
  .post-hero-header { padding: 1em var(--pc-content-padding) 1.25em; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .site-header,
  .sidebar,
  .related-posts,
  .post-navigation,
  .comments-area,
  .site-footer {
    display: none !important;
  }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .post-hero-wrap { max-height: none; }
  .post-hero-overlay { display: none; }
  .post-hero-header { position: static; padding: 1em 0; }
  .post-hero-header .post-title { color: #000; text-shadow: none; }
}