/*
 * articles-hub.css — page-specific styles for /articles/ (the content hub).
 *
 * Extracted from an inline <style> block in articles/index.html for caching
 * and HTML-payload reduction. Loaded after css/style.css so these rules can
 * override shared component styling where the hub page needs to.
 *
 * Scope:
 *   - Split-Hero page overrides (.home-hero__*)
 *   - Content Modal base + animations (.content-modal)
 *   - CTA Banner page overrides (.cta-banner)
 *   - Featured Articles card panel shadows (#articles-grid .card)
 */

    /* ═══════════════════════════════════════
       CONTENT PAGE — SPLIT HERO (shared core in css/style.css)
       Per the "Hero Section Standard" in CLAUDE.md, the home page hero
       (index.html) is the canonical reference for spacing, font color,
       and other styling details. Page-specific content (title, copy,
       button labels, credential labels, photo) stays unique to this page.
       ═══════════════════════════════════════ */
    .home-hero__grid {
      display: grid;
      /* Single column, matching the home hero — the photo is no longer a
         grid column; it pins to the section's right half (see
         .home-hero__bleed below). */
      grid-template-columns: 1fr;
    }
    /* ── Hero photo — full-bleed feathered, mirroring the home hero
       (design handoff "Hero — Image Treatments", Option 2). The photo
       pins to the section's right half and dissolves into the navy via
       mask gradients (fade-in from the left over 24%, fade-out at the
       bottom past 78%), with a navy wash over the dissolve so the
       headline stays legible. ── */
    .home-hero__content { position: relative; max-width: 690px; }
    .home-hero__bleed {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 50%;
      /* Above the section's grid overlay (z 0); .container (z 1) comes
         later in the DOM so text still paints on top. */
      z-index: 1;
      pointer-events: none;
    }
    .home-hero__bleed-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 60% 40%;
      display: block;
      -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 24%),
        linear-gradient(to bottom, #000 78%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image:
        linear-gradient(to right, transparent 0%, #000 24%),
        linear-gradient(to bottom, #000 78%, transparent 100%);
      mask-composite: intersect;
    }
    .home-hero__bleed-fade {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(11,29,69,0.55) 0%, rgba(11,29,69,0) 34%);
      pointer-events: none;
    }
    .home-hero__credentials {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-top: 20px;
      padding-top: 18px;
    }
    .home-hero__cred {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      /* Muted slate at rest, brand teal on hover — trust-strip styling
         from the design handoff (Hero — Image Treatments); the hover
         tint is decorative since the row isn't interactive. Mirrors the
         home page hero. */
      color: rgba(160, 178, 206, 0.82);
      text-transform: uppercase;
      letter-spacing: 0.2em;
      white-space: nowrap;
      cursor: default;
      transition: color 0.2s ease;
    }
    .home-hero__cred:hover {
      color: var(--teal);
    }
    /* Content-page divider override matching home (global rule in
       css/style.css is 2px x 20px at rgba(255,255,255,0.15)). Design
       handoff trust-strip hairline, thickened to 2px wide. */
    .home-hero__cred-divider {
      width: 2px;
      height: 13px;
      background: rgba(255, 255, 255, 0.22);
    }
    /* Hero glow customizations — mirror the home page hero per CLAUDE.md.
       - Top-right circle glow removed; ::before repurposed as the
         grid-line layer, radially masked (per the design handoff's
         bg-grid) so the grid fades out toward the lower-right and never
         shows behind the full-bleed photo's feathered edges.
       - All glows removed: ::after (which carried the bottom-edge teal
         ellipse glow) is disabled entirely. */
    .home-hero::before {
      display: block;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: auto;
      height: auto;
      border-radius: 0;
      background:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
      background-size: 60px 60px;
      -webkit-mask-image: radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%);
      mask-image: radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%);
    }
    /* When the full-bleed photo is showing (>1100px), also clamp the grid
       horizontally so it ends just past the CTA row's last button and
       never reaches the photo's feathered edge — same values as the home
       hero. */
    @media (min-width: 1101px) {
      .home-hero::before {
        -webkit-mask-image:
          radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%),
          linear-gradient(to right, #000 45%, transparent 53%);
        -webkit-mask-composite: source-in;
        mask-image:
          radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%),
          linear-gradient(to right, #000 45%, transparent 53%);
        mask-composite: intersect;
      }
    }
    .home-hero::after {
      display: none;
    }
    /* Below ~1100px the text column would run into the photo's opaque
       zone, so the bleed hides and the hero goes text-only — same
       breakpoint as the home hero. */
    @media (max-width: 1100px) {
      .home-hero__bleed { display: none; }
    }
    @media (max-width: 900px) {
      .home-hero__title { font-size: 38px; }
    }

    /* ── Content Modals ── */
    .content-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(9, 26, 61, 0.65);
      align-items: center;
      justify-content: center;
      padding: 24px;
      animation: modalFadeIn 0.25s ease;
    }
    .content-modal.is-open {
      display: flex;
    }
    .content-modal__panel {
      background: var(--white);
      border: 1.5px solid var(--teal);
      border-radius: var(--radius-lg);
      max-width: 640px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      padding: 36px 40px;
      position: relative;
      animation: modalSlideIn 0.3s ease;
    }
    .content-modal__close {
      position: absolute;
      top: 16px;
      right: 20px;
      background: none;
      border: none;
      font-size: 24px;
      color: var(--gray-400);
      cursor: pointer;
      line-height: 1;
      padding: 4px;
      transition: color 0.2s;
    }
    .content-modal__close:hover {
      color: var(--navy);
    }
    .content-modal__title {
      font-family: 'Inter', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 20px;
      padding-right: 32px;
    }
    .content-modal__body {
      font-size: 15px;
      color: var(--text-body);
      line-height: 1.8;
    }
    .content-modal__body p {
      margin-bottom: 16px;
    }
    .content-modal__body p:last-child {
      margin-bottom: 0;
    }
    .content-modal__footer {
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid var(--gray-200);
      text-align: right;
    }
    @keyframes modalFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes modalSlideIn {
      from { opacity: 0; transform: translateY(20px) scale(0.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    /* .cta-banner narrow width + bottom-edge teal glow now live in css/style.css
       on .cta-banner.cta-banner--with-image and its ::after — shared site-wide. */

    .cta-banner__title {
      font-family: 'DM Serif Display', Georgia, serif;
      font-weight: 700;
      font-size: 34px;
      color: var(--teal);
    }

    /* ── Featured Articles panels — match the home page AsuraTrust Insights cards ── */
    #articles-grid .card {
      border: none;
      box-shadow:
        0 -6px 18px rgba(11, 27, 61, 0.08),
        0 12px 32px rgba(11, 27, 61, 0.08),
        0 2px 8px rgba(11, 27, 61, 0.08);
    }
    #articles-grid .card:hover {
      border: none;
      box-shadow: 0 18px 44px rgba(43, 191, 154, 0.28), 0 4px 12px rgba(43, 191, 154, 0.14);
    }