/*
 * Primitive de layout. Înlocuiesc grid-ul Bootstrap: trei clase acoperă ce
 * făceau .container / .row / .col-md-*.
 */
/*
 * Layerul e declarat AICI, în interiorul fișierului, nu prin `@import … layer()`
 * în main.css. Motivul e practic: minificatorul de CSS din LiteSpeed Cache
 * rescrie @import-urile și pierde funcția layer(), ceea ce ar anula complet
 * ordinea de cascadă în producție. Un bloc @layer e un at-rule obișnuit și
 * supraviețuiește oricărei minificări sau combinări.
 */
@layer layout {
  .wrap {
    width: 100%;
    max-width: var(--wrap-max);
    margin-inline: auto;
    padding-inline: var(--wrap-gutter);
  }

  .section {
    padding-block: var(--section-y);
  }

  .section--subtle {
    background-color: var(--color-bg-subtle);
  }

  /* Grid auto-responsiv fără media queries: coloanele se așază singure.
     Controlezi lățimea minimă cu --col-min pe instanță. */
  .grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min, 18rem), 100%), 1fr));
  }

  .stack > * + * {
    margin-block-start: var(--flow, var(--space-4));
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  /* Bloc de text editorial (the_content, descrieri ACF). */
  .prose {
    max-width: 68ch;
  }

  .prose > * + * {
    margin-block-start: var(--space-4);
  }

  .prose h2,
  .prose h3 {
    margin-block-start: var(--space-8);
  }

  .prose ul,
  .prose ol {
    padding-inline-start: var(--space-6);
  }

  .prose li + li {
    margin-block-start: var(--space-2);
  }

  .prose a {
    color: var(--color-accent);
  }
}