/* Card grid, feature badge, feature matrix and compatibility graph components, styled to match the .doc-hero
   component (index-hero.css). First used on the E-Mobility overview page.

   Expected structure for the card grid:
     [.doc-card-grid]
     --
     [.doc-card]
     ****
     [.doc-hero-eyebrow]#Label#

     [discrete]
     === Card title

     Text, lists, ...

     [.doc-card-actions]
     xref:...[Label, role="doc-card-button doc-card-button-primary"]
     ****
     --
*/

.doc .doc-card-grid > .content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
}

@media screen and (max-width: 768.5px) {
  .doc .doc-card-grid > .content {
    grid-template-columns: minmax(0, 1fr);
  }
}

.doc .openblock.doc-card-grid {
  margin-bottom: 2.5rem;
}

/* Sidebar blocks are used as cards; this overrides the theme's grey sidebar look. */
.doc .sidebarblock.doc-card {
  display: flex;
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid #d9dee6;
  border-top: 4px solid var(--color-oem-primary, #0fcdf8);
  border-radius: 0.75rem;
  box-shadow: 0 2px 10px rgba(0, 32, 78, 0.08);
}

.doc .sidebarblock.doc-card > .content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.doc .sidebarblock.doc-card.doc-card-muted {
  border-top-color: #9aa5b5;
}

.doc .doc-card h3.discrete {
  margin: 0.6rem 0 0;
  color: var(--color-oem-secondary, #00204e);
  font-size: 1.15rem;
  font-weight: 700;
}

.doc .doc-card .ulist li + li {
  margin-top: 0.3rem;
}

.doc .doc-card-muted .doc-hero-eyebrow {
  background: #e3e7ed;
}

/* Pushes the buttons to the bottom so they line up across cards of different heights. */
.doc .doc-card .doc-card-actions {
  margin-top: auto;
  padding-top: 1.25rem;
}

.doc .doc-card .doc-card-actions p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.doc .doc-card .doc-card-button {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.doc .doc-card .doc-card-button-primary {
  background: var(--color-oem-secondary, #00204e);
  border: 1.5px solid var(--color-oem-secondary, #00204e);
  color: #fff;
}

.doc .doc-card .doc-card-button-primary:hover,
.doc .doc-card .doc-card-button-primary:focus {
  background: var(--color-oem-primary, #0fcdf8);
  border-color: var(--color-oem-primary, #0fcdf8);
  color: var(--color-oem-secondary, #00204e);
}

.doc .doc-card .doc-card-button-secondary {
  background: transparent;
  border: 1.5px solid var(--color-oem-secondary, #00204e);
  color: var(--color-oem-secondary, #00204e);
}

.doc .doc-card .doc-card-button-secondary:hover,
.doc .doc-card .doc-card-button-secondary:focus {
  background: var(--color-oem-secondary, #00204e);
  color: #fff;
}

/* Inline feature pill, e.g. [.doc-badge]#Automatische Phasenumschaltung# */
.doc .doc-badge {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-oem-primary, #0fcdf8) 18%, #fff);
  color: var(--color-oem-secondary, #00204e);
  font-size: 0.85em;
  font-weight: 700;
  white-space: nowrap;
}

/* Lists inside a hero card (white text on navy). */
.doc .doc-hero .doc-hero-list {
  margin: 0 0 1rem;
}

.doc .doc-hero .doc-hero-list ul {
  margin: 0;
  padding-left: 1.25rem;
  color: hsla(0, 0%, 100%, 0.9);
}

.doc .doc-hero .doc-hero-list li + li {
  margin-top: 0.25rem;
}

.doc .doc-hero .doc-hero-note p {
  margin: 0;
  color: hsla(0, 0%, 100%, 0.7);
  font-size: 0.85rem;
}

/* Feature comparison table, opt-in via [.doc-feature-matrix] on a table with a header row. */
.doc table.tableblock.doc-feature-matrix {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #d9dee6;
  border-radius: 0.75rem;
  overflow: hidden;
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
}

.doc table.tableblock.doc-feature-matrix > thead th {
  background: var(--color-oem-secondary, #00204e);
  color: #fff;
  font-weight: 600;
  border: none;
}

.doc table.tableblock.doc-feature-matrix > tbody td {
  border: none;
  border-top: 1px solid #e3e7ed;
}

.doc table.tableblock.doc-feature-matrix > tbody tr:nth-child(even) td {
  background: #f5f7fa;
}

.doc table.tableblock.doc-feature-matrix .icon {
  font-size: 1.15rem;
}

/* Small qualifier under a check mark, e.g. [.doc-matrix-note]#mit Hardware-Modul S10# */
.doc table.tableblock.doc-feature-matrix .doc-matrix-note {
  display: inline-block;
  margin-top: 0.2rem;
  color: #6b7686;
  font-size: 0.8em;
  line-height: 1.3;
}

/* Phones: stack manufacturer and models in the first column and keep the feature columns
   narrow on the right, instead of overflowing the viewport. */
@media screen and (max-width: 600px) {
  .doc table.tableblock.doc-feature-matrix {
    display: block;
    width: 100%;
  }

  .doc table.tableblock.doc-feature-matrix > colgroup {
    display: none;
  }

  .doc table.tableblock.doc-feature-matrix > thead,
  .doc table.tableblock.doc-feature-matrix > tbody {
    display: block;
  }

  .doc table.tableblock.doc-feature-matrix tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.75rem 6rem;
  }

  .doc table.tableblock.doc-feature-matrix > thead {
    background: var(--color-oem-secondary, #00204e);
  }

  .doc table.tableblock.doc-feature-matrix th,
  .doc table.tableblock.doc-feature-matrix td {
    display: block;
    overflow: visible;
    padding: 0.4rem 0.6rem;
  }

  .doc table.tableblock.doc-feature-matrix tr > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: 0;
  }

  .doc table.tableblock.doc-feature-matrix tr > :nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    padding-top: 0.1rem;
  }

  .doc table.tableblock.doc-feature-matrix tr > :nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .doc table.tableblock.doc-feature-matrix tr > :nth-child(4) {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .doc table.tableblock.doc-feature-matrix > tbody td:nth-child(n + 3) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .doc table.tableblock.doc-feature-matrix > thead th {
    font-size: 0.75rem;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
  }

  .doc table.tableblock.doc-feature-matrix > thead th:nth-child(n + 3) {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }

  .doc table.tableblock.doc-feature-matrix > thead th:nth-child(2) {
    font-weight: 400;
    opacity: 0.8;
  }

  .doc table.tableblock.doc-feature-matrix > tbody td:nth-child(2) {
    color: #6b7686;
    font-size: 0.9em;
  }

  /* Row separator and zebra striping move from the cells to the whole grid row. */
  .doc table.tableblock.doc-feature-matrix > tbody td {
    border-top: none;
  }

  .doc table.tableblock.doc-feature-matrix > tbody tr {
    border-top: 1px solid #e3e7ed;
  }

  .doc table.tableblock.doc-feature-matrix > tbody tr:nth-child(even) {
    background: #f5f7fa;
  }

  .doc table.tableblock.doc-feature-matrix > tbody tr:nth-child(even) td {
    background: none;
  }
}

/* Compatibility tables as a subtle "git graph": opt-in by wrapping the table in an open block
   with role doc-compat. Each manufacturer (first column) is a node on one continuous vertical
   line, its models (second column) hang off it as a small branch. Works with the existing
   3-column partials in partials/app_compatibility/ without changing their markup. */
.doc .doc-compat table.tableblock {
  border: none;
  border-collapse: collapse;
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
}

.doc .doc-compat table.tableblock > thead th.tableblock {
  padding: 0 0.75rem 0.5rem;
  border: none;
  border-bottom: 1px solid #d9dee6;
  background: none;
  color: #6b7686;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.doc .doc-compat table.tableblock > thead th.tableblock:first-child {
  padding-left: 2.25rem;
}

.doc .doc-compat table.tableblock > tbody > tr > td.tableblock {
  padding: 0.9rem 0.75rem;
  border: none;
  vertical-align: top;
}

.doc .doc-compat table.tableblock > tbody > tr + tr > td.tableblock:not(:first-child) {
  border-top: 1px solid #edf0f4;
}

/* Main line + manufacturer node */
.doc .doc-compat table.tableblock > tbody > tr > td.tableblock:first-child {
  position: relative;
  padding-left: 2.25rem;
}

.doc .doc-compat table.tableblock > tbody > tr > td.tableblock:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(0.75rem - 1px);
  width: 2px;
  background: #c9d1dc;
}

.doc .doc-compat table.tableblock > tbody > tr:first-child > td.tableblock:first-child::before {
  top: 1.35rem;
}

.doc .doc-compat table.tableblock > tbody > tr:last-child > td.tableblock:first-child::before {
  bottom: auto;
  height: 1.35rem;
}

.doc .doc-compat table.tableblock > tbody > tr:only-child > td.tableblock:first-child::before {
  content: none;
}

.doc .doc-compat table.tableblock > tbody > tr > td.tableblock:first-child::after {
  content: "";
  position: absolute;
  top: calc(1.35rem - 6px);
  left: calc(0.75rem - 6px);
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2.5px solid var(--color-oem-secondary, #00204e);
  border-radius: 50%;
  background: #fff;
}

.doc .doc-compat td.tableblock:first-child strong {
  color: var(--color-oem-secondary, #00204e);
}

.doc .doc-compat td.tableblock:first-child a {
  font-size: 0.85em;
}

/* Model branch: models sit as small commits on a short side line */
.doc .doc-compat td.tableblock:nth-child(2) .ulist > ul {
  position: relative;
  margin: 0;
  padding-left: 1.1rem;
  list-style: none;
}

.doc .doc-compat td.tableblock:nth-child(2) .ulist > ul::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 3px;
  width: 1px;
  background: #d9dee6;
}

.doc .doc-compat td.tableblock:nth-child(2) .ulist > ul > li {
  position: relative;
}

.doc .doc-compat td.tableblock:nth-child(2) .ulist > ul > li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: calc(-1.1rem);
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  border: 1.5px solid #8a96a8;
  border-radius: 50%;
  background: #fff;
}

.doc .doc-compat td.tableblock:nth-child(2) .ulist ul ul {
  list-style: none;
  padding-left: 0.75rem;
  color: #6b7686;
}

/* Manual links */
.doc .doc-compat td.tableblock:last-child .ulist > ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.doc .doc-compat td.tableblock:last-child .ulist > ul > li {
  position: relative;
  padding-left: 1.1rem;
}

.doc .doc-compat td.tableblock:last-child .ulist > ul > li::before {
  content: "\f061";
  position: absolute;
  top: 0.15em;
  left: 0;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.75em;
  color: #8a96a8;
}

.doc .doc-compat td.tableblock .ulist li + li {
  margin-top: 0.2rem;
}

.doc .doc-compat td.tableblock .paragraph + .ulist {
  margin-top: 0.4rem;
}

.doc .doc-compat .icon .fa-external-link {
  font-size: 0.75em;
  opacity: 0.6;
}