/* KevinMD design step 3, batch A (server-rendered pieces from kmd-design-step3.php). Adapted from mockup v17.
   Scoped to html.kmd-v2 (live class). Upload to mu-plugins/kmd-design/step3.css. */

/* 'meta': category label above the headline (lists + articles) */
html.kmd-v2 .kmd-eyebrow{display:block;font:700 12px/1.2 var(--sans)!important;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px!important}
html.kmd-v2 .kmd-eyebrow a{color:var(--b)!important;text-decoration:none!important;display:inline-block;padding:6px 0;border:0!important}
html.kmd-v2 body.single .kmd-eyebrow{margin:0 0 10px!important}

/* 'meta': one-line byline "author · date" at every width; 24 px tap areas; short month on phones */
html.kmd-v2 #primary .post-meta.kmd-byline{display:flex!important;flex-wrap:wrap;align-items:center;gap:0 6px}
html.kmd-v2 #primary .post-meta.kmd-byline .meta-wrapper{display:inline!important;margin:0!important;padding:0!important;border:0!important}
html.kmd-v2 #primary .post-meta.kmd-byline .meta-wrapper:first-child::after{content:"\00b7";margin-left:6px;color:var(--meta)}
html.kmd-v2 #primary .post-meta.kmd-byline .meta-item::before,html.kmd-v2 #primary .post-meta.kmd-byline .meta-item::after{content:none!important;display:none!important} /* the theme draws its own dot on desktop */
html.kmd-v2 #primary .post-meta.kmd-byline a{display:inline-block!important;padding:5px 0!important;border:0!important}
html.kmd-v2 .kmd-d-short{display:none}
@media (max-width:761px){html.kmd-v2 .kmd-d-long{display:none}html.kmd-v2 .kmd-d-short{display:inline}}

/* 'titles': one title above the list; the masthead keeps the logo only */
html.kmd-v2 #primary .kmd-archive-title{font:700 28px/1.2 var(--sans)!important;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)!important;margin:36px 0 20px!important}
@media (max-width:761px){html.kmd-v2 #primary .kmd-archive-title{font-size:22px!important;margin:12px 0 16px!important}}
html.kmd-v2 body.search #primary .all-stories > h2{display:none!important}
html.kmd-v2 body.search #primary main.site-main{border-top:0!important;padding-top:0!important}

/* 'social': navy squares with drawn icons (44 px targets) */
html.kmd-v2 .kmd-social-links--v2{display:flex!important;flex-wrap:wrap;gap:8px;padding:0!important;margin:0!important;list-style:none!important}
html.kmd-v2 .kmd-social-links--v2 li{display:block!important;margin:0!important;padding:0!important;list-style:none!important;text-indent:0!important;width:auto!important;background:none!important}
html.kmd-v2 .kmd-social-links--v2 a.kmd-soc{display:inline-flex!important;align-items:center;justify-content:center;width:44px!important;height:44px!important;background:var(--n)!important;background-image:none!important;text-indent:0!important;border:0!important;color:#fff!important}
html.kmd-v2 .kmd-social-links--v2 a.kmd-soc:hover{background:var(--b)!important}
html.kmd-v2 .kmd-social-links--v2 a.kmd-soc svg{width:20px;height:20px;fill:#fff;flex:none;display:block}

/* ===== Batch B ===== */
/* 'thumbs': beside the summary on desktop (200x105), smaller on tablets (144x76); episodes keep their players there */
html.kmd-v2 #primary article .kmd-thumb{float:right;margin:4px 0 10px 20px;line-height:0;border:0!important}
html.kmd-v2 #primary article .kmd-thumb img{width:200px!important;height:105px!important;object-fit:cover;display:block;margin:0!important;background:var(--panel)}
html.kmd-v2 #primary article .post-content::after{content:"";display:block;clear:both}
@media (min-width:762px) and (max-width:1099px){html.kmd-v2 #primary article .kmd-thumb{margin-left:16px}html.kmd-v2 #primary article .kmd-thumb img{width:144px!important;height:76px!important}}
@media (min-width:762px){html.kmd-v2 #primary article.category-podcast .kmd-thumb,html.kmd-v2 .kmd-excerpt{display:none!important}}

/* 'teasers' (phones): compact rows, thumbnail beside the headline, 3-line summary; the home lead keeps its full teaser */
@media (max-width:761px){
 html.kmd-v2 body.kmd-compact:not(.single) #primary article{padding:18px 0!important;margin:0!important;border-bottom:1px solid var(--rule)}
 html.kmd-v2 body.kmd-compact:not(.single) #primary article .entry-title{font-size:20px!important;line-height:1.25!important;margin-bottom:6px!important}
 html.kmd-v2 #primary article.kmd-has-thumb:not(.kmd-lead) .post-content{display:grid;grid-template-columns:minmax(0,1fr) 112px;column-gap:14px}
 html.kmd-v2 #primary article.kmd-has-thumb:not(.kmd-lead) .post-content > *{grid-column:1/-1}
 html.kmd-v2 #primary article.kmd-has-thumb:not(.kmd-lead) .post-content > .kmd-eyebrow{grid-row:1}
 html.kmd-v2 #primary article.kmd-has-thumb:not(.kmd-lead) .post-content > .entry-title{grid-column:1;grid-row:2}
 html.kmd-v2 #primary article.kmd-has-thumb:not(.kmd-lead) .post-content > .kmd-thumb{grid-column:2;grid-row:2;float:none;margin:4px 0 8px}
 html.kmd-v2 #primary article.kmd-has-thumb:not(.kmd-lead) .post-content > .entry-header{grid-row:3} /* fixed rows: without a category label (category pages) auto-placement would lift the byline above the headline */
 html.kmd-v2 #primary article.kmd-has-thumb:not(.kmd-lead) .post-content > :is(.kmd-excerpt,.ast-excerpt-container){grid-row:4}
 html.kmd-v2 #primary article .kmd-thumb img{width:112px!important;height:59px!important}
 html.kmd-v2 #primary article.kmd-lead .kmd-thumb,html.kmd-v2 #primary article.kmd-lead .kmd-excerpt{display:none!important}
 html.kmd-v2 .kmd-excerpt{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:400 16px/1.5 var(--sans)!important;color:var(--ink)!important;margin:4px 0 0!important}
 html.kmd-v2 body.kmd-compact #primary article:not(.kmd-lead):has(.kmd-excerpt) .ast-excerpt-container{display:none!important}
}

/* 'rail': podcast column, 3 thumbnails then titles only */
html.kmd-v2 .kmd-rail li.kmd-rail-text .kmd-rail-thumb{display:none!important}
html.kmd-v2 .kmd-rail li.kmd-rail-text{display:block!important;padding:9px 0!important;border-top:1px solid var(--rule);margin:0!important}
html.kmd-v2 .kmd-rail li.kmd-rail-text h4{margin:0!important}
html.kmd-v2 .kmd-rail li.kmd-rail-text a{font-size:16px!important;line-height:1.3!important}
