/* ==========================================================================
   COMPONENT: FAQ (mrtcfqilu)
   Strict Rule: Semantic <details> & <summary>, no duplicate titles.
   Two-column editorial layout on desktop + height-animated accordion
   via CSS grid-rows (no JS layout thrash, native <details> kept intact).
   ========================================================================== */

:root {
  --mrtcfqilu-bg: #ffffff;
  --mrtcfqilu-border: rgba(0, 0, 0, 0.08);
  --mrtcfqilu-ink: #0f766e;
}

.mrtcfqilu {
  position: relative;
}

.mrtcfqilu-wrapper {
  max-width: 1120px;
  margin-inline: auto;
  column-count: 1;
  column-gap: var(--mrtc-space-lg);
}

@media (min-width: 900px) {
  .mrtcfqilu-wrapper {
    column-count: 2;
  }
}

.mrtcfqilu-item {
  position: relative;
  break-inside: avoid;
  overflow: hidden;
  background: var(--mrtcfqilu-bg);
  border: 1px solid var(--mrtcfqilu-border);
  border-radius: var(--mrtc-radius-lg);
  margin-bottom: var(--mrtc-space-md);
  box-shadow: var(--mrtc-shadow-sm);
  transition: border-color var(--mrtc-transition-normal), box-shadow var(--mrtc-transition-normal),
    transform var(--mrtc-transition-normal);
}

/* Active accent rail: grows from the reading-start edge (RTL-aware) */
.mrtcfqilu-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--mrtc-color-brand);
  transform: scaleY(0);
  transition: transform var(--mrtc-transition-normal);
}

.mrtcfqilu-item:hover:not([open]) {
  transform: translateY(-3px);
  box-shadow: var(--mrtc-shadow-md);
  border-color: rgba(188, 224, 223, 0.6);
}

.mrtcfqilu-item[open] {
  border-color: var(--mrtc-color-brand);
  box-shadow: 0 10px 30px rgba(188, 224, 223, 0.3);
}

.mrtcfqilu-item[open]::before {
  transform: scaleY(1);
}

.mrtcfqilu-summary {
  padding: var(--mrtc-space-lg) var(--mrtc-space-xl);
  font-size: var(--mrtc-font-size-lg);
  font-weight: 800;
  color: var(--mrtc-color-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mrtc-space-md);
  list-style: none;
  user-select: none;
}

.mrtcfqilu-summary::-webkit-details-marker {
  display: none;
}

.mrtcfqilu-item[open] .mrtcfqilu-summary > span:first-child {
  color: var(--mrtcfqilu-ink);
}

/* -- Minimal chevron: rotates on [open] (matches the inline SVG markup) -- */
.mrtcfqilu-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--mrtc-radius-full);
  background: rgba(188, 224, 223, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--mrtc-transition-fast) ease,
    transform var(--mrtc-transition-normal) ease;
}

.mrtcfqilu-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--mrtc-color-dark);
  transition: transform var(--mrtc-transition-normal) ease,
    stroke var(--mrtc-transition-fast) ease;
}

.mrtcfqilu-item[open] .mrtcfqilu-icon {
  background: var(--mrtc-color-dark);
  transform: rotate(180deg);
}

.mrtcfqilu-item[open] .mrtcfqilu-icon svg {
  stroke: var(--mrtc-color-brand);
}

/* -- Buttery open AND close: animate the UA ::details-content box itself --
   block-size 0 <-> auto plus an allow-discrete visibility flip, powered by
   interpolate-size (all modern engines). Where unsupported, the native
   instant toggle remains as a graceful fallback — never broken. */
.mrtcfqilu-item,
.mrtcfqilu-item::details-content {
  interpolate-size: allow-keywords;
}

.mrtcfqilu-item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    content-visibility 0.38s allow-discrete;
}

.mrtcfqilu-item[open]::details-content {
  block-size: auto;
}

.mrtcfqilu-content {
  padding: 0 var(--mrtc-space-xl) var(--mrtc-space-xl);
  font-size: var(--mrtc-font-size-base);
  color: var(--mrtc-color-text-body);
  line-height: 1.7;
}

.mrtcfqilu-content p {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .mrtcfqilu-summary {
    padding: var(--mrtc-space-md);
    font-size: var(--mrtc-font-size-base);
    gap: var(--mrtc-space-sm);
  }

  .mrtcfqilu-content {
    padding: 0 var(--mrtc-space-md) var(--mrtc-space-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mrtcfqilu-item::details-content,
  .mrtcfqilu-icon,
  .mrtcfqilu-icon svg,
  .mrtcfqilu-item {
    transition: none;
  }
}