/* ==========================================================================
   Telegas — shared component extensions for .tech / .tv / .news
   Load AFTER styles.css.
   ========================================================================== */

/* Hero without a photo (tv / news) */
.hero.plain { overflow: visible; }
.hero.plain::before { background-image: none; }

/* Hero stat row */
.proof {
    display: flex; flex-wrap: wrap; gap: 34px;
    margin-top: 42px; padding-top: 26px;
    border-top: 1px solid var(--glass-border);
}
.proof > div { min-width: 120px; }
.proof strong {
    display: block; font-family: var(--font-display);
    font-size: 1.5rem; line-height: 1; margin-bottom: 4px; color: var(--text);
}
.proof span { font-size: 0.8rem; color: var(--muted); }

/* Media split (image + copy) */
.media img {
    width: 100%; border-radius: var(--radius);
    border: 1px solid var(--glass-border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.media.tall img { aspect-ratio: 3 / 4; object-fit: cover; }

/* Small link grid */
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.mini-grid a {
    display: block; padding: 14px 16px; border-radius: var(--radius-sm);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    text-decoration: none; transition: 0.25s;
}
.mini-grid a:hover { border-color: var(--glass-border-strong); background: var(--glass-bg-2); transform: translateY(-2px); }
.mini-grid strong { display: block; font-family: var(--font-nav); font-size: 0.9rem; }
.mini-grid span { font-size: 0.78rem; color: var(--muted); }

/* Check list */
.check-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 22px 0; }
.check-list li { position: relative; padding-left: 28px; color: var(--muted); }
.check-list li::before {
    content: "✓"; position: absolute; left: 0; top: 0;
    color: var(--accent); font-weight: 800;
}

/* Vertical link list */
.link-list { display: flex; flex-direction: column; margin-top: 18px; }
.link-list a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 2px; border-bottom: 1px solid var(--glass-border);
    text-decoration: none; font-family: var(--font-nav); font-weight: 500;
    color: var(--text); transition: color 0.2s, padding 0.2s;
}
.link-list a span { color: var(--accent); }
.link-list a:hover { color: var(--accent); padding-left: 8px; }

/* Spec / passport card */
.spec-card { padding: 26px; }
.spec-head {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-nav); font-weight: 700; font-size: 0.78rem;
    letter-spacing: 0.06em; margin-bottom: 18px;
}
.spec-id {
    font-family: ui-monospace, Menlo, monospace; font-size: 1.3rem;
    color: var(--accent); margin-bottom: 18px;
}
.spec-qr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 96px; margin-bottom: 22px; }
.spec-qr span { aspect-ratio: 1; background: var(--glass-border-strong); border-radius: 3px; }
.spec-qr span:nth-child(1), .spec-qr span:nth-child(5), .spec-qr span:nth-child(9) { background: var(--accent); }
.spec-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.spec-card dt { font-size: 0.68rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 3px; }
.spec-card dd { font-size: 0.92rem; }

/* Full-bleed image band — pass the image via style="--img:url('assets/x.jpg')" */
.band {
    position: relative; overflow: hidden;
    border-radius: var(--radius); border: 1px solid var(--glass-border);
}
.band::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(95deg, rgba(1, 20, 17, 0.92) 0%, rgba(1, 20, 17, 0.6) 55%, rgba(1, 20, 17, 0.25) 100%),
        var(--img, none);
    background-size: cover, cover;
    background-position: center, center;
}
.band .band-inner { position: relative; z-index: 1; padding: 60px 48px; max-width: 640px; }
.band .band-inner h2 { margin: 12px 0 14px; }
@media (max-width: 620px) { .band .band-inner { padding: 40px 24px; } }

/* Domain grid */
.domain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.domain-card {
    display: block; padding: 24px; border-radius: var(--radius);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    text-decoration: none; transition: 0.3s;
}
.domain-card:hover { transform: translateY(-4px); border-color: var(--glass-border-strong); }
.domain-card > span:first-child {
    font-family: var(--font-nav); font-weight: 800;
    letter-spacing: 0.12em; color: var(--accent); font-size: 0.8rem;
}
.domain-card h3 { margin: 10px 0 8px; }
.domain-card p { font-size: 0.87rem; }
.domain-card strong { display: block; margin-top: 16px; font-family: var(--font-nav); font-size: 0.78rem; color: var(--accent); }
.domain-card.primary { border-color: var(--accent); background: rgba(251, 207, 232, 0.06); }

/* Forms */
.form-card { padding: 28px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field.full { grid-column: 1 / -1; }
.field > span {
    font-family: var(--font-nav); font-size: 0.74rem; font-weight: 700;
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
}
input, select, textarea {
    font-family: var(--font-body); font-size: 0.95rem; color: var(--text);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 12px 14px; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
textarea { min-height: 120px; resize: vertical; }
select option { background: #04231d; color: #fff; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0 14px; }
.checks label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--muted); }
.checks input { width: auto; }

/* Prose (news long-form) */
.prose { max-width: 760px; }
.prose h2 { color: var(--text); margin: 36px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 24px 0 8px; }
.prose p { margin-bottom: 14px; }
.prose ul { margin: 14px 0 18px 22px; color: var(--muted); }
.prose ul li { margin-bottom: 6px; }
.prose a { color: var(--accent); }

/* Badge + white-paper card */
.badge {
    display: inline-block; font-family: var(--font-nav); font-weight: 700;
    font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 100px;
    background: var(--glass-bg-2); color: var(--accent); margin-bottom: 12px;
}
.wp-card .meta {
    font-size: 0.74rem; color: var(--accent); font-family: var(--font-nav);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.wp-card .btn { margin-top: 18px; }

/* Funnel (tv) */
.funnel {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 34px;
    font-family: var(--font-nav); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.05em;
}
.funnel span, .funnel strong {
    padding: 8px 14px; border-radius: 100px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.funnel strong { background: var(--accent); color: var(--accent-ink); }
.funnel i { color: var(--faint); font-style: normal; }

/* Callout (tv safety) */
.callout { display: flex; gap: 26px; align-items: center; padding: 36px; flex-wrap: wrap; }
.callout .ic-wrap { width: 58px; height: 58px; flex-shrink: 0; margin: 0; }
.callout > div { flex: 1; min-width: 240px; }
.callout h2 { margin-bottom: 8px; }

/* Courses (tv training) */
.course-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.course {
    display: flex; gap: 16px; padding: 20px; border-radius: var(--radius-sm);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.course > span { font-family: var(--font-display); color: var(--accent); font-size: 1.35rem; line-height: 1; }
.course h3 { margin-bottom: 4px; }
.course p { font-size: 0.85rem; }

/* Episodes (tv) */
.episode-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
.episode { padding: 16px; border-radius: var(--radius-sm); background: var(--glass-bg); border: 1px solid var(--glass-border); }
.episode .tag { font-size: 0.72rem; color: var(--accent); font-family: var(--font-nav); font-weight: 700; }
.episode h4 { font-family: var(--font-nav); font-size: 0.9rem; margin-top: 6px; font-weight: 700; }

/* Show features (tv) */
.show-feature { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 34px; align-items: center; margin-bottom: 22px; }
.show-feature.reverse .show-art { order: 2; }
.show-art {
    aspect-ratio: 16 / 10; border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(251, 207, 232, 0.14), rgba(255, 255, 255, 0.03));
    border: 1px solid var(--glass-border);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    font-family: var(--font-nav); font-weight: 800; letter-spacing: 0.16em; color: var(--accent); font-size: 0.8rem;
}
.show-art .ic { width: 54px; height: 54px; }

/* Live pill (tv hero) */
.live-pill {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-nav); font-weight: 700; font-size: 0.7rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 8px 16px; border-radius: 100px;
    background: var(--glass-bg-2); border: 1px solid var(--glass-border-strong); color: var(--text);
}
.live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5a7a; box-shadow: 0 0 0 4px rgba(255, 90, 122, 0.22); }

/* Search row (tv representative) */
.rep-search { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; max-width: 520px; }
.rep-search input { flex: 1; min-width: 200px; }

/* Card with icon reused from styles.css .card + .ic-wrap; link inside */
.card > a.more {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
    font-family: var(--font-nav); font-weight: 700; font-size: 0.82rem;
    color: var(--accent); text-decoration: none;
}

/* Grids */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 900px) {
    .domain-grid { grid-template-columns: 1fr 1fr; }
    .episode-grid { grid-template-columns: 1fr 1fr; }
    .grid4 { grid-template-columns: 1fr 1fr; }
    .course-grid, .field-grid { grid-template-columns: 1fr; }
    .show-feature { grid-template-columns: 1fr; }
    .show-feature.reverse .show-art { order: 0; }
    .mini-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .domain-grid, .episode-grid, .grid4 { grid-template-columns: 1fr; }
    .proof { gap: 22px; }
    .band .band-inner { padding: 36px 22px; }
}