/* ============================================================
   articles.css  --  body components for /articles/* pages only.

   Loaded conditionally by index.php when $type === 'articles'.
   Extracted out of custom.css to keep the homepage CSS smaller
   (these rules add ~10 KB but are unused outside articles).

   Classes provided (full reference):
     .art-cards / .art-cards--2 / .art-cards--4   - card grid
     .art-card_{blue|green|yellow|pink|purple|gray|white}
     .art-callout_{same colors}                   - inline note
     .art-tell      - self-check question box (white card pattern)
     .art-protocol  - numbered step protocol (light blue fill)
     .art-table / .art-table_{green|yellow|purple|gray}
     .art-quote     - pull-quote / specialist view
     a.art-cta      - conversion button

   Palette (light fill / accent stripe / title color):
     blue   #eef4fb / #3b6fb0 / #2a5688
     green  #ebf6ec / #4caf50 / #2e7d32
     yellow #fdf6e3 / #f0a500 / #b07900
     pink   #fbeded / #d96a6a / #b04040
     purple #eeecf7 / #7e6bc4 / #5b4a9a
     gray   #f4f5f7 / #90a4ae / #546e7a
     white  #ffffff / #3b6fb0 / #2a5688  (1-2 per article max)
   ============================================================ */

/* CARDS - pastel-filled grid of info boxes */
.art-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 22px 0;
}
.art-cards.art-cards--2 { grid-template-columns: repeat(2, 1fr); }
.art-cards.art-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
    .art-cards,
    .art-cards.art-cards--2,
    .art-cards.art-cards--4 { grid-template-columns: 1fr; }
}

.art-card {
    background: #eef4fb;
    border-left: 5px solid #3b6fb0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(20, 40, 80, 0.04);
    padding: 20px 24px;
    box-sizing: border-box;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.art-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(20, 40, 80, 0.08);
}
.art-card__title {
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 10px 0;
    color: #2a5688;
    line-height: 1.3;
}
.art-card__body {
    font-size: 15px;
    line-height: 1.55;
    color: #2f3b4d;
}
.art-card__body strong { color: #2a5688; }

.art-card_blue   { background: #eef4fb; border-left-color: #3b6fb0; }
.art-card_blue   .art-card__title,
.art-card_blue   .art-card__body strong { color: #2a5688; }

.art-card_green  { background: #ebf6ec; border-left-color: #4caf50; }
.art-card_green  .art-card__title,
.art-card_green  .art-card__body strong { color: #2e7d32; }

.art-card_yellow { background: #fdf6e3; border-left-color: #f0a500; }
.art-card_yellow .art-card__title,
.art-card_yellow .art-card__body strong { color: #b07900; }

.art-card_pink   { background: #fbeded; border-left-color: #d96a6a; }
.art-card_pink   .art-card__title,
.art-card_pink   .art-card__body strong { color: #b04040; }

.art-card_purple { background: #eeecf7; border-left-color: #7e6bc4; }
.art-card_purple .art-card__title,
.art-card_purple .art-card__body strong { color: #5b4a9a; }

.art-card_gray   { background: #f4f5f7; border-left-color: #90a4ae; }
.art-card_gray   .art-card__title,
.art-card_gray   .art-card__body strong { color: #546e7a; }

.art-card_white  { background: #fff; border: 1px solid #e9eef3; border-left: 5px solid #3b6fb0; }
.art-card_white  .art-card__title,
.art-card_white  .art-card__body strong { color: #2a5688; }

/* CALLOUTS - pastel-filled single-paragraph notes */
.art-callout {
    background: #eef4fb;
    border-left: 5px solid #3b6fb0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(20, 40, 80, 0.04);
    padding: 18px 24px;
    margin: 20px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #2f3b4d;
}
.art-callout > :first-child { margin-top: 0; }
.art-callout > :last-child  { margin-bottom: 0; }
.art-callout strong { color: #2a5688; }
.art-callout a { font-weight: 700; }

.art-callout_blue   { background: #eef4fb; border-left-color: #3b6fb0; }
.art-callout_blue   strong { color: #2a5688; }

.art-callout_green  { background: #ebf6ec; border-left-color: #4caf50; }
.art-callout_green  strong { color: #2e7d32; }

.art-callout_yellow { background: #fdf6e3; border-left-color: #f0a500; }
.art-callout_yellow strong { color: #b07900; }

.art-callout_pink   { background: #fbeded; border-left-color: #d96a6a; }
.art-callout_pink   strong { color: #b04040; }

.art-callout_purple { background: #eeecf7; border-left-color: #7e6bc4; }
.art-callout_purple strong { color: #5b4a9a; }

.art-callout_gray   { background: #f4f5f7; border-left-color: #90a4ae; }
.art-callout_gray   strong { color: #546e7a; }

.art-callout_white  { background: #fff; border: 1px solid #e9eef3; border-left: 5px solid #3b6fb0; }
.art-callout_white  strong { color: #2a5688; }

/* TELL BOX - numbered self-check questions (white card pattern, used ONCE per article) */
.art-tell {
    background: #fff;
    border: 1px solid #e9eef3;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(20, 40, 80, 0.04);
    padding: 22px 28px;
    margin: 22px 0;
}
.art-tell p {
    margin: 0 0 12px 0;
    font-size: 15px;
    line-height: 1.55;
    color: #2f3b4d;
}
.art-tell p:last-child { margin-bottom: 0; }
.art-tell strong { color: #2a5688; }
.art-tell__result {
    margin-top: 14px !important;
    padding-top: 14px;
    border-top: 1px solid #eef0f3;
    color: #5b7a9a;
    font-size: 14px;
}

/* PROTOCOL BOX - day-by-day labeled steps (light blue pastel fill) */
.art-protocol {
    background: #eef4fb;
    border-left: 5px solid #3b6fb0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(20, 40, 80, 0.04);
    padding: 20px 26px;
    margin: 22px 0;
}
.art-protocol p {
    margin: 0 0 10px 0;
    font-size: 15px;
    line-height: 1.55;
    color: #2f3b4d;
}
.art-protocol p:last-child { margin-bottom: 0; }
.art-protocol strong { color: #2a5688; }

/* TABLES - elevated card with rounded corners */
.art-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 22px 0;
    border-radius: 10px;
    border: 1px solid #e9eef3;
    box-shadow: 0 2px 10px rgba(20, 40, 80, 0.05);
    background: #fff;
}
.art-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 15px;
}
.art-table th,
.art-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #eef2f6;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}
.art-table thead th {
    background: #f7faff;
    color: #2a5688;
    font-weight: 700;
    border-bottom: 2px solid #d8e9f5;
}
.art-table tbody tr { transition: background 0.15s ease; }
.art-table tbody tr:nth-child(even) { background: #fafcfe; }
.art-table tbody tr:hover           { background: #eef4fb; }
.art-table tbody tr:last-child td   { border-bottom: none; }
.art-table tbody td:first-child {
    color: #2a5688;
    font-weight: 600;
}
.art-table a {
    color: #b00059;
    font-weight: 700;
    text-decoration: none;
}
.art-table a:hover { color: #3baefe; text-decoration: underline; }

.art-table_green  thead th { background: #f0f9f1; color: #2e7d32; border-bottom-color: #c8e6c9; }
.art-table_yellow thead th { background: #fdf6e3; color: #b07900; border-bottom-color: #f0d97a; }
.art-table_purple thead th { background: #f3f0fa; color: #5b4a9a; border-bottom-color: #d4cbef; }
.art-table_gray   thead th { background: #f4f5f7; color: #546e7a; border-bottom-color: #d0d6db; }
@media (max-width: 700px) {
    .art-table { font-size: 14px; }
    .art-table th, .art-table td { padding: 11px 13px; }
}

/* PULL QUOTE - pastel-purple elevated card, italic, specialist/source attribution */
.art-quote {
    background: #eeecf7;
    border-left: 5px solid #7e6bc4;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(20, 40, 80, 0.04);
    padding: 20px 26px;
    margin: 22px 0;
    font-style: italic;
    color: #2f3b4d;
    line-height: 1.6;
}
.art-quote__src {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-size: 13px;
    color: #5b7a9a;
}

/* CTA BUTTON - conversion link (a.art-cta beats sitewide a:visited rule) */
a.art-cta,
a.art-cta:link,
a.art-cta:visited,
a.art-cta:hover,
a.art-cta:focus,
a.art-cta:active {
    display: inline-block;
    padding: 14px 36px;
    background: #0e4299;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(14, 66, 153, 0.25);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
a.art-cta:hover,
a.art-cta:focus {
    background: #0a3170;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 66, 153, 0.35);
}
.art-cta-wrap { text-align: center; margin: 28px 0; }