/* Blog archive/listing styles only.
   Site chrome (nav/footer), layout primitives, buttons, section labels, and CTA
   styling come from style.css/components.css so Blog cannot drift from the
   shared theme chrome. */

/* BLOG listing section. Unique class (not `.blog`) so it never collides
       with WordPress's <body class="blog"> on the posts index or with the
       homepage `.blog` teaser section in components.css. */
    .blog-listing {
      background: var(--bg-primary);
      padding: clamp(56px, 7vw, 88px) 0 clamp(72px, 9vw, 120px);
    }
    .blog-intro {
      text-align: center;
      max-width: 800px;
      margin: 0 auto clamp(36px, 4vw, 48px);
    }
    .blog-intro p {
      font-size: 17px;
      line-height: 175%;
      color: var(--text-body);
    }

    /* Newsletter capture — sits below the article grid + pagination.
       Dark navy bar, full content width like the card grid: heading left,
       form right, slim vertical padding. */
    .blog-newsletter {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      column-gap: clamp(24px, 3vw, 48px);
      margin: clamp(56px, 7vw, 88px) auto 0;
      background: var(--bg-dark);
      border-radius: 24px;
      /* Vertical padding leaves room for the consent line hanging below
         the pill (absolute, out of flow) so the pill itself centers. */
      padding: clamp(40px, 4.5vw, 48px) clamp(24px, 3.5vw, 48px);
    }
    .blog-newsletter-fields {
      position: relative;
      flex: 1;
      max-width: 560px;
    }
    .blog-newsletter-heading {
      font-size: clamp(20px, 2vw, 24px);
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.2px;
      flex-shrink: 0;
    }
    .blog-newsletter-form {
      display: flex;
      gap: 8px;
      background: var(--card-bg);
      border: 1px solid rgba(0,0,0,0.06);
      border-radius: 50px;
      padding: 6px 6px 6px 22px;
      box-shadow: var(--card-shadow);
    }
    .blog-newsletter-form input {
      flex: 1;
      border: none; outline: none; background: transparent;
      font-family: 'Manrope', sans-serif !important;
      font-size: 15px;
      color: var(--text-heading);
      padding: 12px 0;
    }
    .blog-newsletter-form input::placeholder { color: var(--text-muted); }
    .blog-newsletter-form button {
      background: var(--purple);
      color: #fff;
      border: none;
      border-radius: 50px;
      padding: 12px 26px;
      font-family: 'Manrope', sans-serif !important;
      font-size: 14px; font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .blog-newsletter-form button:hover { background: var(--purple-hover); transform: translateY(-1px); }
    .blog-newsletter-form button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
    /* Hangs below the pill, out of flow, so only the pill takes part in
       the card's vertical centering. Status (submit feedback) shares the
       same slot and replaces the consent line while visible. */
    .blog-newsletter-consent,
    .blog-newsletter-status {
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      right: 0;
      margin: 0;
      text-align: center;
    }
    .blog-newsletter-status:not([hidden]) ~ .blog-newsletter-consent { display: none; }
    .blog-newsletter-consent {
      font-size: 12px;
      line-height: 1.5;
      color: rgba(255,255,255,0.6);
    }
    .blog-newsletter-consent a {
      color: rgba(255,255,255,0.85);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .blog-newsletter-consent a:hover { color: var(--purple); }
    .blog-newsletter-status {
      font-size: 14px;
      font-weight: 600;
    }
    .blog-newsletter-status[data-state="success"] { color: #c4b5fd; }
    .blog-newsletter-status[data-state="error"] { color: #ff8a8a; }
    /* Filter pills */
    .blog-filters {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-bottom: clamp(40px, 5vw, 56px);
    }
    .blog-filter {
      background: transparent;
      border: 1px solid rgba(26,26,46,0.12);
      color: var(--text-body);
      padding: 9px 20px;
      border-radius: 50px;
      font-family: 'Manrope', sans-serif !important;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none !important;
    }
    .blog-filter:hover {
      border-color: var(--text-heading);
      color: var(--text-heading);
    }
    .blog-filter.active {
      background: var(--purple);
      border-color: var(--purple);
      color: #fff;
    }

    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px 28px;
    }
    .blog-card {
      background: var(--card-bg);
      border-radius: var(--card-radius);
      overflow: hidden;
      box-shadow: var(--card-shadow);
      border: 1px solid rgba(0,0,0,0.04);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: flex; flex-direction: column;
    }
    .blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.1); }
    .blog-card-image {
      aspect-ratio: 16 / 10;
      overflow: hidden;
      position: relative;
      background: var(--bg-alt);
    }
    .blog-card-image img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.5s ease;
    }
    .blog-card:hover .blog-card-image img { transform: scale(1.05); }
    .blog-card-body {
      padding: 26px 28px 30px;
      flex: 1;
      display: flex; flex-direction: column;
    }
    .blog-card-eyebrow {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--purple-hover);
      margin-bottom: 12px;
    }
    .blog-card-body h3 {
      font-size: 22px;
      font-weight: 700;
      color: var(--text-heading);
      line-height: 128%;
      margin-bottom: 12px;
      letter-spacing: -0.2px;
    }
    .blog-card-body p {
      font-size: 14px;
      line-height: 170%;
      color: var(--text-body);
      margin-bottom: 20px;
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .blog-card-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: auto;
    }
    .blog-card-date {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
    }
    .blog-card-meta .btn-text {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--purple);
      font-size: 14px;
      font-weight: 600;
      transition: gap 0.2s ease;
    }
    .blog-card:hover .blog-card-meta .btn-text { gap: 10px; }

    /* RESPONSIVE — TABLET */
    @media (max-width: 968px) {
      .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }

      /* Bar gets cramped — stack heading above the form again */
      .blog-newsletter { flex-direction: column; align-items: stretch; gap: 18px; }
      .blog-newsletter-heading { text-align: center; }
      .blog-newsletter-fields { max-width: 540px; width: 100%; margin: 0 auto; }
    }

    /* RESPONSIVE — MOBILE */
    @media (max-width: 560px) {
      .blog-newsletter-form { flex-direction: column; padding: 8px; border-radius: 16px; gap: 8px; }
      .blog-newsletter-form input { padding: 12px 14px; }
      .blog-newsletter-form button { width: 100%; padding: 14px 24px; }

      .blog-grid { grid-template-columns: 1fr; gap: 24px; }
      .blog-card-body { padding: 24px 22px 26px; }
      .blog-card-body h3 { font-size: 19px; }
    }

/* Real-post additions (article links, pagination, empty state) */
    .blog-card--link { display: block; color: inherit; cursor: pointer; }
    .blog-card-image-placeholder {
      width: 100%;
      aspect-ratio: 16 / 10;
      background: linear-gradient(135deg, var(--purple-light), var(--bg-alt));
    }
    .blog-pagination {
      margin-top: 48px;
    }
    .blog-pagination .nav-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }
    .blog-pagination a,
    .blog-pagination span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      padding: 10px 14px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-heading);
      background: var(--card-bg);
      border: 1px solid rgba(0,0,0,0.06);
      transition: all 0.2s ease;
    }
    .blog-pagination a:hover {
      background: var(--purple-light);
      border-color: var(--purple);
      color: var(--purple-hover);
    }
    .blog-pagination .current {
      background: var(--purple);
      border-color: var(--purple);
      color: #fff;
    }
    .blog-pagination .dots { background: transparent; border-color: transparent; }

    .blog-empty {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-muted);
      font-size: 16px;
    }