/* Round 10 information pages (2026-10-22): shared hero, sections and the last-row fill grid.
   Loaded only by the ten redesigned templates via myiptv_p10_assets(). */

/* ---------- Image hero ---------- */
.p10-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--b-line); background: var(--b-ink); }
.p10-hero-media { position: absolute; inset: 0; z-index: -2; }
.p10-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.p10-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 15, 0.96) 0%, rgba(10, 10, 15, 0.82) 42%, rgba(10, 10, 15, 0.35) 75%, rgba(10, 10, 15, 0.55) 100%), linear-gradient(0deg, var(--b-ink) 0%, transparent 30%); }
@media (max-width: 767px) { .p10-hero::before { background: linear-gradient(180deg, rgba(10, 10, 15, 0.7) 0%, rgba(10, 10, 15, 0.9) 45%, var(--b-ink) 100%); } }
.p10-hero-inner { padding-block: clamp(2.75rem, 7vw, 6.5rem) clamp(2.5rem, 5vw, 4.5rem); display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 1024px) { .p10-hero.has-aside .p10-hero-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.p10-hero h1 { margin: 0.8rem 0 0; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 780; color: #fff; max-width: 14em; }
.p10-hero h1 em { font-style: normal; background: linear-gradient(90deg, #f87171, #dc2626); -webkit-background-clip: text; background-clip: text; color: transparent; }
.p10-lead { margin-top: 1.25rem; max-width: 40rem; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); line-height: 1.6; color: var(--b-soft); }
.p10-actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.p10-proof { margin: 1.75rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.25rem; max-width: 38rem; }
.p10-proof li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; color: #e4e4e7; }
.p10-proof svg { width: 1.1rem; height: 1.1rem; color: var(--b-crimson-bright); flex: none; }
@media (max-width: 479px) { .p10-proof { grid-template-columns: 1fr; } }
.p10-crumbs { display: flex; gap: 0.5rem; font-size: 0.82rem; color: var(--b-muted); }
.p10-crumbs a { color: var(--b-muted); text-decoration: none; }
.p10-crumbs a:hover { color: #fff; }

/* ---------- Sections ---------- */
.p10-section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.p10-section.is-tinted { background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)); border-block: 1px solid var(--b-line); }
.p10-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.p10-head.is-center { margin-inline: auto; text-align: center; }
.p10-h2 { margin: 0.6rem 0 0; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 760; color: #fff; }
.p10-sub { margin-top: 0.9rem; color: var(--b-muted); font-size: 1.05rem; line-height: 1.65; }

/* ---------- Cards ---------- */
.p10-card { position: relative; padding: clamp(1.25rem, 2vw, 1.75rem); border: 1px solid var(--b-line); border-radius: var(--b-radius); background: var(--b-grad-panel); }
.p10-card h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; font-weight: 700; color: #fff; letter-spacing: -0.015em; }
.p10-card p { margin: 0.55rem 0 0; color: var(--b-muted); line-height: 1.6; }
.p10-card-icon { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; border-radius: 0.8rem; background: rgba(220, 38, 38, 0.12); color: var(--b-crimson-bright); }
.p10-card-icon svg { width: 1.3rem; height: 1.3rem; }

/* ---------- Last-row fill grid ----------
   The owner's "empty space" rule: a grid never ends on a half-filled row. Items sit on a
   12-track grid; whatever is left over in the last row stretches to fill it. Use
   .p10-fill with .is-2 / .is-3 / .is-4 for the desktop column count. */
.p10-fill { display: grid; gap: clamp(0.9rem, 1.6vw, 1.25rem); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.p10-fill > * { grid-column: span 12; min-width: 0; }
@media (min-width: 640px) {
  .p10-fill.is-2 > *, .p10-fill.is-3 > *, .p10-fill.is-4 > * { grid-column: span 6; }
  .p10-fill.is-2 > :nth-child(2n+1):last-child, .p10-fill.is-3 > :nth-child(2n+1):last-child, .p10-fill.is-4 > :nth-child(2n+1):last-child { grid-column: span 12; }
}
@media (min-width: 1024px) {
  .p10-fill.is-3 > * { grid-column: span 4; }
  .p10-fill.is-3 > :nth-child(2n+1):last-child { grid-column: span 4; }
  .p10-fill.is-3 > :nth-child(3n+1):last-child { grid-column: span 12; }
  .p10-fill.is-3 > :nth-child(3n+1):nth-last-child(2), .p10-fill.is-3 > :nth-child(3n+2):last-child { grid-column: span 6; }
  .p10-fill.is-4 > * { grid-column: span 3; }
  .p10-fill.is-4 > :nth-child(2n+1):last-child { grid-column: span 3; }
  .p10-fill.is-4 > :nth-child(4n+1):last-child { grid-column: span 12; }
  .p10-fill.is-4 > :nth-child(4n+1):nth-last-child(2), .p10-fill.is-4 > :nth-child(4n+2):last-child { grid-column: span 6; }
  .p10-fill.is-4 > :nth-child(4n+1):nth-last-child(3), .p10-fill.is-4 > :nth-child(4n+2):nth-last-child(2), .p10-fill.is-4 > :nth-child(4n+3):last-child { grid-column: span 4; }
}

/* Chip and link rows: wrap and spread across the full width instead of trailing off. */
.p10-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.p10-chips > * { flex: 1 1 auto; }
.p10-chips a, .p10-chips span { display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.75rem; padding: 0.55rem 1rem; border: 1px solid var(--b-line-strong); border-radius: 999px; background: rgba(255, 255, 255, 0.03); color: #e4e4e7; font-size: 0.92rem; font-weight: 600; text-decoration: none; text-align: center; }
.p10-chips a:hover { border-color: rgba(248, 113, 113, 0.55); color: #fff; }
.p10-chips svg { width: 1rem; height: 1rem; flex: none; }

/* ---------- Closing CTA band ---------- */
.p10-cta { position: relative; isolation: isolate; overflow: hidden; margin-block: clamp(2rem, 4vw, 3rem); padding: clamp(2rem, 5vw, 3.5rem); border: 1px solid rgba(248, 113, 113, 0.28); border-radius: calc(var(--b-radius) * 1.4); background: radial-gradient(70% 120% at 100% 0%, rgba(220, 38, 38, 0.28), transparent 60%), var(--b-charcoal); display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .p10-cta { grid-template-columns: minmax(0, 1.4fr) auto; } }
.p10-cta h2 { margin: 0; font-weight: 760; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.1; letter-spacing: -0.03em; color: #fff; }
.p10-cta p { margin: 0.7rem 0 0; color: var(--b-soft); }
.p10-cta .p10-actions { margin-top: 0; }

.email-link { color: #fff; text-decoration: underline; text-decoration-color: rgba(248, 113, 113, 0.6); text-underline-offset: 3px; overflow-wrap: anywhere; }