/*
  Ported from /preview/assets/css/components/loler.css. Unchanged except
  for this note: .loler__media's panel/ring/mark carry no editable
  content (a dashed placeholder panel, a decorative red ring, a plain
  circular "8" — not a certification seal, see patterns/loler.php), so
  the whole media column is one Custom HTML block rather than forced
  into Group/Image blocks that don't fit. .loler__content's children
  (eyebrow, heading, copy, checklist, button) are real blocks — their
  classNames land on their own tag directly (Heading/Paragraph/Group),
  so no selector changes were needed there.
*/

.loler {
  background: var(--wp--preset--color--soft-grey);
  overflow-x: hidden;
}

.loler__grid {
  display: grid;
  gap: var(--wp--preset--spacing--70);
  align-items: center;
}

.loler__content {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
}

.loler__title {
  font-size: var(--wp--preset--font-size--xl);
  max-width: 16ch;
}

.loler__intro {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}

.loler__text {
  color: var(--wp--preset--color--graphite);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.6;
  max-width: 52ch;
}

.loler__actions {
  margin-top: var(--wp--preset--spacing--10);
}

/* Media column */
.loler__media {
  position: relative;
}

.loler__panel {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
  background: var(--wp--preset--color--warm-white);
  border: 2px dashed rgba(37, 37, 39, 0.25);
  border-radius: var(--radius-lg);
  color: var(--wp--preset--color--graphite);
  overflow: hidden;
}

.loler__panel-icon {
  width: 25%;
  min-width: 56px;
  max-width: 96px;
  opacity: 0.6;
}

.loler__panel-caption {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.65;
}

.loler__panel-caption svg {
  width: 1em;
  height: 1em;
}

/* Controlled red-circle accent, overlapping the panel edge rather than
   filling the frame — a brand geometry cue, not a photo effect. */
.loler__ring {
  position: absolute;
  z-index: 0;
  width: 54%;
  aspect-ratio: 1;
  right: -6%;
  bottom: -10%;
  border-radius: 50%;
  border: 14px solid var(--wp--preset--color--signal-red);
  pointer-events: none;
}

/* Plain circular brand mark — deliberately just a ring and a numeral,
   with no surrounding badge text, so it can't be mistaken for a
   certification seal. */
.loler__mark {
  position: absolute;
  z-index: 2;
  left: -1.25rem;
  bottom: -1.25rem;
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wp--preset--color--white);
  border: 1.5px solid var(--wp--preset--color--soft-grey);
  box-shadow: 0 12px 24px -12px rgba(11, 11, 12, 0.3);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--c-red-solid);
}

@media (min-width: 1024px) {
  .loler__grid {
    grid-template-columns: 1fr 1.05fr;
  }

  .loler__media {
    order: -1;
  }
}