/* ============================================================
   Euderzr® FFKM Prototype — Page-specific styles
   ============================================================ */

/* ---------- Grade detail layout ---------- */
.grade-hero { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--space-6); align-items: start; }
.grade-hero__aside { position: sticky; top: calc(var(--header-h) + 16px); }
.spec-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); }
.spec-card__visual { display: grid; place-items: center; background: var(--color-bg-alt); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-4); }
.spec-card__row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.spec-card__row:last-child { border-bottom: 0; }
.spec-card__row dt { color: var(--color-text-muted); }
.spec-card__row dd { margin: 0; font-weight: var(--fw-semibold); font-family: var(--font-mono); }
@media (max-width: 900px) { .grade-hero { grid-template-columns: 1fr; } .grade-hero__aside { position: static; } }

/* positioning banner on grade pages */
.grade-position { background: var(--color-brand-050); border: 1px solid var(--color-brand-100); border-left: 4px solid var(--color-brand-500); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-size: var(--fs-md); color: var(--color-text); margin: var(--space-5) 0; }

/* cross-reference compliant block */
.crossref { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.crossref__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.crossref__row:last-child { border-bottom: 0; }
.crossref__ours { font-weight: var(--fw-bold); color: var(--color-brand-700); }
.crossref__theirs { font-size: var(--fs-sm); color: var(--color-text-muted); }
.crossref__arrow { color: var(--color-border-strong); }
.rarrow { width: 22px; height: 22px; }
.tm-note { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-3); }
@media (max-width: 640px) { .crossref__row { grid-template-columns: 1fr; gap: var(--space-2); } .crossref__arrow { transform: rotate(90deg); } }

/* related grades chips */
.related-grades { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Temp performance bar (SVG figure) ---------- */
.tempfig { display: flex; flex-direction: column; gap: var(--space-3); }
.tempfig__bar { display: grid; grid-template-columns: 130px 1fr; gap: var(--space-4); align-items: center; font-size: var(--fs-sm); }
.tempfig__name { font-weight: var(--fw-semibold); font-family: var(--font-mono); }
.tempfig__track { height: 26px; background: var(--color-bg-alt); border-radius: var(--radius-pill); position: relative; overflow: hidden; }
.tempfig__fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-brand-700), var(--color-brand-500)); }
.tempfig__fill--ours { background: linear-gradient(90deg, #083EB0, #0B5FFF); }
.tempfig__val { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: #fff; }

/* ---------- Semiconductor process tags ---------- */
.proc-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.proc-tag { font-family: var(--font-mono); font-size: var(--fs-xs); padding: 5px 11px; border-radius: var(--radius-sm); background: var(--color-bg-alt); border: 1px solid var(--color-border); color: var(--color-text); }

/* pain points */
.pain { display: flex; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-danger-bg); background: var(--color-danger-bg); border-radius: var(--radius-md); }
.pain svg { width: 22px; height: 22px; color: var(--color-danger); flex: none; margin-top: 2px; }
.pain p { margin: 0; font-size: var(--fs-sm); color: var(--color-text); }

/* ---------- O-ring size table highlight ---------- */
.size-table .num { font-family: var(--font-mono); }
.size-note { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-3); }

/* groove svg container */
.groove-fig { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 767px) { .groove-fig { grid-template-columns: 1fr; } }

/* ---------- About page ---------- */
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.about-stat { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); background: #fff; text-align: center; }
.about-stat__v { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-brand-700); font-family: var(--font-mono); }
.about-stat__l { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
@media (max-width: 767px) { .about-stats { grid-template-columns: 1fr 1fr; } }

.cert-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.cert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.cert__ico { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--color-brand-050); color: var(--color-brand-700); display: grid; place-items: center; }
.cert__name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.cert__desc { font-size: var(--fs-xs); color: var(--color-text-muted); }
@media (max-width: 600px) { .cert-list { grid-template-columns: 1fr; } }

/* ---------- Capability timeline / file list ---------- */
.file-list { list-style: none; padding: 0; margin: 0; }
.file-list li { display: flex; gap: var(--space-3); align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.file-list li:last-child { border-bottom: 0; }
.file-list .f-ico { color: var(--color-brand-600); flex: none; }

/* ---------- RFQ layout ---------- */
.rfq-layout { display: grid; grid-template-columns: 1.4fr .6fr; gap: var(--space-7); align-items: start; }
.rfq-aside { position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 900px) { .rfq-layout { grid-template-columns: 1fr; } .rfq-aside { position: static; } }

.contact-card { background: var(--color-bg-dark); color: var(--color-text-on-dark); border-radius: var(--radius-lg); padding: var(--space-5); }
.contact-card h4 { color: #fff; }
.contact-card a { color: var(--color-brand-100); }

/* ---------- Hero decorative SVG (orbital rings) ---------- */
.orbital { width: 100%; height: auto; }
.orbital .ring { fill: none; stroke: rgba(255,255,255,.18); }
.orbital .ring-2 { stroke: rgba(255,255,255,.28); }
.orbital .core { fill: var(--color-brand-500); }
.orbital .spark { fill: #fff; }

/* ---------- O-ring cross-section diagram ---------- */
.oillust { width: 100%; max-width: 320px; }

/* fade-in (progressive, no-JS safe: visible by default) */
.reveal { opacity: 1; }

/* print-friendly datasheet button area */
.dl-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }