/* -------------------------------------------------
   Tiestos Voladores – estilos de componentes propios
   (Conferencias y Prensa).

   Los colores globales (fondo, texto, primario) se
   configuran en config.yaml -> params.color y los
   aplica el tema, que también maneja el modo oscuro.
   Aquí solo se usan sus variables CSS.
   ------------------------------------------------- */

/* Card colours that follow light / dark mode (the theme toggles body.dark) */
:root {
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, .07);
  --soft-bg: rgba(240, 250, 245, .7);
  --soft-gradient: linear-gradient(135deg, rgba(240, 250, 245, .9) 0%, rgba(255, 255, 255, .9) 100%);
}
body.dark {
  --card-bg: #242526;
  --card-border: rgba(255, 255, 255, .08);
  --soft-bg: rgba(255, 255, 255, .05);
  --soft-gradient: linear-gradient(135deg, #242526 0%, #1e1f20 100%);
}

/* Outline buttons in the brand colour instead of Bootstrap blue */
.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--background-color);
}

/* Buttons */
.btn-primary {
  background: var(--primary-color);
  border: none;
  border-radius: .5rem;
  color: #fff;
  padding: .6rem 1.4rem;
  transition: filter .2s;
}
.btn-primary:hover { filter: brightness(.85); }

/* Grid for media cards (prensa) */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.media-card {
  padding: 1rem;
  border-radius: .75rem;
  background: var(--card-bg);
  color: var(--text-color);
  text-align: left;
}

/* Responsive tables (conferencias) */
table.responsive {
  width: 100%;
  border-collapse: collapse;
}
table.responsive th,
table.responsive td {
  padding: .75rem;
  border: 1px solid rgba(127, 127, 127, .25);
}
@media (max-width: 600px) {
  table.responsive thead { display: none; }
  table.responsive tr { display: block; margin-bottom: 1rem; }
  table.responsive td {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  table.responsive td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--tv-muted);
  }
}

/* =================================================
   Marca Tiestos Voladores – rediseño del inicio
   Paleta oficial (brand/color palette):
   menta #C1F7DC · turquesa #028090 · rosa #E574BC
   azul noche #1C1F33 · naranja #FE5D26
   (#C1378F es el rosa oscurecido para texto legible)
   ================================================= */
:root {
  --tv-magenta: #C1378F;
  --tv-pink: #E574BC;
  --tv-teal: #028090;
  --tv-mint: #C1F7DC;
  --tv-navy: #1C1F33;
  --tv-orange: #FE5D26;
  --tv-muted: #5b6170;
  --tv-soft-magenta: rgba(193, 55, 143, .10);
  --tv-shadow: 0 10px 30px rgba(20, 24, 40, .07);
  --tv-shadow-hover: 0 18px 40px rgba(193, 55, 143, .16);
}
body.dark {
  --tv-soft-magenta: rgba(232, 120, 190, .14);
  --tv-muted: #b0b3b8;
  --tv-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --tv-shadow-hover: 0 18px 40px rgba(0, 0, 0, .5);
}

/* Navbar logo: no box around it */
.navbar-brand .brand-logo { border: 0 !important; border-radius: 0 !important; }

/* ---------- Shared pieces ---------- */
.tv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .95rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--tv-soft-magenta);
  color: var(--primary-color);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
}
.tv-section { padding: 5rem 0; }
/* Section header: centered, same as the theme sections below it */
.tv-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.75rem;
  text-align: center;
}
.tv-section-head .tv-eyebrow { display: none; }
.tv-section-head .tv-section-lead { margin: 0 auto; }
.tv-section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 .6rem;
  color: var(--text-color);
}
.tv-section-lead {
  max-width: 40rem;
  margin: 0;
  color: var(--tv-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}
.tv-link-more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  color: var(--primary-color) !important;
  text-decoration: none;
  white-space: nowrap;
}
.tv-link-more i { transition: transform .2s; }
.tv-link-more:hover i { transform: translateX(4px); }

.tv-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, color .2s, border-color .2s;
}
.tv-btn-primary {
  background: var(--tv-magenta);
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(193, 55, 143, .32);
}
.tv-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(193, 55, 143, .42); }
.tv-btn-ghost {
  border: 1.5px solid var(--tv-muted);
  color: var(--text-color) !important;
}
.tv-btn-ghost:hover { border-color: var(--primary-color); color: var(--primary-color) !important; }

/* ---------- Hero ---------- */
.tv-hero {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 4rem;
}
.tv-hero > .container { position: relative; z-index: 1; }
.tv-hero-title {
  font-size: clamp(2.8rem, 7vw, 5rem);
  line-height: 1.02;
  margin: 0 0 .5rem;
  color: var(--primary-color);
  letter-spacing: -.01em;
}
/* Name under the title, big and grey, as in the original hero */
.tv-hero-name {
  margin: 0 0 1.5rem;
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  line-height: 1.15;
  color: var(--text-color);
  opacity: .5;
}
.tv-hero-lead {
  max-width: 38rem;
  margin-bottom: 1.25rem;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.75;
  color: var(--text-color);
}
.tv-hero-lead p { margin: 0; }
.tv-hero-lead strong { color: var(--primary-color); font-weight: 600; }
.tv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 2rem 0 1.5rem;
}
.tv-hero-social a.social-icon {
  display: inline-grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--tv-muted);
  color: var(--text-color) !important;
  font-size: 1.05rem;
  transition: color .2s, border-color .2s, transform .2s;
}
.tv-hero-social a.social-icon:hover {
  color: var(--primary-color) !important;
  border-color: var(--primary-color);
  transform: translateY(-2px);
}
.tv-hero-social > span > span:first-child { padding-left: 0 !important; }

/* Round portrait, clean: no colored block behind it */
.tv-portrait {
  max-width: 400px;
  margin: 0 auto;
}
.tv-portrait > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 50%;
  box-shadow: 0 18px 50px rgba(28, 31, 51, .16);
}

/* ---------- Blog post card (same size in every row) ---------- */
.tv-post-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: 1.1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--tv-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tv-post-card:hover { transform: translateY(-4px); box-shadow: var(--tv-shadow-hover); }
.tv-post-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tv-soft-magenta); }
.tv-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.tv-post-card:hover .tv-post-media img { transform: scale(1.04); }
.tv-post-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem 1.35rem 1.2rem;
}
.tv-post-date {
  font-size: .85rem;
  color: var(--tv-muted);
}
.tv-post-title {
  margin: .45rem 0 .55rem;
  font-size: 1.2rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.2rem * 1.35 * 2);
}
.tv-post-title a { color: var(--text-color) !important; text-decoration: none; }
.tv-post-title a:hover { color: var(--primary-color) !important; }
.tv-post-excerpt {
  margin: 0 0 1rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--tv-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(.95rem * 1.6 * 3);
}
.tv-post-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
}
.tv-post-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: .35rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.tv-post-tags a {
  display: inline-block;
  max-width: 9rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: var(--tv-soft-magenta);
  color: var(--primary-color) !important;
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-post-more {
  flex-shrink: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--primary-color) !important;
  text-decoration: none;
}
.tv-post-more i { font-size: .8em; transition: transform .2s; }
.tv-post-more:hover i { transform: translateX(3px); }

.tv-list-head { margin-bottom: 2.5rem; text-align: center; }
.tv-list-head .tv-section-lead { margin: 0 auto; }

/* ---------- Talks (feature cards) ---------- */
.tv-feature-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.75rem;
  border-radius: 1.1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--tv-shadow);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tv-feature-card:hover { transform: translateY(-4px); box-shadow: var(--tv-shadow-hover); }
.tv-feature-tag {
  font-size: .85rem;
  color: var(--primary-color);
}
.tv-feature-title { margin: .35rem 0 .5rem; font-size: 1.25rem; color: var(--text-color); }
.tv-feature-text { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--tv-muted); }

/* ---------- Press (quote cards) ---------- */
.tv-press-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.75rem 1.75rem 1.4rem;
  border-radius: 1.1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 4px solid var(--tv-magenta);
  box-shadow: var(--tv-shadow);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tv-press-card:hover { transform: translateY(-4px); box-shadow: var(--tv-shadow-hover); }
.tv-press-outlet { font-size: 1.15rem; color: var(--primary-color); }
.tv-press-quote {
  flex: 1;
  margin: .75rem 0 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-color);
}
.tv-press-quote::before { content: "\201C"; }
.tv-press-quote::after { content: "\201D"; }
.tv-press-meta {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--tv-muted);
}

/* ---------- Inner pages (Conferencias) ---------- */
.tv-hero-page { padding-top: 4.5rem; }
.tv-hero-title-page { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.1; }
.tv-photo { margin: 0; }
.tv-photo > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 1.75rem;
  box-shadow: 0 18px 50px rgba(28, 31, 51, .16);
}
.tv-photo-portrait { max-width: 420px; margin: 0 auto; }
.tv-photo-portrait > img { aspect-ratio: 4 / 5; object-position: 50% 78%; }

/* ---------- About (Sobre mí) ---------- */
.tv-about-text { font-size: 1.05rem; line-height: 1.8; color: var(--text-color); }
.tv-about-text a { color: var(--primary-color) !important; font-weight: 600; }
#about.tv-about a::after { display: none !important; }
.tv-about-label { margin: 1.5rem 0 .6rem; font-weight: 600; color: var(--text-color); }
#about.tv-about ul.tv-chips { display: flex !important; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
#about.tv-about .tv-chips li { margin: 0; padding: .4rem 1rem; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--card-border); color: var(--primary-color); font-size: .9rem; font-weight: 600; white-space: nowrap; }
#about.tv-about a.social-icon { display: inline-grid !important; padding: 0 !important; line-height: 1 !important; }
#about.tv-about .tv-chips li::before { content: none; }
#about.tv-about .tv-chips li p { margin: 0; }
.tv-about-social { margin-top: 1.75rem; }

/* ---------- One rhythm for every home section ---------- */
/* Alternate a very soft mint band so sections read as one sequence */
#about, #talks-home, #projects, #education, #contact { background: rgba(193, 247, 220, .28); }
body.dark #about, body.dark #talks-home, body.dark #projects, body.dark #education, body.dark #contact { background: rgba(255, 255, 255, .03); }
#projects, #experience, #education, #achievements, #contact { padding: 5rem 0 !important; }

/* Theme section titles look like ours: same font, size, color and accent bar */
section#projects > .container > h3,
section#experience > .container > h3,
section#education > .container > h3,
section#achievements > .container > h3,
section#contact h3 {
  font-family: "Alata", sans-serif !important;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
  line-height: 1.15;
  color: var(--text-color) !important;
  margin-bottom: 2.5rem !important;
}
section#projects > .container > h3::after,
section#experience > .container > h3::after,
section#education > .container > h3::after,
section#achievements > .container > h3::after,
.tv-section-head .tv-section-title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin: .9rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--tv-pink), var(--tv-teal));
}
/* Theme cards share the same radius and shadow as ours */
section#projects .card, section#education .card, section#achievements .card {
  border-radius: 1.1rem !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--tv-shadow) !important;
  overflow: hidden;
}

.tv-page-content > * + .tv-page-head { margin-top: 5rem; }
.tv-page-head { margin-bottom: 2rem; scroll-margin-top: 6rem; }
.tv-page-content h3 { color: var(--text-color); }

.tv-talk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.tv-talk {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border-radius: 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--tv-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tv-talk:hover { transform: translateY(-4px); box-shadow: var(--tv-shadow-hover); }
.tv-talk-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.tv-talk-head .tv-feature-icon { margin: 0; }
.tv-talk-title { margin: 0; font-size: 1.45rem; line-height: 1.25; }
.tv-talk-sub { margin: .25rem 0 .9rem; font-weight: 600; color: var(--primary-color); }
.tv-talk-text { flex: 1; margin: 0 0 1.25rem; line-height: 1.7; color: var(--text-color); }
.tv-talk-aud {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--card-border);
  font-size: .9rem;
  color: var(--tv-muted);
}
.tv-talk-aud i { margin-right: .4rem; color: var(--tv-teal); }

.tv-format-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.tv-format {
  padding: 1.5rem;
  border-radius: 1.1rem;
  background: var(--tv-soft-magenta);
}
.tv-format > i { font-size: 1.4rem; color: var(--primary-color); }
.tv-format h3 { margin: .9rem 0 .5rem; font-size: 1.1rem; }
.tv-format p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--tv-muted); }

.tv-timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tv-timeline::before {
  content: "";
  position: absolute;
  top: .5rem; bottom: .5rem;
  left: 9.25rem;
  width: 2px;
  background: linear-gradient(var(--tv-magenta), var(--tv-teal));
  opacity: .5;
}
.tv-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 2.5rem;
  padding: 0 0 1.75rem;
}
.tv-timeline li::before {
  content: "";
  position: absolute;
  left: 8.85rem;
  top: .35rem;
  width: .9rem; height: .9rem;
  border-radius: 50%;
  background: var(--background-color);
  border: 3px solid var(--tv-magenta);
}
.tv-timeline time {
  padding-top: .1rem;
  text-align: right;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tv-muted);
}
.tv-timeline h3 { margin: 0 0 .35rem; font-size: 1.1rem; line-height: 1.4; }
.tv-timeline p { margin: 0; font-size: .92rem; color: var(--tv-muted); }
.tv-timeline a { color: var(--primary-color) !important; font-weight: 600; text-decoration: none; }
.tv-pill {
  display: inline-block;
  margin-right: .35rem;
  padding: .1rem .6rem;
  border-radius: 999px;
  background: var(--tv-soft-magenta);
  color: var(--primary-color);
  font-size: .75rem;
  font-weight: 600;
}

.tv-paper-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.tv-paper {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border-radius: 1.1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--tv-teal);
  box-shadow: var(--tv-shadow);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tv-paper:hover { transform: translateY(-4px); box-shadow: var(--tv-shadow-hover); }
.tv-paper h3 { margin: .5rem 0; font-size: 1.1rem; line-height: 1.4; color: var(--text-color); }
.tv-paper p { flex: 1; margin: 0 0 1rem; font-size: .92rem; line-height: 1.6; color: var(--tv-muted); }
.tv-paper-link { font-size: .9rem; font-weight: 600; color: var(--primary-color); }

/* Closing call to action */
.tv-cta-band {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 2rem;
  padding: 3rem;
  border-radius: 1.75rem;
  background: linear-gradient(135deg, var(--tv-magenta) 0%, #7a2a6e 55%, var(--tv-teal) 100%);
  color: #fff;
  box-shadow: 0 20px 50px rgba(193, 55, 143, .28);
}
.tv-cta-band::after {
  content: "";
  position: absolute;
  right: -4rem; top: -4rem;
  width: 16rem; height: 16rem;
  background: url("/images/favicon-outline.png") center / contain no-repeat;
  opacity: .12;
  transform: rotate(18deg);
  pointer-events: none;
}
.tv-cta-kicker { font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.tv-cta-title { margin: .4rem 0 .75rem; font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: #fff; }
.tv-cta-text { margin: 0; max-width: 34rem; line-height: 1.7; opacity: .92; }
.tv-cta-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .75rem; align-items: stretch; }
.tv-cta-actions .tv-btn { justify-content: center; }
.tv-btn-light { background: #fff; color: var(--tv-magenta) !important; }
.tv-btn-light:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.tv-btn-outline-light { border: 1.5px solid rgba(255, 255, 255, .8); color: #fff !important; }
.tv-btn-outline-light:hover { background: rgba(255, 255, 255, .12); }

/* ---------- Typography system ----------
   Alata: headings and every small UI label (tags, dates, buttons, links).
   Lora:  reading text only. No uppercase labels, one accent color (pink). */
.tv-eyebrow, .tv-btn, .tv-link-more, .tv-feature-tag, .tv-post-date, .tv-post-tags a,
.tv-post-more, .tv-press-outlet, .tv-press-meta, .tv-pill, .tv-talk-sub, .tv-talk-aud,
.tv-timeline time, .tv-paper-link, .tv-about-label, .tv-cta-kicker, .tv-format h3,
#about.tv-about .tv-chips li {
  font-family: "Alata", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}
.tv-talk-aud { color: var(--tv-muted); }
.tv-feature-tag, .tv-pill, .tv-paper-link { color: var(--primary-color) !important; }

/* ---------- Awards (Reconocimientos) ---------- */
.tv-awards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2.5rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.tv-award {
  padding: 1.25rem 0 1.25rem 1.25rem;
  border-left: 3px solid var(--tv-pink);
}
.tv-award-link { display: block; text-decoration: none; }
section#achievements .tv-award-title { margin: 0 0 .35rem; font-size: 1.15rem; line-height: 1.35; color: var(--text-color) !important; }

/* Education cards: one surface (no lighter frame), titles in Alata like every other card */
section#education .card,
section#education .card * { background-color: var(--card-bg) !important; }
section#education .card { border: 1px solid var(--card-border) !important; }
section#education .card h5, section#education .card h6,
section#education .card .card-title { font-family: "Alata", sans-serif !important; color: var(--text-color) !important; }
.tv-award-text { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--tv-muted); }

/* ---------- Photo + logo together (hero) ---------- */
.tv-portrait { position: relative; }
.tv-portrait-badge {
  position: absolute;
  right: 4%;
  bottom: 4%;
  display: grid;
  place-items: center;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--card-bg);
  box-shadow: 0 10px 30px rgba(28, 31, 51, .22);
}
.tv-portrait-badge img { width: 62%; height: auto; }

/* ---------- Press page: grouped list ---------- */
.tv-press-page { max-width: 62rem; }
.tv-press-group + .tv-press-group { margin-top: 3.5rem; }
.tv-press-group-title { margin: 0 0 .35rem; font-size: clamp(1.4rem, 2.6vw, 1.8rem); color: var(--text-color); }
.tv-press-group-lead { margin: 0 0 1.25rem; color: var(--tv-muted); }
.tv-press-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 1.1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--tv-shadow);
  overflow: hidden;
}
.tv-press-list li + li { border-top: 1px solid var(--card-border); }
.tv-press-list a {
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.1rem 1.5rem;
  text-decoration: none;
  transition: background .2s;
}
.tv-press-list a:hover { background: var(--tv-soft-magenta); }
.tv-press-row-outlet { font-family: "Alata", sans-serif; color: var(--primary-color); }
.tv-press-row-title { font-family: "Lora", serif; line-height: 1.5; color: var(--text-color); }
.tv-press-list a:hover .tv-press-row-title { color: var(--primary-color); }
.tv-press-row-date { font-family: "Alata", sans-serif; font-size: .85rem; color: var(--tv-muted); white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .tv-format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-cta-band { grid-template-columns: 1fr; padding: 2.25rem; }
}
@media (max-width: 767.98px) {
  .tv-talk-grid, .tv-paper-grid, .tv-format-grid, .tv-awards { grid-template-columns: 1fr; }
  .tv-press-list a { grid-template-columns: 1fr; gap: .25rem; }
  .tv-talk { padding: 1.5rem; }
  .tv-timeline::before { left: .4rem; }
  .tv-timeline li { grid-template-columns: 1fr; gap: .25rem; padding-left: 2rem; }
  .tv-timeline li::before { left: 0; }
  .tv-timeline time { text-align: left; }
}
@media (max-width: 991.98px) {
  .tv-hero { padding: 3rem 0; }
  .tv-portrait { max-width: 280px; }
  .tv-photo-portrait { max-width: 340px; }
}
@media (max-width: 575.98px) {
  .tv-section, #projects, #experience, #education, #achievements, #contact { padding: 3.5rem 0 !important; }
  .tv-portrait { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-post-card, .tv-feature-card, .tv-press-card, .tv-btn, .tv-post-media img { transition: none; }
}