/* Bucovina Innovation Alliance: media kit page. Extends landing.css. */

/* ---------- Hero ---------- */
.mk-hero { padding: var(--bia-space-9) 0 var(--bia-space-9); border-bottom: 1px solid var(--bia-border); }
.mk-hero h1 { font-size: clamp(56px, 8vw, 112px); line-height: var(--bia-lh-tight); margin: var(--bia-space-4) 0 var(--bia-space-5); }
.mk-hero .sub { color: var(--bia-muted); max-width: 560px; }
.mk-downloads { display: flex; flex-wrap: wrap; gap: var(--bia-space-3); margin-top: var(--bia-space-7); }
.mk-downloads .meta { font-weight: 400; font-size: var(--bia-fs-small); opacity: .75; margin-left: 4px; }
.mk-contents { display: flex; flex-wrap: wrap; gap: var(--bia-space-3) var(--bia-space-6); margin-top: var(--bia-space-7); }
.mk-contents li { display: flex; align-items: center; gap: 10px; color: var(--bia-muted); font-size: var(--bia-fs-small); }
.mk-contents li::before { content: ""; width: 6px; height: 6px; background: var(--bia-blue-500); flex: none; }

/* ---------- Logo files ---------- */
.asset-group { padding: var(--bia-space-7) 0; border-top: 1px solid var(--bia-grey-200); display: grid; grid-template-columns: 1fr 3fr; gap: var(--bia-space-6); }
.asset-group-head h3 { font-size: var(--bia-fs-h3); margin-bottom: var(--bia-space-2); }
.asset-group-head p { color: var(--bia-grey-700); font-size: var(--bia-fs-small); max-width: 32ch; }
.assets { display: grid; gap: var(--bia-space-3); }
.assets.cols-2 { grid-template-columns: repeat(4, 1fr); } /* same card width as the 4-up rows */
.assets.cols-3 { grid-template-columns: repeat(3, 1fr); }
.assets.cols-4 { grid-template-columns: repeat(4, 1fr); }
.asset { border: 1px solid var(--bia-grey-200); display: flex; flex-direction: column; transition: border-color 400ms var(--ease); }
.asset:hover { border-color: var(--bia-ink); }
.asset-preview { aspect-ratio: 16 / 10; display: grid; place-items: center; padding: var(--bia-space-5); }
.asset-preview img { max-width: 100%; max-height: 64px; width: auto; height: auto; }
.asset-preview.fit { aspect-ratio: 1 / 1; padding: 0; }
.asset-preview.fit img { display: block; width: 100%; height: 100%; max-height: none; }
.asset-preview img.tiny { max-height: 40px; }
.asset-meta { padding: var(--bia-space-3) var(--bia-space-4) var(--bia-space-4); display: grid; gap: 6px; border-top: 1px solid var(--bia-grey-200); }
.asset-name { font-family: var(--bia-font-display); font-weight: 500; font-size: var(--bia-fs-small); }
.asset-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.asset-links a { font-size: 13px; font-weight: 600; color: var(--bia-blue-600); text-decoration: none; }
.asset-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Usage ---------- */
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bia-space-3); }
.rule { background: var(--bia-white); border: 1px solid var(--bia-grey-200); padding: var(--bia-space-6); display: flex; flex-direction: column; gap: var(--bia-space-4); }
.rule h3 { font-size: var(--bia-fs-h4); }
.rule p { font-size: var(--bia-fs-small); color: var(--bia-grey-700); }
.match { display: grid; gap: var(--bia-space-3); }
.match li { display: grid; grid-template-columns: 36px 1fr; column-gap: var(--bia-space-3); align-items: center; font-size: var(--bia-fs-small); color: var(--bia-grey-700); }
.match b { display: block; color: var(--bia-ink); font-family: var(--bia-font-display); font-weight: 500; font-size: var(--bia-fs-body); }
.match .chip { grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center; font-family: var(--bia-font-display); font-weight: 700; font-size: 13px; border: 1px solid var(--bia-grey-200); }
.clear { align-self: flex-start; padding: 22px; outline: 1.5px dashed var(--bia-blue-500); background: repeating-linear-gradient(45deg, rgba(47,125,225,.07) 0 6px, transparent 6px 12px); }
.clear img { height: 40px; width: auto; background: var(--bia-white); }
.rule table { border-collapse: collapse; font-size: var(--bia-fs-small); }
.rule th, .rule td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--bia-grey-200); }
.rule th { font-family: var(--bia-font-display); font-weight: 500; color: var(--bia-grey-500); font-size: var(--bia-fs-label); letter-spacing: var(--bia-tracking-label); text-transform: uppercase; }
.sub-title { font-size: var(--bia-fs-h3); margin: var(--bia-space-8) 0 var(--bia-space-4); }
.donts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bia-space-3); }
.donts li { display: flex; flex-direction: column; border: 1px solid var(--bia-grey-200); background: var(--bia-white); }
.dont-preview { aspect-ratio: 16 / 9; display: grid; place-items: center; padding: var(--bia-space-5); overflow: hidden; }
.dont-preview img { max-height: 40px; width: auto; }
.donts span { padding: var(--bia-space-3) var(--bia-space-4); font-size: var(--bia-fs-small); font-weight: 600; color: #B00020; }
.donts span::before { content: "✕ "; }

/* ---------- Colors ---------- */
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bia-space-3); }
.swatch { min-height: 240px; padding: var(--bia-space-5); display: flex; flex-direction: column; gap: var(--bia-space-3); }
.swatch.bordered { box-shadow: inset 0 0 0 1px var(--bia-grey-200); }
.swatch .sw-name { font-family: var(--bia-font-display); font-weight: 700; font-size: var(--bia-fs-h4); }
.swatch dl { margin: auto 0 0; display: grid; gap: 4px; }
.swatch dl div { display: grid; grid-template-columns: 52px 1fr; font-size: var(--bia-fs-small); }
.swatch dt { font-family: var(--bia-font-display); font-weight: 500; font-size: var(--bia-fs-label); letter-spacing: var(--bia-tracking-label); opacity: .7; padding-top: 2px; }
.swatch dd { margin: 0; font-variant-numeric: tabular-nums; }
.swatch p { font-size: var(--bia-fs-small); opacity: .85; margin: 0; }
[data-surface="field"].swatch, [data-surface="field"].swatch * { color: var(--bia-ink); }
[data-surface="field"].swatch .sw-name { color: var(--bia-white); }
.copy { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.copy.copied::after { content: "  Copied"; font-size: var(--bia-fs-label); font-weight: 600; text-decoration: none; display: inline-block; margin-left: 6px; }
.note { margin-top: var(--bia-space-5); font-size: var(--bia-fs-small); color: var(--bia-muted); max-width: 80ch; }

/* ---------- Type ---------- */
.fonts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bia-space-3); }
.font-card { padding: var(--bia-space-7); display: flex; flex-direction: column; gap: var(--bia-space-3); }
.font-card .specimen { font-size: clamp(72px, 9vw, 128px); line-height: 1; letter-spacing: -0.03em; margin-bottom: var(--bia-space-4); }
.font-card .specimen.display { font-family: var(--bia-font-display); font-weight: 700; }
.font-card .specimen.text { font-family: var(--bia-font-text); font-weight: 600; letter-spacing: -0.04em; }
.font-card h3 { font-size: var(--bia-fs-h3); }
.font-card p { color: var(--bia-muted); font-size: var(--bia-fs-body); }
.font-card a { font-weight: 600; font-size: var(--bia-fs-small); }

/* ---------- Graphics ---------- */
.graphics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bia-space-3); }
.graphics li { border: 1px solid var(--bia-border); padding: var(--bia-space-5); display: flex; flex-direction: column; gap: var(--bia-space-3); }
.graphics svg { width: 100%; height: auto; background: var(--bia-ink-raised); margin-bottom: var(--bia-space-2); }
.graphics h3 { font-size: var(--bia-fs-h4); }
.graphics p { color: var(--bia-muted); font-size: var(--bia-fs-small); }

/* ---------- Boilerplate ---------- */
.boiler { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bia-space-3); }
.boiler-card { background: var(--bia-white); border: 1px solid var(--bia-grey-200); padding: var(--bia-space-6); display: flex; flex-direction: column; gap: var(--bia-space-3); }
[data-surface="ink"].boiler-card { background: var(--bia-ink); border-color: var(--bia-ink); }
.boiler-card.wide { grid-column: span 2; }
.boiler-card h3 { font-size: var(--bia-fs-label); font-weight: 500; letter-spacing: var(--bia-tracking-label); text-transform: uppercase; color: var(--bia-muted); }
.boiler-card p { font-size: var(--bia-fs-body); }
.boiler-card .tagline { font-family: var(--bia-font-display); font-weight: 700; font-size: var(--bia-fs-h3); line-height: 1.2; margin: 0; }
.boiler-card .tagline.ro { font-weight: 500; color: var(--bia-grey-500); }
.boiler-card .hint { font-size: var(--bia-fs-small); color: var(--bia-muted); margin-top: auto; }
.boiler-card .btn.copy { align-self: flex-start; margin-top: auto; text-decoration: none; padding: 10px 16px; font-size: var(--bia-fs-small); }
[data-surface="ink"].boiler-card a { color: var(--bia-white); font-family: var(--bia-font-display); font-weight: 500; font-size: var(--bia-fs-h4); text-decoration-color: var(--bia-blue-500); text-underline-offset: 5px; overflow-wrap: anywhere; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .assets.cols-2, .assets.cols-4, .graphics, .donts { grid-template-columns: repeat(2, 1fr); }
  .asset-group { grid-template-columns: 1fr; gap: var(--bia-space-4); }
  .boiler { grid-template-columns: 1fr 1fr; }
  .boiler-card.wide { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .rules, .swatches, .fonts { grid-template-columns: 1fr; }
  .assets.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .assets.cols-2, .assets.cols-3, .assets.cols-4, .graphics, .donts, .boiler { grid-template-columns: 1fr; }
  .mk-downloads .btn { width: 100%; justify-content: space-between; }
}