/* =====================================================================
   1417 — Home Page "Articles" block. Configurable module (rp_articles):
   eyebrow + title + sub-text, then a row of admin-picked article cards
   (image, category, title, excerpt, labelled link). Loaded via addStyle().
   ===================================================================== */
.rp-articles { --red:#db0f16; --red-dark:#b50c12; --ink:#1c1c1c; --muted:#6d6d6d;
  --line:#e5e1d9; --soft:#8a8a8a; --bg:#faf8f4;
  font-family:'Outfit',sans-serif; margin:34px 0; color:var(--ink);
  background:var(--bg); border-radius:16px; padding:48px 44px; }
.rp-articles * { box-sizing:border-box; }

/* header (left aligned) */
.rp-articles__head { max-width:680px; margin:0 0 30px; }
.rp-articles__eyebrow { display:block; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin:0 0 14px; }
.rp-articles__title { margin:0; font-size:clamp(28px,3.2vw,40px); font-weight:800; line-height:1.08; letter-spacing:-.02em; }
.rp-articles__title-line { display:block; margin-top:12px; font-size:clamp(17px,1.7vw,22px); font-weight:600; line-height:1.25; letter-spacing:-.01em; color:var(--red); }
.rp-articles__subtext { margin:16px 0 0; font-size:16px; line-height:1.6; color:var(--muted); max-width:60ch; }

/* 1511 — value-prop point list (2 x 2 on desktop), bold lead + red tick */
.rp-articles__points { list-style:none; margin:30px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px 44px; max-width:940px; }
.rp-articles__points li { display:flex; align-items:flex-start; gap:13px; font-size:16px; line-height:1.45; color:var(--muted); }
.rp-articles__tick { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--red); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.rp-articles__tick svg { width:15px; height:15px; display:block; }
.rp-articles__point-text strong { color:var(--ink); font-weight:700; }

/* branded CTAs (match the hero button styling) */
.rp-articles__actions { display:flex; flex-wrap:wrap; gap:14px; margin:34px 0 0; }
.rp-articles__btn { display:inline-flex; align-items:center; justify-content:center; text-align:center;
  font-size:15px; font-weight:700; text-decoration:none; padding:14px 26px; border-radius:8px;
  border:2px solid transparent; cursor:pointer; transition:transform .12s ease, background .15s, color .15s; }
.rp-articles__btn:hover { transform:translateY(-1px); }
.rp-articles__btn--solid { background:var(--red); color:#fff; border-color:var(--red); }
.rp-articles__btn--solid:hover { background:var(--red-dark); border-color:var(--red-dark); color:#fff; }
.rp-articles__btn--outline { background:transparent; color:var(--red); border-color:var(--red); }
.rp-articles__btn--outline:hover { background:var(--red); color:#fff; }

/* 1558 — two-column layout: value content on the left, a 2x2 image grid on the
   right (one image per value theme). Points drop to a single column so they read
   cleanly in the narrower left column. */
.rp-articles--why { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);
  gap:48px; align-items:center; }
.rp-articles--why .rp-articles__head { max-width:none; }
.rp-articles--why .rp-articles__points { grid-template-columns:1fr; max-width:none; gap:16px; }
.rp-articles__gallery { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:16px; }
.rp-articles__shot { width:100%; height:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:14px; box-shadow:0 12px 26px rgba(0,0,0,.12); display:block; }

/* responsive */
@media (max-width:900px){ .rp-articles--why { grid-template-columns:1fr; gap:34px; } }
@media (max-width:760px){ .rp-articles__points { grid-template-columns:1fr; gap:16px; } }
@media (max-width:640px){ .rp-articles { padding:32px 22px; } .rp-articles__btn { flex:1 1 auto; } }
@media (max-width:560px){ .rp-articles__title { font-size:26px; } }