/*
 * content.css — DB-driven content pages (resources/views/pages/content.blade.php
 * + pages/blocks/*). Block look follows docs/frontend/Artwork Guidelines.dc.html.
 * Responsive per UI rules §8 (mobile < 576, tablet < 992, desktop).
 */

/* ------------------------------------------------------------------- hero */
.dpd-chero { padding-block:56px; }
.dpd-chero__title { color:#fff; font-size:clamp(1.75rem, 4vw, 2.75rem); margin-bottom:.9rem; }
.dpd-chero__text { color:rgba(255,255,255,.68); font-size:1rem; line-height:1.6; max-width:600px; margin:0; }
.dpd-chero__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:1.5rem; }
@media (max-width:575.98px) {
    .dpd-chero { padding-block:40px; }
    .dpd-chero__text { font-size:.95rem; }
    .dpd-chero__actions .btn { flex:1 1 100%; }
}

/* ------------------------------------------------------------------- body */
.dpd-cpage { background:var(--dpd-offwhite); padding-block:40px 80px; }
.dpd-cpage__inner { display:flex; flex-direction:column; gap:24px; }
@media (max-width:575.98px) { .dpd-cpage { padding-block:24px 56px; } .dpd-cpage__inner { gap:16px; } }

.dpd-cblock { background:#fff; border-radius:14px; box-shadow:var(--dpd-shadow-sm); padding:24px; }
@media (max-width:575.98px) { .dpd-cblock { padding:20px 16px; } }
.dpd-cblock__title { font-size:1.05rem; margin-bottom:18px; }
.dpd-ccols > .dpd-cblock__title { margin-bottom:14px; }

/* Column heading with icon / tone */
.dpd-ccol__title { display:flex; align-items:center; gap:10px; font-size:1rem; margin-bottom:16px; }
.dpd-ccol__title--do { color:var(--dpd-green); font-size:.95rem; }
.dpd-ccol__title--avoid { color:var(--dpd-magenta); font-size:.95rem; }
.dpd-ccol__ico { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none; }
.dpd-ccol__ico--magenta { background:#FDE8F4; color:var(--dpd-magenta); }
.dpd-ccol__ico--cyan { background:#E8F7FD; color:var(--dpd-cyan); }

/* Compact inner cards (columns style "cards") */
.dpd-ccard { background:#F0FDF4; border:1.5px solid var(--dpd-green); border-radius:10px; padding:16px; }
.dpd-ccard__title { font-size:.9rem; margin-bottom:4px; }
.dpd-ccard__badge { display:block; font-size:.69rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--dpd-green); margin-bottom:8px; }

/* ---------------------------------------------------- rich text (sanitized) */
.dpd-rich { font-size:.85rem; color:var(--dpd-muted); line-height:1.65; overflow-wrap:anywhere; }
.dpd-rich > :last-child { margin-bottom:0; }
.dpd-rich p { margin:0 0 14px; }
.dpd-rich strong, .dpd-rich b { color:var(--dpd-navy); }
.dpd-rich a { font-weight:600; }
.dpd-rich h3, .dpd-rich h4 { font-size:.95rem; margin:18px 0 8px; }
.dpd-rich ul, .dpd-rich ol { margin:0 0 14px; padding-left:1.2rem; }
.dpd-rich li { margin-bottom:6px; }
.dpd-rich--sm { font-size:.78rem; line-height:1.5; }

.dpd-rich table { width:100%; border-collapse:collapse; font-size:.82rem; margin:0 0 14px; }
.dpd-rich th { text-align:left; font-size:.69rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--dpd-label); padding:0 0 8px; }
.dpd-rich td { padding:8px 0; border-top:1px solid var(--dpd-border); color:var(--dpd-navy); vertical-align:top; }
.dpd-rich td + td, .dpd-rich th + th { text-align:right; padding-left:12px; }
.dpd-rich td:last-child { font-weight:700; }

/* Icon lists: checklist (green dot + check), do (green check), avoid (magenta cross) */
.dpd-rich--checklist ul, .dpd-rich--do ul, .dpd-rich--avoid ul { list-style:none; padding:0; }
.dpd-rich--checklist li, .dpd-rich--do li, .dpd-rich--avoid li { position:relative; padding-left:30px; color:var(--dpd-navy); }
.dpd-rich--checklist li::before, .dpd-rich--do li::before, .dpd-rich--avoid li::before {
    content:""; position:absolute; left:0; top:.1em; width:20px; height:20px; border-radius:999px;
    background-position:center; background-repeat:no-repeat; background-size:12px;
}
.dpd-rich--checklist li::before, .dpd-rich--do li::before {
    background-color:var(--dpd-green);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.dpd-rich--avoid li::before {
    background-color:var(--dpd-magenta);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}
.dpd-rich--checklist { font-weight:600; }
.dpd-rich--checklist ul { display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin:0; }
.dpd-rich--checklist li { margin:0; font-size:.82rem; line-height:1.45; }
.dpd-rich--do li, .dpd-rich--avoid li { padding-block:8px; margin:0; border-bottom:1px solid var(--dpd-border-2); }
.dpd-rich--do li::before, .dpd-rich--avoid li::before { top:.55rem; }
.dpd-rich--do li:last-child, .dpd-rich--avoid li:last-child { border-bottom:0; }
@media (max-width:575.98px) { .dpd-rich--checklist ul { grid-template-columns:1fr; } }

/* -------------------------------------------------------------- CTA strip */
.dpd-cstrip {
    background:var(--dpd-navy); border-radius:14px; padding:28px 32px;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.dpd-cstrip__title { color:#fff; font-size:1.15rem; margin-bottom:6px; }
.dpd-cstrip__text { color:rgba(255,255,255,.65); font-size:.88rem; margin:0; max-width:560px; }
.dpd-cstrip__actions { display:flex; flex-wrap:wrap; gap:10px; flex:none; }
@media (max-width:767.98px) {
    .dpd-cstrip { flex-direction:column; align-items:flex-start; padding:24px 20px; }
    .dpd-cstrip__actions { width:100%; }
}
@media (max-width:575.98px) { .dpd-cstrip__actions .btn { flex:1 1 100%; } }