/* Shared components. Tokens only: no raw color values in this file. */

/* ---------- sections and bands ---------- */
.section{padding-block:var(--space-section)}
.section--lg{padding-block:var(--space-section-lg)}
.band-mint{background:var(--color-surface-strong)}
.band-tint{background:var(--color-surface-tint)}
.band-plum{background:var(--color-surface-raised);color:var(--color-text-secondary)}
.band-black{background:var(--color-surface-base);color:var(--color-text-secondary)}
.band-plum a:not(.btn),.band-black a:not(.btn){color:var(--color-text-secondary)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4) var(--space-8);margin-bottom:var(--space-block)}
.section-head h2{margin:0}

/* ---------- tags, byline ---------- */
.tag{display:inline-block;padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);background:var(--color-surface-strong);color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-heavy);line-height:1.2}
.byline{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-7);margin:0;font-size:var(--font-size-sm);color:var(--color-text-muted)}
.byline strong{color:var(--color-text-primary)}
.byline a{color:inherit}

/* ---------- picture and cards ---------- */
.media{overflow:hidden;border-radius:var(--radius-sm);background:var(--color-surface-strong)}
.media img{width:100%;height:100%;object-fit:cover}
.card{display:flex;flex-direction:column;gap:var(--space-7);position:relative;min-width:0}
.card .media{aspect-ratio:16/9}
.card-body{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.card-title{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-heavy);line-height:var(--line-height-heading)}
.card-title a{text-decoration:none;color:var(--color-text-primary)}
.card-title a::after{content:"";position:absolute;inset:0}
.card-title a:hover{text-decoration:underline;text-decoration-thickness:var(--space-2)}
.card-text{margin:0;color:var(--color-text-muted)}
.card--feature .card-title{font-size:clamp(var(--font-size-2xl),1.1rem + 1.4vw,var(--font-size-3xl))}
.card--h{flex-direction:row;align-items:center;gap:var(--space-7)}
.card--h .media{flex:0 0 38%;aspect-ratio:4/3}
.card--h .card-title{font-size:var(--font-size-lg)}
.card--overlay{justify-content:flex-end;min-height:20rem;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface-base);color:var(--color-text-secondary);isolation:isolate}
.card--overlay .media{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;z-index:-2}
.card--overlay::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,color-mix(in srgb,var(--color-surface-base) 88%,transparent) 0%,color-mix(in srgb,var(--color-surface-base) 62%,transparent) 42%,transparent 100%)}
.card--overlay .card-body{padding:var(--space-8)}
.card--overlay .card-title a,.card--overlay .card-text{color:var(--color-text-secondary)}
.card--overlay .tag{background:var(--color-text-secondary);color:var(--color-text-primary)}
.card:focus-within{outline:3px solid var(--color-text-primary);outline-offset:var(--space-3);border-radius:var(--radius-sm)}
.card:focus-within a:focus-visible{outline:0}
.card--overlay:focus-within{outline-color:var(--color-text-secondary)}
.grid-3{display:grid;gap:var(--space-block)}
@media (min-width:768px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- breadcrumb, notices, tables ---------- */
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);list-style:none;margin:0;padding:var(--space-7) 0;font-size:var(--font-size-sm)}
.breadcrumb li+li::before{content:"/";margin-right:var(--space-4);color:var(--color-text-muted)}
.breadcrumb a{display:inline-flex;align-items:center;min-height:24px}
.notice{border:2px solid var(--color-text-primary);border-left-width:8px;border-radius:var(--radius-xs);padding:var(--space-7) var(--space-8);background:var(--color-surface-tint);margin-block:var(--space-8)}
.notice p:last-child{margin:0}
.notice--health{border-color:var(--color-status-danger);background:var(--color-status-danger-surface);color:var(--color-status-danger)}
.notice--health a{color:var(--color-status-danger)}
.notice--affiliate{background:var(--color-surface-strong)}
.notice--draft{background:var(--color-surface-tint);border-style:dashed}
.table-scroll{overflow-x:auto;border:var(--space-1) solid var(--color-border-subtle);border-radius:var(--radius-xs)}
table.table{width:100%;border-collapse:collapse;font-size:var(--font-size-md)}
.table th,.table td{text-align:left;padding:var(--space-5) var(--space-7);border-bottom:var(--space-1) solid var(--color-border-subtle);vertical-align:top}
.table thead th{background:var(--color-surface-strong);font-size:var(--font-size-sm);font-weight:var(--font-weight-heavy)}
.table tbody th{font-weight:var(--font-weight-strong)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:var(--space-4)}
.field label,.field legend{font-weight:var(--font-weight-strong)}
.input{min-height:48px;padding:var(--space-4) var(--space-7);border:2px solid var(--color-border-control);border-radius:var(--radius-md);background:var(--color-surface-page);color:var(--color-text-primary);font:var(--font-weight-base) var(--font-size-md)/1.2 var(--font-family-stack);width:100%}
.input:hover{border-color:var(--color-text-primary)}
.input[aria-invalid=true]{border-color:var(--color-status-danger)}
.input:disabled{opacity:.5}
.form-msg{margin:var(--space-5) 0 0;font-weight:var(--font-weight-strong)}
.form-msg[data-state=error]{color:var(--color-status-danger)}

/* ---------- newsletter ---------- */
.newsletter{display:grid;gap:var(--space-block);align-items:center}
.newsletter h2{margin-bottom:var(--space-4)}
.newsletter-form{display:flex;flex-direction:column;gap:var(--space-5)}
.newsletter-form .row{display:flex;flex-direction:column;gap:var(--space-5)}
.newsletter-fine{margin:var(--space-5) 0 0;font-size:var(--font-size-sm);color:var(--color-text-muted)}
@media (min-width:768px){
  .newsletter{grid-template-columns:1fr 1fr}
  .newsletter-form .row{flex-direction:row}
  .newsletter-form .input{flex:1}
}

/* ---------- footer ---------- */
.site-footer{background:var(--color-surface-base);color:var(--color-text-secondary);padding-block:var(--space-section) var(--space-block)}
.site-footer a{color:var(--color-text-secondary)}
.footer-top{display:flex;flex-wrap:wrap;gap:var(--space-block) var(--space-section);justify-content:space-between;padding-bottom:var(--space-block);border-bottom:var(--space-1) solid var(--color-text-muted)}
.footer-brand{max-width:22rem}
.footer-brand .brand{color:var(--color-text-secondary)}
.footer-mark{width:44px;height:44px;border-radius:var(--radius-xs);background:var(--color-surface-page);padding:var(--space-3);object-fit:contain}
.footer-tagline{margin:var(--space-7) 0 0;color:var(--color-surface-strong)}
.footer-menu{display:grid;gap:var(--space-block) var(--space-section);grid-template-columns:repeat(2,minmax(0,1fr));flex:1;min-width:min(100%,24rem)}
.footer-menu h2{margin:0 0 var(--space-5);font-size:var(--font-size-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--color-surface-strong)}
.footer-menu ul{list-style:none}
.footer-menu a{display:flex;align-items:center;min-height:44px;font-weight:var(--font-weight-strong);text-decoration:none}
.footer-menu a:hover{text-decoration:underline}
.footer-bottom{display:flex;flex-direction:column;gap:var(--space-7);padding-top:var(--space-block);font-size:var(--font-size-sm)}
.footer-disclosure{margin:0;max-width:60rem;color:var(--color-surface-strong)}
.footer-legal{display:flex;flex-wrap:wrap;gap:0 var(--space-8);list-style:none}
.footer-legal a{display:inline-flex;align-items:center;min-height:44px}
.footer-copy{margin:0}
@media (min-width:768px){.footer-menu{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- utility pages: contact form, search, plain lists ---------- */
.contact-form{display:grid;gap:var(--space-7);max-width:var(--measure);margin-top:var(--space-section)}
.contact-form h2{margin:0}
.form-note{margin:0;color:var(--color-text-muted)}
.form-status{margin:0;font-weight:var(--font-weight-strong)}
textarea.input{min-height:9rem;resize:vertical;line-height:1.5}
.plain-list{list-style:none;margin:0 0 var(--space-block);padding:0;columns:1;column-gap:var(--space-block)}
@media (min-width:768px){.plain-list{columns:2}}
.plain-list li{break-inside:avoid;margin:0 0 var(--space-4)}
.search-form{display:flex;flex-wrap:wrap;gap:var(--space-7);align-items:end;margin-bottom:var(--space-7)}
.search-form .field{flex:1 1 16rem}
.search-results{list-style:none;margin:0;padding:0}
.search-results li{padding:var(--space-6) 0;border-bottom:var(--space-1) solid var(--color-border-subtle)}
.search-results a{font-weight:var(--font-weight-heavy);font-size:var(--font-size-lg)}
.search-results p{margin:var(--space-3) 0 0;color:var(--color-text-muted)}
.hub-meta{font-size:var(--font-size-sm)}
.hub-list--media .hub-card{display:grid;grid-template-columns:1fr;padding:0;overflow:hidden}
.hub-list--media .thumb{aspect-ratio:16/9;background:var(--color-surface-tint);overflow:hidden}
.hub-list--media .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hub-list--media .hub-card>div:last-child{padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
.contact-form .btn{justify-self:start}