/* =========================================================
   MIRACLE LIQUORS – REVIEWS v2.0
   Component Library

   DOEL
   ---------------------------------------------------------
   Eén definitief reviewsysteem ter vervanging van oude
   `.ml-review` en `.ml-review-card` varianten.

   OFFICIËLE VARIANTEN
   ---------------------------------------------------------
   1. Default
   2. Center
   3. Compact
   4. Featured
   5. Dark
   6. Horizontal

   OPTIONELE MODIFIERS
   ---------------------------------------------------------
   - --soft
   - --flat
   - --bordered
   - --equal

   Vereist:
   - variables.css
   - typography.css
   - links.css
   - icons.css
   - spacing.css
   ========================================================= */


/* =========================================================
   1. BASE
   ========================================================= */

.ml-review {
  position: relative;
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;

  padding: var(--ml-space-024);

  border:
    var(--ml-border-width-thin)
    var(--ml-border-style)
    var(--ml-color-border);

  border-radius: var(--ml-radius-card);

  background: var(--ml-color-surface);
  color: var(--ml-color-text);

  box-shadow: var(--ml-shadow-xs);
}


/* =========================================================
   2. RATING
   ========================================================= */

.ml-review__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--ml-space-004);

  color: var(--ml-color-accent);
  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-body);
  line-height: 1;
  letter-spacing: 0.06em;
}

.ml-review__rating-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}


/* =========================================================
   3. QUOTE
   ========================================================= */

.ml-review__quote {
  margin: var(--ml-space-020) 0 0;
  padding: 0;
  padding-left: 20px;

  color: var(--ml-color-text);
  font-family: var(--ml-font-body);
  font-size: var(--ml-text-body-sm);
  line-height: var(--ml-leading-body-relaxed);
}

.ml-review__quote p {
  margin: 0;
}

.ml-review__quote::before {
  display: none;
  margin-bottom: var(--ml-space-012);

  color: var(--ml-color-accent);
  content: "“";

  font-family: Georgia, serif;
  font-size: 3.2rem;
  line-height: .65;
}


/* =========================================================
   4. AUTHOR
   ========================================================= */

.ml-review__author {
  display: flex;
  align-items: center;
  gap: var(--ml-space-012);

  margin-top: auto;
  padding-top: var(--ml-space-024);
}

.ml-review__avatar {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;

  overflow: hidden;

  border-radius: var(--ml-radius-pill);
  background: var(--ml-color-surface-tinted);
  color: var(--ml-color-primary);

  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-caption);
  font-weight: var(--ml-font-weight-bold);
}

.ml-review__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ml-review__author-content {
  min-width: 0;
}

.ml-review__name {
  display: block;

  color: var(--ml-color-heading);
  font-family: var(--ml-font-body);
  font-size: var(--ml-text-body-sm);
  font-weight: var(--ml-font-weight-bold);
  line-height: 1.45;
}

.ml-review__meta {
  display: block;
  margin-top: var(--ml-space-004);

  color: var(--ml-color-text-subtle);
  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-caption);
  line-height: var(--ml-leading-ui);
}


/* =========================================================
   5. SOURCE
   ========================================================= */

.ml-review__source {
  display: inline-flex;
  align-items: center;
  gap: var(--ml-space-006);

  margin-top: var(--ml-space-012);

  color: var(--ml-color-text-subtle);
  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-caption);
  line-height: var(--ml-leading-ui);
}


/* =========================================================
   6. CENTER
   ========================================================= */

.ml-review--center {
  align-items: center;
  text-align: center;
}

.ml-review--center .ml-review__author {
  justify-content: center;
}

.ml-review--center .ml-review__quote::before {
  margin-inline: auto;
}


/* =========================================================
   7. COMPACT
   ========================================================= */

.ml-review--compact {
  padding: var(--ml-space-020);
}

.ml-review--compact .ml-review__quote {
  margin-top: var(--ml-space-016);
  font-size: var(--ml-text-body-sm);
}

.ml-review--compact .ml-review__quote::before {
  margin-bottom: var(--ml-space-008);
  font-size: 2.6rem;
}

.ml-review--compact .ml-review__author {
  padding-top: var(--ml-space-020);
}


/* =========================================================
   8. FEATURED
   ========================================================= */

.ml-review--featured {
  padding: var(--ml-space-020);

  border-color: var(--ml-color-accent);

  box-shadow: var(--ml-shadow-sm);
}

.ml-review--featured {
  font-size: var(--ml-text-lead);
}

.ml-review__quote {
  font-size: var(--ml-text-body-sm);
}

.ml-review--featured .ml-review__quote::before {
  font-size: 4rem;
}


/* =========================================================
   9. DARK
   ========================================================= */

.ml-review--dark {
  border-color: transparent;

  background:
    linear-gradient(
      135deg,
      var(--ml-color-surface-brand) 0%,
      var(--ml-color-surface-brand-strong) 100%
    );

  color: var(--ml-color-text-inverse);
}

.ml-review--dark .ml-review__quote,
.ml-review--dark .ml-review__name {
  color: var(--ml-color-text-inverse);
}

.ml-review--dark .ml-review__meta,
.ml-review--dark .ml-review__source {
  color: var(--ml-color-text-inverse-muted);
}

.ml-review--dark .ml-review__avatar {
  background: rgba(255,255,255,.08);
  color: var(--ml-color-accent-soft);
}


/* =========================================================
   10. HORIZONTAL
   ========================================================= */

.ml-review--horizontal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--ml-space-024);
}

.ml-review--horizontal .ml-review__author {
  margin-top: 0;
  padding-top: 0;
}


/* =========================================================
   11. MODIFIERS
   ========================================================= */

.ml-review--soft {
  background: var(--ml-color-surface-soft);
}

.ml-review--flat {
  border-color: transparent;
  box-shadow: none;
}

.ml-review--bordered {
  border-color: var(--ml-color-border-strong);
}

.ml-review--equal {
  height: 100%;
}


/* =========================================================
   12. GRID WRAPPER
   ========================================================= */

.ml-reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ml-grid-gap-md);
}


/* =========================================================
   13. RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  .ml-reviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ml-review--horizontal {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .ml-review--horizontal .ml-review__author {
    margin-top: var(--ml-space-020);
  }
}

@media (max-width: 680px) {
  .ml-reviews {
    grid-template-columns: 1fr;
  }

  .ml-review {
    padding: var(--ml-space-020);
  }

  .ml-review--featured {
    padding: var(--ml-space-024);
  }

  .ml-review--featured .ml-review__quote {
    font-size: var(--ml-text-body-sm);
  }
}