/**
 * Long-form content pages - template_desert_tour_cost.php and
 * template_shared_vs_private.php. Added 2026-08-20 as part of the
 * content-gap items from the SEO audit that day.
 *
 * Shares the site's --dt-* tokens and the dir-head/dir-eyebrow/dir-title
 * classes already used by the directory pages (css/desert-directory.css),
 * so a new content type doesn't introduce a second visual language -
 * this sheet only adds what an article needs on top of that: a reading
 * column, an FAQ list, a comparison table and a CTA block.
 */

.article-wrapper{
    max-width:1220px;
    margin:0 auto;
    padding:0 clamp(16px,3vw,30px) 70px;
    box-sizing:border-box;
}
.article-col{
    max-width:74ch;
    margin:0 auto;
}

.article-lede{
    margin:18px 0 0;
    font-family:'Archivo',sans-serif;
    font-size:16px;
    line-height:1.65;
    color:var(--dt-ink-800);
}

.article-body{font-family:'Archivo',sans-serif;}
.article-body h2{
    margin:44px 0 14px;
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:24px;
    line-height:1.2;
    color:var(--dt-ink-950);
}
.article-body h2:first-of-type{margin-top:34px;}
.article-body p{
    margin:0 0 14px;
    font-size:14.5px;
    line-height:1.7;
    color:var(--dt-ink-800);
}
.article-body ul{
    margin:0 0 16px;
    padding:0 0 0 20px;
}
.article-body li{
    margin:0 0 8px;
    font-size:14.5px;
    line-height:1.6;
    color:var(--dt-ink-800);
}
.article-body strong{color:var(--dt-ink-950);}

/* ---------- comparison table ---------- */
.article-tbl-wrap{
    margin:0 0 20px;
    overflow-x:auto;
    border:1px solid var(--dt-paper-line);
    border-radius:var(--dt-radius);
}
table.article-tbl{
    width:100%;
    border-collapse:collapse;
    min-width:520px;
    font-family:'Archivo',sans-serif;
    font-size:13.5px;
    background:var(--dt-paper-hi);
}
table.article-tbl th{
    text-align:left;
    padding:11px 14px;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--dt-ink-800);
    opacity:.75;
    border-bottom:1px solid var(--dt-paper-line);
    white-space:nowrap;
}
table.article-tbl td{
    padding:11px 14px;
    border-bottom:1px solid var(--dt-paper-line);
    color:var(--dt-ink-800);
    vertical-align:top;
}
table.article-tbl tr:last-child td{border-bottom:0;}
table.article-tbl td:first-child{font-weight:600;color:var(--dt-ink-950);white-space:nowrap;}

/* ---------- two-column compare cards (shared vs private) ---------- */
.article-compare{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin:0 0 20px;
}
.article-compare-card{
    background:var(--dt-paper-hi);
    border:1px solid var(--dt-paper-line);
    border-radius:var(--dt-radius);
    padding:18px 20px 20px;
}
.article-compare-card h3{
    margin:0 0 10px;
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:17px;
    color:var(--dt-ink-950);
}
.article-compare-card ul{margin:0;padding:0 0 0 18px;}
.article-compare-card li{font-size:13.5px;margin-bottom:7px;}

/* ---------- FAQ ---------- */
.article-faq{margin:0 0 10px;}
.article-faq-item{
    border-bottom:1px solid var(--dt-paper-line);
    padding:16px 0;
}
.article-faq-item:first-child{padding-top:0;}
.article-faq-item h3{
    margin:0 0 8px;
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:16px;
    color:var(--dt-ink-950);
}
.article-faq-item p{margin:0;font-size:14px;}

/* ---------- CTA ---------- */
.article-cta{
    margin:40px 0 0;
    padding:26px 28px;
    background:var(--dt-ink-950);
    border-radius:var(--dt-radius);
    text-align:center;
}
.article-cta p{
    margin:0 0 16px;
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:19px;
    color:var(--dt-paper-hi);
}
.article-cta a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 26px;
    background:var(--dt-terracotta);
    color:var(--dt-paper-hi);
    border-radius:3px;
    font-family:'Archivo',sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-decoration:none;
    transition:background .15s ease;
}
.article-cta a:hover{background:var(--dt-terracotta-hi);}

@media (max-width:640px){
    .article-compare{grid-template-columns:1fr;}
}