/*
 * Brochure content components (spec lists, feature lists, gallery, parts list,
 * legal text). Layout lives in Bricks; these rules only cover list/prose styling
 * Bricks cannot express per element. Loaded on non-shop pages.
 */

/* Check-marked lists: standard spec, guarantees, option lists. */
.dino-check-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dino-check-list > li {
  position: relative;
  padding-left: 28px;
  line-height: var(--dino-body-lh);
  break-inside: avoid;
}
.dino-check-list > li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 2px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--dino-red, #c00);
  border-bottom: 2px solid var(--dino-red, #c00);
  transform: rotate(-45deg);
}
@media (min-width: 768px) {
  .dino-check-list.dino-cols-2 {
    display: block;
    columns: 2 240px;
    column-gap: 32px;
  }
  .dino-check-list.dino-cols-2 > li { margin-bottom: 10px; }
}

/* Option list on model pages, previously a bullet list. */
#dino-kart-options.dino-check-list { padding-left: 0 !important; }

/* Annotated kart views (static replacement for the prod hotspots). */
.dino-feature-group + .dino-feature-group { margin-top: 4px; }
.dino-feature-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dino-feature-group li {
  padding: 6px 12px;
  border: 1px solid var(--dino-line, #dadddd);
  border-radius: 999px;
  background: var(--dino-white, #fff);
  font-size: var(--dino-body);
  line-height: 1.4;
}

/* Image tiles (gallery, staff). */
.dino-cover-img img,
img.dino-cover-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.dino-gallery-tile {
  overflow: hidden;
  border: var(--dino-card-border);
  border-radius: var(--dino-card-radius);
  background: var(--dino-surface, #f3f4f4);
}
.dino-gallery-tile a { display: block; height: 100%; }

/* Exploded drawing parts list. */
.dino-parts {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--dino-line, #dadddd);
}
.dino-parts > li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--dino-line, #dadddd);
}
.dino-parts > li:nth-child(even) { background: var(--dino-surface, #f3f4f4); }
.dino-parts > li.dino-parts-head {
  background: var(--dino-ink, #080909);
  color: var(--dino-white, #fff);
  font-size: var(--dino-label);
  font-weight: 600;
  letter-spacing: var(--dino-label-ls);
  text-transform: uppercase;
}
.dino-parts .dino-parts-pos { font-weight: 900; font-variant-numeric: tabular-nums; }
.dino-parts .dino-parts-sku { font-variant-numeric: tabular-nums; color: var(--dino-muted, #555b60); font-size: var(--dino-small); }
.dino-parts a { color: var(--dino-ink, #080909); font-weight: 600; text-underline-offset: 3px; }
.dino-parts a:hover { color: var(--dino-red, #c00); }

/* Legal and long-form text. */
/* Type sizes, weights and link styles come from the global h2/h3, body and running-text rules. */
.dino-prose { max-width: 760px; font-size: var(--dino-body); line-height: var(--dino-body-lh); overflow-wrap: break-word; }
.dino-prose :is(h2, h3) { hyphens: auto; overflow-wrap: anywhere; }
.dino-prose h2 { margin: 1.6em 0 0.5em; }
.dino-prose h3 { margin: 1.3em 0 0.4em; }
.dino-prose p, .dino-prose ul { margin: 0 0 1em; }
.dino-prose ul { padding-left: 1.4em; }
.dino-prose li { margin-bottom: 0.4em; }
.dino-prose > :first-child { margin-top: 0; }

/* Draft notice and "Afventer DINO" markers on legal pages awaiting client sign-off.
 * Deliberately quiet: a small status chip and an inline highlight, not a warning box. */
.dino-notice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--dino-line, #dadddd);
  border-radius: 999px;
  background: var(--dino-surface, #f3f4f4);
  color: var(--dino-muted, #555b60);
  font-size: var(--dino-small);
  line-height: 1.5;
}
.dino-notice::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b45309;
}
.dino-todo {
  padding: 1px 6px;
  border-radius: 3px;
  background: #fff3d1;
  color: #4a3200;
  font-size: 0.9375em;
  font-style: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Long compound words (de/sv/no page titles) must not push the page wider than the viewport. */
.dino-hyphenate { hyphens: auto; overflow-wrap: anywhere; }

/* Company heroes on phones: the left-to-right gradient leaves the right half of the photo
   light while the text spans the full width. Add an even overlay for readable contrast. */
@media (max-width: 767px) {
  .dino-company-hero { position: relative; isolation: isolate; }
  .dino-company-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(8 9 9 / 55%);
    pointer-events: none;
  }
}

/* Kontakt hero: the photo is <img class="dino-hero-backdrop" fetchpriority=high>
   (tools/page-build/kontakt-hero-build.php, all languages); the overlay sits above it. */
#dino-contact-hero { position: relative; isolation: isolate; overflow: hidden; }
#dino-contact-hero > img.dino-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#dino-contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(8 9 9 / 88%), rgb(8 9 9 / 35%));
  pointer-events: none;
}
/* Phones: the text spans the full width, so an even overlay (white text stays AA on the photo). */
@media (max-width: 767px) {
  #dino-contact-hero::before { background: rgb(8 9 9 / 75%); }
}