/* =========================================================
   ARTICLE BOARD
   File: css/article-board.css
========================================================= */

/* =========================================================
   00 — VARIABLES
========================================================= */

:root {
  --ab-green: var(--site-color-01, #0a7700);
  --ab-green-dark: var(--site-color-01-hover, #075700);
  --ab-green-light: #9fd798;

  --ab-dark: #171717;
  --ab-dark-soft: #222222;
  --ab-dark-card: #292929;

  --ab-white: #ffffff;
  --ab-off-white: #f5f6f4;

  --ab-text-dark: #222222;
  --ab-text-medium: #626262;

  --ab-border-dark: rgba(0, 0, 0, 0.1);
  --ab-border-light: rgba(255, 255, 255, 0.14);

  --ab-radius-small: 10px;
  --ab-radius-medium: 16px;
  --ab-radius-large: 24px;

  --ab-shadow-small: 0 10px 28px rgba(0, 0, 0, 0.08);

  --ab-shadow-medium: 0 18px 42px rgba(0, 0, 0, 0.14);

  --ab-shadow-large: 0 24px 60px rgba(0, 0, 0, 0.24);

  --ab-section-padding: 8rem;
}

/* =========================================================
   ARTICLE BOARD — TYPOGRAPHY UPDATE
   Matches newer Donelson website styling
========================================================= */

.article-library {
  font-family: "Roboto", Arial, sans-serif;
}

/* ---------------------------------------------------------
   HERO / INTRO
--------------------------------------------------------- */

.ab-hero h1 {
  font-family: "Roboto", Arial, sans-serif;
  font-size: clamp(4rem, 4vw, 6rem);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.ab-hero p {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 1.8rem;
  line-height: 1.65;
  font-weight: 400;
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------
   FILTER BUTTONS
--------------------------------------------------------- */

.ab-filter-button {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 700;
  padding: 13px 20px;
}

/* ---------------------------------------------------------
   ARTICLE CARDS
--------------------------------------------------------- */

.ab-article-card {
  font-family: "Roboto", Arial, sans-serif;
}

/* Category label */

.ab-card-category {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Article title */

.ab-article-card h2,
.ab-article-card h3 {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 2.15rem;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* Article description */

.ab-article-card p {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 1.45rem;
  line-height: 1.6;
  font-weight: 400;
}

/* Read Article link */

.ab-card-link {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 800;
}

/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media only screen and (max-width: 900px) {
  .ab-hero h1 {
    font-size: 4.2rem;
  }

  .ab-hero p {
    font-size: 1.65rem;
  }

  .ab-article-card h2,
  .ab-article-card h3 {
    font-size: 2rem;
  }

  .ab-article-card p {
    font-size: 1.4rem;
  }
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media only screen and (max-width: 600px) {
  .ab-hero h1 {
    font-size: 3.4rem;
    line-height: 1.05;
  }

  .ab-hero p {
    font-size: 1.5rem;
    line-height: 1.55;
  }

  .ab-filter-button {
    font-size: 1.2rem;
    padding: 11px 16px;
  }

  .ab-card-category {
    font-size: 1.15rem;
  }

  .ab-article-card h2,
  .ab-article-card h3 {
    font-size: 2rem;
  }

  .ab-article-card p {
    font-size: 1.4rem;
  }

  .ab-card-link {
    font-size: 1.3rem;
  }
}

/* =========================================================
   01 — GENERAL
========================================================= */

.ab-page {
  width: 100%;
}

.ab-section {
  position: relative;

  width: 100%;

  padding: var(--ab-section-padding) 0;
}

.ab-section img {
  display: block;

  max-width: 100%;
}

.ab-section-heading {
  max-width: 900px;

  margin: 0 auto 4.8rem;

  text-align: center;
}

.ab-section-heading .section-eyebrow {
  margin-bottom: 0.9rem;
}

.ab-section-heading h2 {
  margin-bottom: 1.5rem;

  color: var(--ab-text-dark);

  font-size: clamp(3.2rem, 5vw, 5rem);
  font-weight: 900;
  line-height: 1.08;

  text-transform: none;
}

.ab-section-heading > p:not(.section-eyebrow) {
  max-width: 760px;

  margin: 0 auto;

  color: var(--ab-text-medium);

  font-size: 1.6rem;
  line-height: 1.7;
}

.ab-section-heading-light h2 {
  color: #ffffff;
}

.ab-section-heading-light > p:not(.section-eyebrow) {
  color: rgba(255, 255, 255, 0.72);
}

.ab-section-heading-light .section-eyebrow {
  color: var(--ab-green-light);
}

/* =========================================================
   02 — HERO
========================================================= */

.ab-hero {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 620px;

  overflow: hidden;

  background-color: #111111;
}

.ab-hero-background {
  position: absolute;

  inset: 0;
}

.ab-hero-background img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.ab-hero-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.93) 0%,
    rgba(0, 0, 0, 0.78) 38%,
    rgba(0, 0, 0, 0.42) 72%,
    rgba(0, 0, 0, 0.08) 100%
  );
}

.ab-hero-content {
  position: relative;

  z-index: 2;

  width: 100%;

  padding: 8rem 4rem;
}

.ab-hero-content > * {
  max-width: 760px;
}

.ab-hero-content .section-eyebrow {
  margin-bottom: 1.2rem;

  color: var(--ab-green-light);

  font-size: 1.3rem;
  font-weight: 900;

  letter-spacing: 0.08em;
}

.ab-hero-content h1 {
  margin-bottom: 1.8rem;

  color: #ffffff;

  font-size: clamp(4.2rem, 6vw, 6.5rem);
  font-weight: 900;
  line-height: 1.02;

  text-align: left;
  text-transform: none;

  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

.ab-hero-content > p:not(.section-eyebrow) {
  max-width: 700px;

  margin-bottom: 2.8rem;

  color: rgba(255, 255, 255, 0.84);

  font-size: 1.7rem;
  line-height: 1.7;
}

.ab-hero .button {
  display: inline-flex;

  width: auto;
}

/* =========================================================
   03 — FEATURED ARTICLE
========================================================= */

.ab-featured {
  background: linear-gradient(180deg, #f7f8f6, #eceeeb);
}

.ab-featured-card {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(320px, 0.9fr);

  max-width: 1180px;

  margin: 0 auto;

  overflow: hidden;

  border: 1px solid rgba(0, 0, 0, 0.08);

  border-radius: var(--ab-radius-large);

  background-color: #ffffff;

  box-shadow: var(--ab-shadow-large);

  text-decoration: none;

  transition:
    transform 350ms ease,
    box-shadow 350ms ease,
    border-color 350ms ease;
}

.ab-featured-card:hover {
  transform: translateY(-6px);

  border-color: rgba(10, 119, 0, 0.25);

  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.18);
}

.ab-featured-image {
  position: relative;

  min-height: 480px;

  overflow: hidden;

  background-color: #111111;
}

.ab-featured-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 700ms ease,
    filter 700ms ease;
}

.ab-featured-card:hover .ab-featured-image img {
  transform: scale(1.025);

  filter: brightness(0.95);
}

.ab-featured-content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 4rem;
}

.ab-featured-content h3 {
  margin-bottom: 1.4rem;

  color: var(--ab-text-dark);

  font-size: clamp(3rem, 4vw, 4.4rem);
  font-weight: 900;
  line-height: 1.1;

  text-transform: none;
}

.ab-featured-content > p:not(.ab-article-category) {
  margin-bottom: 2rem;

  color: var(--ab-text-medium);

  font-size: 1.55rem;
  line-height: 1.7;
}

/* =========================================================
   04 — ARTICLE CATEGORY LABEL
========================================================= */

.ab-article-category {
  margin-bottom: 0.8rem;

  color: var(--ab-green);

  font-size: 1.05rem;
  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 0.08em;
}

/* =========================================================
   05 — LIBRARY SECTION
========================================================= */

.ab-library {
  background-color: #ffffff;
}

/* =========================================================
   06 — FILTER BAR
========================================================= */

.ab-filter-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 0.8rem;

  max-width: 1100px;

  margin: 0 auto 3.5rem;
}

.ab-filter-button {
  padding: 0.85rem 1.3rem;

  border: 1px solid rgba(0, 0, 0, 0.12);

  border-radius: 999px;

  background-color: #f1f2f0;

  color: #444444;

  font-size: 1.05rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    color 250ms ease,
    background-color 250ms ease,
    border-color 250ms ease,
    transform 250ms ease;
}

.ab-filter-button:hover {
  transform: translateY(-2px);

  border-color: rgba(10, 119, 0, 0.35);

  color: var(--ab-green);
}

.ab-filter-button.active {
  border-color: var(--ab-green);

  background-color: var(--ab-green);

  color: #ffffff;
}

/* =========================================================
   07 — ARTICLE GRID
========================================================= */

.ab-article-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 2.2rem;

  max-width: 1180px;

  margin: 0 auto;
}

/* =========================================================
   08 — ARTICLE CARDS
========================================================= */

.ab-article-card {
  min-width: 0;

  overflow: hidden;

  border: 1px solid rgba(0, 0, 0, 0.1);

  border-radius: var(--ab-radius-medium);

  background-color: #ffffff;

  box-shadow: var(--ab-shadow-small);

  transition:
    transform 350ms ease,
    box-shadow 350ms ease,
    border-color 350ms ease;
}

.ab-article-card:hover {
  transform: translateY(-5px);

  border-color: rgba(10, 119, 0, 0.25);

  box-shadow: var(--ab-shadow-medium);
}

.ab-article-card[hidden] {
  display: none !important;
}

.ab-article-card-link {
  display: flex;
  flex-direction: column;

  height: 100%;

  color: inherit;

  text-decoration: none;
}

/* =========================================================
   09 — ARTICLE IMAGE
========================================================= */

.ab-article-image {
  position: relative;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background-color: #111111;
}

.ab-article-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 650ms ease,
    filter 650ms ease;
}

.ab-article-card:hover .ab-article-image img {
  transform: scale(1.035);

  filter: brightness(0.94) saturate(1.03);
}

/* =========================================================
   10 — ARTICLE CONTENT
========================================================= */

.ab-article-content {
  display: flex;
  flex: 1;
  flex-direction: column;

  padding: 1.8rem;
}

.ab-article-content h3 {
  margin-bottom: 1rem;

  color: var(--ab-text-dark);

  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.25;

  text-transform: none;
}

.ab-article-content > p:not(.ab-article-category) {
  margin-bottom: 1.5rem;

  color: var(--ab-text-medium);

  font-size: 1.22rem;
  line-height: 1.6;
}

/* =========================================================
   11 — READ LINK
========================================================= */

.ab-read-link {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  gap: 0.4rem;

  margin-top: auto;

  color: var(--ab-green);

  font-size: 1.1rem;
  font-weight: 900;

  border-bottom: 1px solid rgba(10, 119, 0, 0.35);

  transition:
    color 250ms ease,
    border-color 250ms ease,
    transform 250ms ease;
}

.ab-featured-card:hover .ab-read-link,
.ab-article-card:hover .ab-read-link {
  color: var(--ab-green-dark);

  border-bottom-color: var(--ab-green-dark);

  transform: translateX(3px);
}

/* =========================================================
   12 — RELATED RESOURCES
========================================================= */

.ab-resources {
  overflow: hidden;

  background:
    radial-gradient(circle at 15% 15%, rgba(10, 119, 0, 0.2), transparent 38%),
    radial-gradient(circle at 90% 70%, rgba(99, 0, 43, 0.13), transparent 36%),
    linear-gradient(145deg, #171717, #292929);
}

.ab-resource-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1.5rem;

  max-width: 1050px;

  margin: 0 auto;
}

.ab-resource-card {
  display: block;

  padding: 2.4rem;

  border: 1px solid rgba(255, 255, 255, 0.13);

  border-radius: var(--ab-radius-medium);

  background: rgba(255, 255, 255, 0.055);

  text-decoration: none;

  transition:
    transform 300ms ease,
    border-color 300ms ease,
    background-color 300ms ease,
    box-shadow 300ms ease;
}

.ab-resource-card:hover {
  transform: translateY(-5px);

  border-color: rgba(159, 215, 152, 0.42);

  background: rgba(255, 255, 255, 0.085);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.ab-resource-card span,
.ab-resource-card strong {
  display: block;
}

.ab-resource-card span {
  margin-bottom: 0.7rem;

  color: #ffffff;

  font-size: 1.7rem;
  font-weight: 900;
}

.ab-resource-card strong {
  color: var(--ab-green-light);

  font-size: 1.2rem;
  line-height: 1.45;
}

/* =========================================================
   13 — LARGE TABLET
========================================================= */

@media only screen and (max-width: 1000px) {
  :root {
    --ab-section-padding: 6.5rem;
  }

  .ab-featured-card {
    grid-template-columns: 1fr;
  }

  .ab-featured-image {
    min-height: 380px;
  }

  .ab-article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ab-resource-grid {
    grid-template-columns: 1fr;
  }

  .ab-featured-card,
  .ab-filter-bar,
  .ab-article-grid,
  .ab-resource-grid {
    width: calc(100% - 3rem);
  }
}

/* =========================================================
   14 — SMALL TABLET
========================================================= */

@media only screen and (max-width: 760px) {
  :root {
    --ab-section-padding: 5rem;
  }

  .ab-hero {
    min-height: 560px;
  }

  .ab-hero-content {
    padding: 7rem 2rem 5.5rem;
  }

  .ab-hero-content h1 {
    font-size: clamp(3.6rem, 10vw, 4.8rem);
  }

  .ab-section-heading {
    margin-bottom: 3.5rem;

    text-align: left;
  }

  .ab-section-heading > p:not(.section-eyebrow) {
    margin-left: 0;
  }

  .ab-filter-bar {
    justify-content: flex-start;
  }

  .ab-featured-content {
    padding: 2.8rem;
  }

  .ab-featured-content h3 {
    font-size: 3rem;
  }
}

/* =========================================================
   15 — MOBILE
========================================================= */

@media only screen and (max-width: 600px) {
  :root {
    --ab-section-padding: 4.5rem;
  }

  .ab-hero {
    min-height: 520px;
  }

  .ab-hero-background img {
    object-position: 60% center;
  }

  .ab-hero-content h1 {
    font-size: clamp(3.3rem, 12vw, 4.5rem);
  }

  .ab-hero-content > p:not(.section-eyebrow) {
    font-size: 1.45rem;
  }

  .ab-section-heading h2 {
    font-size: 3rem;
  }

  .ab-section-heading > p:not(.section-eyebrow) {
    font-size: 1.45rem;
  }

  .ab-featured-card,
  .ab-filter-bar,
  .ab-article-grid,
  .ab-resource-grid {
    width: 100%;
  }

  .ab-featured-image {
    min-height: 280px;
  }

  .ab-featured-content {
    padding: 2.2rem;
  }

  .ab-featured-content h3 {
    font-size: 2.6rem;
  }

  .ab-featured-content > p:not(.ab-article-category) {
    font-size: 1.35rem;
  }

  .ab-filter-bar {
    gap: 0.6rem;
  }

  .ab-filter-button {
    padding: 0.7rem 1rem;

    font-size: 0.95rem;
  }

  .ab-article-grid {
    grid-template-columns: 1fr;
  }

  .ab-article-content {
    padding: 1.5rem;
  }

  .ab-article-content h3 {
    font-size: 1.6rem;
  }

  .ab-article-content > p:not(.ab-article-category) {
    font-size: 1.15rem;
  }

  .ab-resource-card {
    padding: 2rem;
  }

  .ab-resource-card span {
    font-size: 1.5rem;
  }
}

/* =========================================================
   16 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .ab-page *,
  .ab-page *::before,
  .ab-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}