/* ═══════════════════════════════════════════════════════════════
 * Tecnoaccess — Home v2: above-the-fold + river + cat-blocks
 * Aggiunge solo nuove classi. Non interferisce con components.css esistente.
 * ═══════════════════════════════════════════════════════════════ */

/* ────────── TOP STORIES (above-the-fold) ────────── */
.tn-top { padding: 32px 0 48px; border-bottom: 1px solid var(--tn-border, #e7e3d9); }
.tn-top__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 900px) {
  .tn-top__grid {
    grid-template-columns: 2fr 1fr;
    gap: 40px;
  }
}
.tn-top__hero { display: flex; flex-direction: column; gap: 18px; }
.tn-top__hero-media-link { display: block; }
.tn-top__hero-media {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  margin: 0; background: #1F1C16;
}
.tn-top__hero-media img,
.tn-top__hero-media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-top__hero-body .tn-kicker { font-size: 0.85rem; }
.tn-top__hero-title {
  font-family: var(--tn-serif, 'Newsreader', Georgia, serif);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 8px 0 12px;
  font-weight: 700;
}
.tn-top__hero-title a { color: inherit; text-decoration: none; }
.tn-top__hero-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tn-top__hero-dek {
  font-size: 1.125rem; line-height: 1.55;
  color: var(--tn-text-soft, #4a463d);
  margin: 0 0 12px;
  max-width: 60ch;
}

.tn-top__side {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-content: start;
}
.tn-top__side .tn-card--media .tn-card__media { aspect-ratio: 16/9; }
.tn-top__side .tn-card__title {
  font-family: var(--tn-serif, 'Newsreader', Georgia, serif);
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@media (min-width: 600px) and (max-width: 899px) {
  .tn-top__side { grid-template-columns: 1fr 1fr; }
}

/* ────────── RIVER LATEST (lead grande + lista numerata) ────────── */
.tn-river__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
@media (min-width: 900px) {
  .tn-river__grid { grid-template-columns: 1.4fr 1fr; gap: 48px; }
}
.tn-river__lead {}
.tn-river__lead-media {
  margin: 0 0 18px;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #1F1C16;
}
.tn-river__lead-media img,
.tn-river__lead-media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-river__lead-title {
  font-family: var(--tn-serif, 'Newsreader', Georgia, serif);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 8px 0 10px;
}
.tn-river__lead-title a { color: inherit; text-decoration: none; }
.tn-river__lead-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tn-river__lead-dek { font-size: 1.05rem; color: var(--tn-text-soft, #4a463d); line-height: 1.55; margin: 0 0 10px; max-width: 50ch; }

.tn-river__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tn-river__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--tn-border, #e7e3d9);
}
.tn-river__item:first-child { padding-top: 0; border-top: none; }
.tn-river__num {
  font-family: var(--tn-serif, 'Newsreader', Georgia, serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--tn-orange, #E85D04);
  line-height: 1;
  letter-spacing: -0.02em;
}
.tn-river__item-body .tn-kicker { font-size: 0.78rem; }
.tn-river__item-title {
  font-family: var(--tn-serif, 'Newsreader', Georgia, serif);
  font-size: 1.18rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 4px 0 6px;
  font-weight: 600;
}
.tn-river__item-title a { color: inherit; text-decoration: none; }
.tn-river__item-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ────────── DALLE NOSTRE SEZIONI (4 cat block + 4 chip) ────────── */
.tn-sections__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-bottom: 32px;
}
@media (min-width: 700px)  { .tn-sections__grid { grid-template-columns: 1fr 1fr; gap: 32px 36px; } }
@media (min-width: 1100px) { .tn-sections__grid { grid-template-columns: repeat(4, 1fr); gap: 28px; } }

.tn-cat-block { display: flex; flex-direction: column; gap: 12px; }
.tn-cat-block__media-link { display: block; }
.tn-cat-block__media {
  margin: 0;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #1F1C16;
}
.tn-cat-block__media img,
.tn-cat-block__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-cat-block__header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid var(--tn-orange, #E85D04);
  padding-bottom: 6px;
}
.tn-cat-block__cat {
  font-family: var(--tn-sans, 'Inter', system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.tn-cat-block__cat a { color: inherit; text-decoration: none; }
.tn-cat-block__count {
  font-size: 0.78rem;
  color: var(--tn-text-soft, #4a463d);
  letter-spacing: 0.05em;
}
.tn-cat-block__lead {
  font-family: var(--tn-serif, 'Newsreader', Georgia, serif);
  font-size: 1.18rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0;
}
.tn-cat-block__lead a { color: inherit; text-decoration: none; }
.tn-cat-block__lead a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tn-cat-block__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.tn-cat-block__list li {
  padding: 10px 0;
  border-top: 1px solid var(--tn-border, #e7e3d9);
  font-size: 0.98rem;
  line-height: 1.35;
}
.tn-cat-block__list li a { color: inherit; text-decoration: none; }
.tn-cat-block__list li a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.tn-cat-block__cta {
  font-family: var(--tn-sans, 'Inter', system-ui, sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tn-orange, #E85D04);
  text-decoration: none;
  margin-top: 4px;
}
.tn-cat-block__cta:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.tn-sections__chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--tn-border, #e7e3d9);
}
.tn-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: #1F1C16;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--tn-sans, 'Inter', system-ui, sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.15s;
}
.tn-chip:hover, .tn-chip:focus-visible { background: var(--tn-orange, #E85D04); outline: none; }
.tn-chip__count {
  background: rgba(255,255,255,0.15);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ────────── PIÙ LETTI v2 (numerazione XL) ────────── */
.tn-most-read__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 800px) { .tn-most-read__list { grid-template-columns: 1fr 1fr; gap: 0 48px; } }

.tn-most-read__item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--tn-border, #e7e3d9);
  align-items: start;
}
.tn-most-read__num {
  font-family: var(--tn-serif, 'Newsreader', Georgia, serif);
  font-size: 4.2rem;
  font-weight: 800;
  line-height: 0.9;
  color: var(--tn-orange, #E85D04);
  letter-spacing: -0.04em;
}
.tn-most-read__title {
  font-family: var(--tn-serif, 'Newsreader', Georgia, serif);
  font-size: 1.2rem;
  line-height: 1.25;
  font-weight: 700;
  margin: 4px 0 6px;
}
.tn-most-read__title a { color: inherit; text-decoration: none; }
.tn-most-read__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }