/*
 * The category (topic) page (PRD Part 3), in the article page's look: every
 * value from tokens.css. Rules the theme's bare `h1`, `a`, `ul` and `button`
 * would otherwise outrank carry `html body .edcc`.
 */

/* Soledad's empty header keeps a 60px bottom margin set on #header (as on the
   article and author pages). */
html body.edcc-page #header, html body.edcc-page .penci-header-wrap > header { margin-bottom: 0; }

.edcc-shell { display: block; background: var(--edct-article-page); }
.edcc {
	box-sizing: border-box; max-width: var(--edct-max); margin: 0 auto; padding: 24px 16px 48px;
	font-family: var(--edct-font-sans); font-feature-settings: "cv11", "ss01", "ss03"; color: var(--edct-fg); -webkit-font-smoothing: antialiased;
}
.edcc *, .edcc *::before, .edcc *::after { box-sizing: border-box; }
@media (min-width: 640px) { .edcc { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .edcc { padding-left: 32px; padding-right: 32px; } }
html body .edcc a { color: inherit; }
.edcc :focus-visible { outline: 2px solid var(--edct-button); outline-offset: 2px; border-radius: 4px; }
.edcc .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.edcc-i { width: 14px; height: 14px; flex: none; }
.edcc-i--16 { width: 16px; height: 16px; }
.edcc-card { background: var(--edct-card); border: 1px solid var(--edct-border-60); box-shadow: var(--edct-shadow-sm); }

/* Ads (ETC-2.1, 2.6, 2.8) */
.edcc-ad { overflow: hidden; border-radius: var(--edct-radius-xl); text-align: center; line-height: 0; }
.edcc-ad img { max-width: 100%; height: auto; }
.edcc-ad--rect { aspect-ratio: 300 / 250; }
.edcc-ad--rect img { width: 100%; height: 100%; object-fit: cover; }
.edcc-ad--bottom { margin-top: 24px; }
.edcc-ad--inline { max-width: 300px; margin: 0 auto; }

/* Breadcrumb */
/* The article page's breadcrumb spacing (article.css .edct-crumbs). */
.edcc-crumbs { margin: 24px 0 32px; }
html body .edcc .edcc-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; padding: 0; list-style: none; font-size: var(--edct-text-14); color: var(--edct-muted-fg); }
.edcc-crumbs li { margin: 0; display: flex; align-items: center; }
.edcc-crumbs a:hover { color: var(--edct-orange-text); }
.edcc-crumbs [aria-current] { font-weight: 500; color: var(--edct-fg); }
.edcc-crumbs__sep .edcc-i { color: hsl(220 10% 42% / 0.6); }

/* The hub card (ETC-2.2) */
.edcc-hub { display: grid; gap: 16px; border-radius: var(--edct-radius-2xl); padding: 22px 20px; }
@media (min-width: 640px) { .edcc-hub { padding: 32px 32px 28px; } }
/* The heading copies the author page's (author.css .edca-head), owner 2026-10-23. */
.edcc-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
@media (min-width: 640px) { .edcc-head { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.edcc-head__text { min-width: 0; }
html body .edcc .edcc-eyebrow { margin: 0; font-size: var(--edct-text-12); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--edct-orange-text); }
html body .edcc .edcc-h1 { margin: 4px 0 0; font: 600 var(--edct-text-24)/1.25 var(--edct-font-sans); letter-spacing: -0.025em; color: var(--edct-fg); text-transform: none; }
@media (min-width: 640px) { html body .edcc .edcc-h1 { font-size: var(--edct-text-30); } }
html body .edcc .edcc-lede { margin: 4px 0 0; font-size: var(--edct-text-14); color: var(--edct-muted-fg); }
.edcc .edcc-strip { display: block; width: 100%; height: auto; aspect-ratio: 1100 / 300; object-fit: cover; border-radius: var(--edct-radius-xl); }
.edcc-intro { max-width: 72ch; font-size: var(--edct-text-17); line-height: 1.75; color: var(--edct-fg); }
.edcc-intro > * { margin: 0 0 .7em; }
.edcc-intro > :last-child { margin-bottom: 0; }
html body .edcc .edcc-intro h2, html body .edcc .edcc-intro h3 { margin: 1.2em 0 .4em; font-family: var(--edct-font-serif); font-size: var(--edct-text-20); font-weight: 700; line-height: 1.3; color: var(--edct-fg); text-transform: none; }
html body .edcc .edcc-intro ul, html body .edcc .edcc-intro ol { padding-left: 1.5rem; }
html body .edcc .edcc-intro ul { list-style: disc; }
html body .edcc .edcc-intro ol { list-style: decimal; }
html body .edcc .edcc-intro a { color: var(--edct-orange-text); }

/* Grid */
/* Columns as on the article page: the breadcrumb runs across the top, the
   topic card and its picture sit in the left column, and the rail starts
   level with the card (owner, 2026-10-23). */
.edcc-grid { display: grid; gap: var(--edct-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.edcc-hub + .edcc-sec, .edcc-hub + .edcc-phone-sub { margin-top: 24px; }
@media (min-width: 1024px) { .edcc-grid:not(.edcc-grid--phone) { grid-template-columns: minmax(0, 1fr) var(--edct-rail); } }
.edcc-main { min-width: 0; }
.edcc-sec + .edcc-sec { margin-top: 36px; }
html body .edcc .edcc-sec__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--edct-border-60); font: 600 var(--edct-text-14)/1.4 var(--edct-font-sans); letter-spacing: 0; color: var(--edct-fg); text-transform: none; }
.edcc-sec__h small { font-weight: 400; font-size: var(--edct-text-12); color: var(--edct-muted-fg); }
.edcc-empty { color: var(--edct-muted-fg); }

/* Card bits */
.edcc-mini-eye { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--edct-orange-text); }
.edcc-mini-eye--grey { color: var(--edct-muted-fg); }
.edcc-meta { display: block; font-size: 11px; color: var(--edct-muted-fg); }
.edcc-pic--none { display: block; width: 100%; height: 100%; background: var(--edct-muted); }
.edcc-bm { position: absolute; top: 12px; right: 12px; z-index: 2; }

/* Most popular (ETC-2.4) */
html body .edcc .edcc-popular { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { html body .edcc .edcc-popular { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.edcc-pcard { position: relative; margin: 0; overflow: hidden; border-radius: var(--edct-radius-xl); transition: box-shadow .15s; }
.edcc-pcard:hover { box-shadow: var(--edct-shadow-md); }
.edcc-pcard__link { display: block; height: 100%; }
.edcc-pcard__frame { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--edct-muted); }
.edcc .edcc-pcard__pic { display: block; width: 100%; height: 100%; object-fit: cover; }
.edcc-pcard__text { display: grid; gap: 4px; padding: 14px 16px 16px; }
.edcc-pcard__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--edct-fg); }
.edcc-more-row { display: flex; justify-content: center; margin-top: 16px; }

/* Buttons */
html body .edcc .edcc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 8px 16px;
	border: 1px solid var(--edct-border); border-radius: var(--edct-radius-md); background: #fff; color: var(--edct-fg);
	font: 500 var(--edct-text-14)/1.4 var(--edct-font-sans); letter-spacing: 0; text-transform: none; cursor: pointer; box-shadow: none;
}
html body .edcc .edcc-btn:hover { background: var(--edct-muted); }
html body .edcc .edcc-btn[hidden] { display: none; }
html body .edcc .edcc-btn:disabled { opacity: .6; cursor: default; }
/* "Load more articles" is the white style, matching "Show more popular" (owner, 2026-10-23, PRD ETS-3). */

/* Latest (ETC-2.5) */
html body .edcc .edcc-latest { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.edcc-lcard { position: relative; margin: 0; border-radius: var(--edct-radius-xl); transition: box-shadow .15s; }
.edcc-lcard:hover { box-shadow: var(--edct-shadow-md); }
.edcc-lcard__link { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 12px; }
@media (min-width: 640px) { .edcc-lcard__link { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; padding: 14px; } }
.edcc-lcard__frame { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--edct-muted); }
@media (min-width: 640px) { .edcc-lcard__frame { aspect-ratio: 16 / 10; } }
.edcc .edcc-lcard__pic { display: block; width: 100%; height: 100%; object-fit: cover; }
.edcc-lcard__text { display: grid; gap: 6px; align-content: start; padding-right: 40px; min-width: 0; }
.edcc-lcard__title { font-family: var(--edct-font-serif); font-size: var(--edct-text-16); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--edct-fg); }
@media (min-width: 640px) { .edcc-lcard__title { font-size: var(--edct-text-20); } }
.edcc-lcard__excerpt { display: none; font-size: var(--edct-text-14); line-height: 1.6; color: var(--edct-muted-fg); }
@media (min-width: 640px) { .edcc-lcard__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }
.edcc-lcard .edcc-bm { top: 14px; right: 14px; }
.edcc-latest__ad { margin: 0; }

/* Pager */
.edcc-pager { display: grid; justify-items: center; gap: 12px; margin-top: 20px; }
.edcc-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 13px; color: var(--edct-muted-fg); }
.edcc-pages a, .edcc-pages__here { min-width: 32px; height: 32px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 6px; border: 1px solid var(--edct-border); background: #fff; }
.edcc-pages a:hover { background: var(--edct-muted); color: var(--edct-fg); }
.edcc-pages__here { background: var(--edct-fg); border-color: var(--edct-fg); color: #fff; }
.edcc-pages__gap { align-self: center; }

/* Rail (ETC-2.6) */
.edcc-rail { display: flex; flex-direction: column; gap: var(--edct-card-gap); min-width: 0; }
.edcc-rail__sticky { display: flex; flex-direction: column; gap: var(--edct-card-gap); }
@media (min-width: 1024px) {
	.edcc-rail { align-self: stretch; }
	/* The whole rail stays in view (owner, 2026-10-23). category.js sets
	   --edcc-rail-top: 80px when the rail fits the screen, or a negative
	   offset when it is taller, so the rail scrolls until its last card is in
	   view and then holds; every card stays reachable. */
	.edcc-rail__sticky { position: sticky; top: var(--edcc-rail-top, var(--edct-sticky-top)); }
	.admin-bar .edcc-rail__sticky { top: var(--edcc-rail-top, calc(var(--edct-sticky-top) + 32px)); }
}
html body .edcc .edcc-subscribe { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: var(--edct-radius-xl); background: var(--edct-button); color: #fff; font: 500 19px/1.3 var(--edct-font-sans); box-shadow: var(--edct-shadow-sm); }
html body .edcc .edcc-subscribe:hover { background: var(--edct-button-hover); color: #fff; }
.edcc-rcard { display: grid; gap: 10px; padding: 16px; border-radius: var(--edct-radius-xl); }
html body .edcc .edcc-rcard__h { margin: 0; font: 600 var(--edct-text-14)/1.4 var(--edct-font-sans); letter-spacing: 0; color: var(--edct-fg); text-transform: none; }
.edcc-sponsor { font-size: var(--edct-text-12); line-height: 1.6; color: var(--edct-muted-fg); }
.edcc-sponsor img { max-height: 24px; width: auto; }
html body .edcc .edcc-sponsor a { color: var(--edct-orange-text); }

/* Phones (ETC-2.8) */
.edcc-phone-sub { margin-top: 24px; }
.edcc-after { display: grid; gap: var(--edct-card-gap); margin-top: 24px; }

/* Sign-up box */
html body .edcc-dialog { width: min(448px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 24px; border: 0; border-radius: var(--edct-radius-xl); background: var(--edct-card); color: var(--edct-fg); box-shadow: var(--edct-shadow-xl); font-family: var(--edct-font-sans); }
.edcc-dialog::backdrop { background: rgb(0 0 0 / 0.5); }
.edcc-dialog:target:not([open]) { display: block; position: fixed; inset: 0; z-index: 100000; height: fit-content; outline: 100vmax solid rgb(0 0 0 / 0.5); }
.edcc-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
html body .edcc-dialog h2 { margin: 0; font: 600 var(--edct-text-18)/1.4 var(--edct-font-sans); color: var(--edct-fg); text-transform: none; }
.edcc-dialog__head p { margin: 4px 0 0; font-size: var(--edct-text-14); color: var(--edct-muted-fg); }
.edcc-x { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--edct-muted-fg); }
.edcc-x:hover { background: var(--edct-muted); }
.edcc-form { margin-top: 16px; }
.edcc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.edcc-field { grid-column: 1 / -1; }
.edcc-field--half { grid-column: span 1; }
.edcc-field label { display: block; font-size: var(--edct-text-12); font-weight: 500; }
.edcc-field label span { color: var(--edct-muted-fg); }
html body .edcc-dialog .edcc-field input { display: block; width: 100%; margin: 4px 0 0; padding: 8px 12px; border: 1px solid var(--edct-border); border-radius: var(--edct-radius-md); background: #fff; color: var(--edct-fg); font: 400 var(--edct-text-14)/1.4 var(--edct-font-sans); box-shadow: none; }
html body .edcc-dialog .edcc-field input:focus { border-color: var(--edct-button); outline: 1px solid var(--edct-button); }
.edcc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.edcc-form__status { margin: 12px 0 0; font-size: var(--edct-text-14); }
.edcc-form__status:empty { display: none; }
.edcc-form__status.is-ok { color: var(--edct-orange-text); font-weight: 500; }
.edcc-form__status.is-error { color: #b42318; }
.edcc-form__buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
html body .edcc-dialog .edcc-btn { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--edct-border); border-radius: var(--edct-radius-md); background: #fff; color: var(--edct-fg); font: 500 var(--edct-text-14)/1.4 var(--edct-font-sans); cursor: pointer; }
html body .edcc-dialog .edcc-btn--primary { border: 0; background: var(--edct-button); color: #fff; font-size: 19px; }
html body .edcc-dialog .edcc-btn--primary:hover { background: var(--edct-button-hover); }

/* Rail cards: Start here, Guide, Writers on this topic (PRD ETC-2.10) */
html body .edcc .edcc-rrows, html body .edcc .edcc-writers { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.edcc-rrows li, .edcc-writers li { margin: 0; }
.edcc-rrows a, .edcc-writers a { display: flex; gap: 12px; align-items: flex-start; border-radius: 6px; }
.edcc-rrows a:hover, .edcc-writers a:hover { background: hsl(220 16% 96% / 0.6); }
/* The image optimiser wraps pictures in <picture>; with WordPress's "sizes: auto" an unsized wrapper and the picture shrink each other, so the wrapper gets the box. */
.edcc .edcc-rrows picture { flex: none; display: block; width: 64px; height: 48px; }
.edcc .edcc-rrow__pic { flex: none; display: block; width: 64px; height: 48px; border-radius: 6px; object-fit: cover; background: var(--edct-muted); }
.edcc-rrow__text, .edcc-writer__text { display: grid; gap: 2px; min-width: 0; }
.edcc-rrow__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--edct-text-12); font-weight: 600; line-height: 1.375; color: var(--edct-fg); }
html body .edcc .edcc-guide { display: grid; gap: 6px; text-decoration: none; transition: box-shadow .15s; }
.edcc-guide:hover { box-shadow: var(--edct-shadow-md); }
.edcc .edcc-guide__pic { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: 4px; }
.edcc-guide__title { font-family: var(--edct-font-serif); font-size: var(--edct-text-18); font-weight: 700; line-height: 1.3; color: var(--edct-fg); }
.edcc-guide__go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--edct-text-12); font-weight: 600; color: var(--edct-orange-text); }
.edcc .edcc-writer__pic { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; object-fit: cover; background: var(--edct-muted); color: var(--edct-muted-fg); font-size: 14px; font-weight: 600; }
.edcc-writer__text { align-self: center; }
.edcc-writer__name { font-size: var(--edct-text-14); font-weight: 600; color: var(--edct-fg); }
html body .edcc .edcc-more { display: inline-flex; align-items: center; gap: 6px; font-size: var(--edct-text-12); font-weight: 600; color: var(--edct-orange-text); }

/* More from edCircuit (ETC-2.17): full width under the list, as the owner approved in the mockup. */
.edcc-band { margin-top: 40px; padding: 24px 20px 26px; border-radius: var(--edct-radius-2xl); background: var(--edct-card); border: 1px solid var(--edct-border-60); box-shadow: var(--edct-shadow-sm); display: grid; gap: 20px; }
@media (min-width: 640px) { .edcc-band { padding: 28px 28px 30px; } }
html body .edcc .edcc-band__h { margin: 4px 0 0; font: 600 var(--edct-text-24)/1.25 var(--edct-font-sans); letter-spacing: -0.02em; color: var(--edct-fg); text-transform: none; }
html body .edcc .edcc-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; }
@media (min-width: 640px) { html body .edcc .edcc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { html body .edcc .edcc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.edcc-tile { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--edct-border-60); border-radius: 14px; overflow: hidden; background: var(--edct-card); }
.edcc-tile__frame { display: block; aspect-ratio: 3 / 2; max-width: 100%; overflow: hidden; background: var(--edct-muted); }
.edcc-tile__frame picture { display: block; width: 100%; height: 100%; }
.edcc .edcc-tile__pic { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.edcc-tile__body { display: grid; gap: 6px; align-content: start; padding: 14px 16px 16px; }
html body .edcc .edcc-tile__name { margin: 0; font: 600 var(--edct-text-18)/1.3 var(--edct-font-sans); color: var(--edct-fg); text-transform: none; letter-spacing: 0; }
html body .edcc .edcc-tile__heads { display: grid; gap: 10px; margin: 6px 0 4px; padding: 10px 0 0; list-style: none; border-top: 1px solid var(--edct-border-60); }
.edcc-tile__heads li { display: grid; gap: 2px; margin: 0; }
.edcc-tile__heads a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 var(--edct-text-16)/1.35 var(--edct-font-serif); color: var(--edct-fg); } /* regular weight (owner, 2026-10-23) */
html body .edcc .edcc-tile__heads a:hover, html body .edcc .edcc-tile__name a:hover { text-decoration: underline; text-underline-offset: 3px; } /* a title underlines when pointed at, as tokens.css's card titles */