/* === _comun/r8.css === */
/* Runda 8 (16.10.2026): hub-ul „Servicii SEO” (/servicii-seo/).
   Cele șase servicii = listă editorială cu linii, nu carduri; tabelul pachetelor se stivuiește pe telefon. */

/* ---- lista serviciilor ---- */
.r8-serv { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--text); counter-reset: none; }
.r8-s { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 2fr) minmax(0, .7fr); gap: 10px 40px; padding: 28px 0; border-bottom: 1px solid var(--line-2); align-items: start; }
.r8-s-t { display: grid; grid-template-columns: auto 24px minmax(0, 1fr); gap: 0 12px; align-items: start; }
.r8-nr { font: var(--w-head, 800) 15px/1.6 var(--f-head); color: var(--link); font-variant-numeric: tabular-nums; }
.r8-s-t .r2-ic { padding-top: 1px; }
.r8-s h3 { font-size: 21px; line-height: 1.25; }
.r8-s-d { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 32px; margin: 0; }
.r8-s-d dt { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.r8-s-d dd { margin: 0; color: var(--muted); font-size: 16px; }
.r8-s-l { padding-top: 22px; }
.r8-s-l .tbc { display: inline-block; margin-top: 6px; }
@media (max-width: 1100px) {
  .r8-s { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .r8-s-l { grid-column: 2; padding-top: 0; }
}
@media (max-width: 760px) {
  .r8-s { grid-template-columns: minmax(0, 1fr); padding: 24px 0; }
  .r8-s-d { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .r8-s-l { grid-column: auto; }
}

/* ---- tabelul pachetelor ---- */
.r8-tab table { width: 100%; border-collapse: collapse; font-size: 16px; }
.r8-tab caption { caption-side: bottom; text-align: left; padding-top: 12px; font-size: 14px; color: var(--muted); }
.r8-tab th, .r8-tab td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.r8-tab thead th { font: var(--w-head, 800) 17px/1.3 var(--f-head); color: var(--text); border-bottom: 2px solid var(--text); }
.r8-tab thead td { border-bottom: 2px solid var(--text); }
.r8-tab tbody th { font-weight: 700; color: var(--text); width: 28%; }
.r8-tab tbody td { color: var(--muted); }
.r8-tab tfoot th, .r8-tab tfoot td { border-bottom: 0; padding-top: 18px; }
.r8-tab tfoot th { font-weight: 700; }
.r8-tab tfoot b { font: var(--w-head, 800) 20px/1.2 var(--f-head); color: var(--text); }
.r8-sep { margin-top: 28px; }
@media (max-width: 760px) {
  .r8-tab table, .r8-tab tbody, .r8-tab tfoot, .r8-tab tr, .r8-tab th, .r8-tab td, .r8-tab caption { display: block; width: auto; }
  .r8-tab thead { display: none; }
  .r8-tab table { display: flex; flex-direction: column; }
  .r8-tab caption { order: 9; }
  .r8-tab tr { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
  .r8-tab tbody tr:first-child { border-top: 2px solid var(--text); }
  .r8-tab th, .r8-tab td { border: 0; padding: 0; }
  .r8-tab tbody th, .r8-tab tfoot th { width: auto; margin-bottom: 8px; font-size: 17px; }
  .r8-tab td { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 3px 0; }
  .r8-tab td::before { content: attr(data-p); color: var(--text); font-weight: 600; }
  .r8-tab td .tbc { justify-self: start; max-width: 100%; white-space: normal; }
  .r8-tab tfoot tr { border-bottom: 0; padding-top: 18px; }
  .r8-tab caption { padding-top: 14px; }
}

/* ---- trio: linkul spre echipă ---- */
.om-link { margin-top: 20px; }

/* ---- „Facem întâi pentru noi” ---- */
.r8-cazuri { margin-top: 0; }

/* gemenii de mărime a textului (panoul de accesibilitate, generat de _sursa/panou_a11y.py) */
.a11y-text .r8-nr { font-size: calc(15px * var(--a11y-k, 1)); }
.a11y-text .r8-s h3 { font-size: calc(21px * var(--a11y-k, 1)); }
.a11y-text .r8-s-d dt { font-size: calc(14px * var(--a11y-k, 1)); }
.a11y-text .r8-s-d dd { font-size: calc(16px * var(--a11y-k, 1)); }
.a11y-text .r8-tab table { font-size: calc(16px * var(--a11y-k, 1)); }
.a11y-text .r8-tab caption { font-size: calc(14px * var(--a11y-k, 1)); }
.a11y-text .r8-tab thead th { font-size: calc(17px * var(--a11y-k, 1)); }
.a11y-text .r8-tab tfoot b { font-size: calc(20px * var(--a11y-k, 1)); }
@media (max-width: 760px) {
.a11y-text .r8-tab tbody th, .a11y-text .r8-tab tfoot th { font-size: calc(17px * var(--a11y-k, 1)); }
}