/* =============================================================================
   DPL content pages (redesign batch 8, lane B): page.php, contact, complaint, FAQ, lab results, calculator,
   about, reviews, legal texts, the blog index and article, the collections index. Sits on top of
   component-dpl-page.css (shell, prose, field group, pills) and component-dpl-page-banner.css; the page-specific
   files (component-dpl-contact.css, ...) lay out their own cards. Tokens: dpl-design-system.css.
   ============================================================================= */

/* The banner's small line above the title (about, legal): the accent, normal letters. */
.dpl-page-banner__eyebrow {
  margin: 0;
  font-size: var(--dpl-text-size-small);
  font-weight: var(--dpl-weight-heading);
  color: var(--dpl-accent);
}

.dpl-page-banner .main-page-title {
  margin: 0;
}

.dpl-page-banner a {
  color: var(--dpl-on-dark);
  text-decoration: underline;
  text-decoration-color: var(--dpl-accent);
  text-underline-offset: 3px;
}

/* A card that holds a form or a list does not lift on hover (only linked cards do). */
.dpl-page .dpl-surface-card--static {
  overflow: visible;
}

@media (hover: hover) {
  .dpl-page .dpl-surface-card--static:hover {
    transform: none;
    box-shadow: var(--dpl-shadow-card);
    border-color: var(--dpl-border);
  }
}

.dpl-coa,
.dpl-article > .page-width {
  display: grid;
  gap: 24px;
}

/* Normal weights inside the pages (nothing heavier than 600) */
.dpl-page strong,
.dpl-page b {
  font-weight: var(--dpl-weight-strong);
}

/* ------------------------------------------------------------------ complaint form */
.dpl-complaint__types {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.dpl-complaint__types legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: var(--dpl-text-size-small);
  font-weight: var(--dpl-weight-heading);
}

.dpl-page .dpl-complaint__type {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--dpl-border);
  border-radius: var(--dpl-radius-input);
  cursor: pointer;
  font-size: var(--dpl-text-size-small);
  font-weight: 400;
}

.dpl-complaint__type input {
  accent-color: var(--dpl-accent);
  width: 18px;
  height: 18px;
  margin: 0;
}

.dpl-complaint__type:has(input:checked) {
  border-color: var(--dpl-accent);
  background: var(--dpl-surface-tint);
}

.dpl-complaint__hint {
  font-size: 13px;
  color: var(--dpl-text-muted);
  margin: 6px 0 0;
}

.dpl-complaint__hint a {
  color: var(--dpl-text);
  text-decoration: underline;
  text-decoration-color: var(--dpl-accent);
  text-underline-offset: 3px;
}

.dpl-complaint input[type='file'] {
  min-height: 0;
  padding: 12px;
}

/* ------------------------------------------------------------------ reviews page */
.dpl-page .dpl-reviews {
  padding: 0;
}

.dpl-page .dpl-reviews .cr-review-card {
  background: var(--dpl-surface) !important;
  box-shadow: var(--dpl-shadow-card);
}

.dpl-page .dpl-reviews .cr-summaryBox-wrap {
  background: var(--dpl-surface) !important;
  box-shadow: var(--dpl-shadow-card);
}

.dpl-page .dpl-reviews__panel {
  background: var(--dpl-surface);
  box-shadow: var(--dpl-shadow-card);
  margin: 0 0 24px;
  max-width: none;
}

.dpl-page .dpl-reviews__notice {
  background: var(--dpl-surface);
  border-radius: var(--dpl-radius-card);
  margin: 0 0 24px;
}

.dpl-page .dpl-reviews__heading {
  font-weight: var(--dpl-weight-strong);
  color: var(--dpl-text);
}

.dpl-page .dpl-review-form input[type='text'],
.dpl-page .dpl-review-form textarea {
  border-radius: var(--dpl-radius-input);
}

/* ------------------------------------------------------------------ blog index */
.dpl-blog__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dpl-grid-gap);
}

@media screen and (min-width: 750px) {
  .dpl-blog__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 990px) {
  .dpl-blog__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dpl-blog__item {
  display: flex;
}

.dpl-blog__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.dpl-blog__link:focus-visible {
  outline: 2px solid var(--dpl-accent);
  outline-offset: -2px;
  border-radius: var(--dpl-radius-card);
}

.dpl-blog__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--dpl-surface-grey);
}

.dpl-blog__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  flex: 1;
}

.dpl-blog__date {
  display: block;
  font-size: 13px;
  color: var(--dpl-text-muted);
}

.dpl-blog__item-title {
  margin: 0;
  font-size: var(--dpl-h3);
  font-weight: var(--dpl-weight-strong);
  line-height: 1.3;
  color: var(--dpl-text);
}

.dpl-blog__excerpt {
  margin: 0;
  font-size: var(--dpl-text-size-small);
  line-height: 1.6;
  color: var(--dpl-text-muted);
}

.dpl-blog__readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: var(--dpl-text-size-small);
  font-weight: var(--dpl-weight-heading);
  color: var(--dpl-text);
}

.dpl-blog__readmore svg {
  color: var(--dpl-accent);
}

.dpl-blog__pagination {
  margin-top: 24px;
  gap: 12px;
}

.dpl-blog__pagination .dpl-btn {
  min-height: var(--dpl-btn-height-sm);
  padding: 0 18px;
}

.dpl-blog__empty {
  background: var(--dpl-surface);
  border-radius: var(--dpl-radius-card);
}

/* ------------------------------------------------------------------ article */
.dpl-article__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  min-height: 44px;
  font-size: var(--dpl-text-size-small);
  font-weight: var(--dpl-weight-heading);
  color: var(--dpl-text);
  text-decoration: none;
}

.dpl-article__back svg {
  color: var(--dpl-accent);
}

.dpl-page .dpl-article__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dpl-article__media {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--dpl-radius-card);
  background: var(--dpl-surface-grey);
}

.dpl-article__footer {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding-top: 0;
  border-top: 0;
}

.dpl-page .dpl-article__body a {
  color: var(--dpl-text);
}

/* ------------------------------------------------------------------ collections index */
.dpl-collections-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dpl-grid-gap);
}

@media screen and (min-width: 750px) {
  .dpl-collections-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (min-width: 990px) {
  .dpl-collections-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.dpl-collections-grid li {
  display: flex;
}

.dpl-collections-grid .dpl-cat-square {
  width: 100%;
  justify-content: center;
  padding: 28px 12px;
}

.dpl-collections-grid .dpl-cat-square__icon:empty {
  display: none;
}

.dpl-collections-grid .dpl-cat-square__label {
  font-size: var(--dpl-text-size);
}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  .dpl-page *,
  .dpl-page *::before,
  .dpl-page *::after {
    transition: none !important;
    animation: none !important;
  }
}