/* ==========================================================================
   RN.MATES — Estilos de block patterns
   Solo lo que NO cubre theme.css. Reutiliza tokens y clases rn-* del sistema.
   Prefijo rn- en todo lo nuevo. NO editar theme.css.
   ========================================================================== */

/* --- FAQ (acordeón nativo details/summary) --- */
.rn-faq { display: flex; flex-direction: column; gap: 0.75rem; }

.rn-faq__item {
  background: var(--c-crema);
  border: 1px solid var(--c-linea);
  border-radius: var(--r-lg);
  padding: 0 1.25rem;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.rn-faq__item[open] {
  border-color: var(--c-verde-300);
  box-shadow: var(--sh-sm);
}
.rn-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--c-verde-900);
}
.rn-faq__item > summary::-webkit-details-marker { display: none; }
.rn-faq__item > summary::after {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--c-crema-2);
  border-radius: var(--r-pill);
  position: relative;
  transition: background var(--tr), transform var(--tr);
}
.rn-faq__item > summary::before {
  content: "";
  position: absolute;
  right: calc(0.75rem - 1px);
  width: 0.75rem;
  height: 0.75rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: var(--c-cuero-700);
  transition: transform var(--tr);
  pointer-events: none;
}
.rn-faq__item[open] > summary::before { transform: rotate(45deg); }
.rn-faq__item > summary:focus-visible {
  outline: 3px solid var(--c-acento);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.rn-faq__item > summary:hover { color: var(--c-acento); }
.rn-faq__item > :not(summary) {
  margin: 0 0 1.1rem;
  color: var(--c-tinta-2);
  max-width: 70ch;
}
@media (prefers-reduced-motion: reduce) {
  .rn-faq__item, .rn-faq__item > summary::before, .rn-faq__item > summary::after { transition: none; }
}

/* --- Ajustes de los patterns sobre el grid de bloques de Gutenberg --- */
/* El hero del pattern usa el grid existente .rn-hero__inner; las columnas de
   Gutenberg ya dan el layout en "sobre-nosotros", solo damos aire al bezel. */
.rn-bezel .wp-block-image,
.rn-bezel__core.wp-block-image { margin: 0; }
.rn-bezel__core img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Chips dentro de un bloque HTML del editor: heredan .rn-chip de theme.css. */
.rn-chip svg { width: 18px; height: 18px; }