/* dt-blog.css - Layer-1 skin (Blog standardization). GENERATED from the canonical
   Cohort-A blog template; consumes dt-core tokens. Enqueued on is_singular('post')
   by 19-dt-blog-css.php (priority 20, after core@5). Per-post pillar color comes from a
   `.dt-pillar-{p}` wrapper class on the post (core bridge resolves --pillar*).
   Regenerate: python 34_Design_System/pipeline/build_dt_blog.py
   Do NOT hand-edit; do NOT re-add hardcoded pillar hex or the Google-Fonts @import. */
/* === HERO === */

.dt-hero{background:linear-gradient(135deg,var(--pillar) 0%,var(--pillar-mid) 50%,var(--pillar-deep) 100%);color:#fff;padding:40px 20px 32px;text-align:center;position:relative;overflow:hidden}

.dt-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(255,255,255,.06) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,255,255,.04) 0%,transparent 50%);pointer-events:none}

.dt-hero-inner{position:relative;z-index:1;max-width:900px;margin:0 auto}

.dt-hero h1{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(1.8rem,5.5vw,2.8rem);font-weight:400;line-height:1.1;margin:0 0 16px;text-shadow:0 3px 12px rgba(0,0,0,.3);color:#fff}

.dt-hero-parent{font-family:'Instrument Sans',sans-serif;font-size:clamp(.85rem,2.2vw,.95rem);margin:0 0 12px;opacity:.9}

.dt-hero-parent a{color:rgba(255,255,255,.85);text-decoration:none;font-weight:500;transition:opacity .2s}

.dt-hero-parent a:hover{opacity:1;text-decoration:underline}

.dt-hero-sub{font-family:'Instrument Sans',sans-serif;font-size:clamp(1rem,3vw,1.25rem);opacity:.92;font-weight:400;margin:0 auto 28px;max-width:620px;line-height:1.55;color:#fff}

.dt-hero-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:8px}

.dt-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);border-radius:30px;padding:8px 16px;font-family:'Instrument Sans',sans-serif;font-size:clamp(.78rem,2.2vw,.9rem);font-weight:500;color:#fff;white-space:nowrap;transition:background .3s}

.dt-badge:hover{background:rgba(255,255,255,.22)}

.dt-badge svg{width:18px;height:18px;flex-shrink:0}

.dt-hero-wave{width:100%;height:50px;background:linear-gradient(135deg,var(--pillar) 0%,var(--pillar-mid) 50%,var(--pillar-deep) 100%);position:relative}

.dt-hero-wave::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50px;background:#f9f9f9;border-radius:60% 60% 0 0/100% 100% 0 0}



/* === GRIDS === */

.dt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 auto;max-width:1200px}

@media(min-width:768px){.dt-grid{grid-template-columns:repeat(4,1fr);gap:18px}}

.dt-grid.cols-3{max-width:920px}@media(min-width:768px){.dt-grid.cols-3{grid-template-columns:repeat(3,1fr)}}



/* === CARDS === */

.dt-card{background:#fff;border:2px solid #eee;border-radius:12px;padding:12px;text-align:center;box-shadow:0 3px 12px color-mix(in srgb,var(--pillar),transparent 92%);transition:all .3s ease;display:flex;flex-direction:column;height:100%}

@media(min-width:768px){.dt-card{padding:16px}}

.dt-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px color-mix(in srgb,var(--pillar),transparent 65%),0 0 0 1px color-mix(in srgb,var(--pillar),transparent 85%);border-color:var(--pillar)}

.dt-card .img-wrapper{height:140px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f9f9f9;border-radius:10px;margin-bottom:10px;border:1px solid #f0f0f0}

@media(min-width:768px){.dt-card .img-wrapper{height:160px}}

.dt-card img{max-height:100%;max-width:100%;width:auto;object-fit:contain;transition:transform .3s}

.dt-card:hover img{transform:scale(1.05)}

.dt-card h3{color:var(--dt-ink);font-size:clamp(.85rem,2.5vw,1.05rem);margin:auto 0 0 0;line-height:1.3;font-family:'Instrument Sans',sans-serif;font-weight:600}



/* === SECTIONS === */

.dt-section{margin:36px 0}

.dt-sec-head{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}

.dt-sec-head h2{font-family:'DM Serif Display',Georgia,serif;color:var(--pillar);font-size:clamp(1.4rem,4vw,2rem);font-weight:400;margin:0;line-height:1.2}

.dt-sec-line{width:80px;height:3px;background:linear-gradient(90deg,var(--pillar),var(--pillar-border));border-radius:3px;margin:8px auto 12px}

.dt-sec-desc{font-family:'Instrument Sans',sans-serif;font-size:clamp(.95rem,2.6vw,1.05rem);color:var(--dt-body);line-height:1.75;text-align:center;max-width:750px;margin:0 auto 20px;padding:0 8px}

.dt-sec-desc a{color:var(--pillar);text-decoration:none;font-weight:600}



/* === FAQ === */

.faq-item{border-bottom:1px solid #e8e8e8;padding:0}

.faq-item summary{cursor:pointer;padding:18px 0;font-family:'Instrument Sans',sans-serif;font-size:clamp(.95rem,2.6vw,1.05rem);font-weight:600;color:var(--dt-ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}

.faq-item summary::-webkit-details-marker{display:none}

.faq-item summary::after{content:'+';font-size:1.4rem;color:var(--pillar);font-weight:300;flex-shrink:0;transition:transform .2s}

.faq-item[open] summary::after{content:'−'}

.faq-item .faq-answer{padding:0 0 18px;font-family:'Instrument Sans',sans-serif;font-size:clamp(.9rem,2.4vw,1rem);color:var(--dt-body);line-height:1.75}

.faq-item .faq-answer a{color:var(--pillar);text-decoration:none;font-weight:600}