/* ==========================================================================
   EMMA INTERNATIONAL · MATICA MAP4Y
   ========================================================================== */

@layer components {
  .matica {
    gap: var(--odstup-s);
    display: grid;
  }
  .matica__stlpce {
    display: none;
  }
  .matica__rad {
    gap: var(--odstup-2xs);
    display: grid;
  }
  .matica__dvojica {
    gap: var(--odstup-s);
    display: grid;
  }
  .matica__os {
    color: var(--text-tlmeny);
    font-size: var(--velkost-s);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  @media (width >= 900px) {
    .matica {
      row-gap: var(--odstup-s);
      column-gap: var(--odstup-m);
      grid-template-columns: auto 1fr;
    }
    .matica__stlpce {
      gap: var(--odstup-s);
      text-align: center;
      grid-column: 2;
      grid-template-columns: 1fr 1fr;
      display: grid;
    }
    .matica__rad {
      grid-column: 1 / 3;
      grid-template-columns: subgrid;
      align-items: stretch;
    }
    .matica__os--rad {
      writing-mode: sideways-lr;
      text-align: center;
      align-self: center;
    }
    .matica__dvojica {
      grid-template-columns: 1fr 1fr;
    }
    .matica__spinac-drziak {
      grid-column: 2;
    }
  }

  .matica__kvadrant {
    border: 1px solid var(--akcent);
    border-radius: var(--polomer);
    background-color: var(--povrch);
  }
  .matica__kvadrant::details-content {
    block-size: 0;
    transition: block-size 0.34s cubic-bezier(0.2, 0, 0.2, 1), content-visibility 0.34s allow-discrete;
    overflow: clip;
  }
  .matica__kvadrant[open]::details-content {
    block-size: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .matica__kvadrant::details-content,
    .matica__spinac-sever {
      transition: none;
    }
  }

  .matica__suhrn {
    gap: var(--odstup-3xs);
    padding: var(--odstup-m);
    cursor: pointer;
    list-style: none;
    display: grid;
  }
  .matica:has(.matica__spinac:not([hidden])) .matica__suhrn {
    cursor: default;
    pointer-events: none;
  }
  .matica__suhrn::-webkit-details-marker {
    display: none;
  }
  .matica__nazov {
    font-family: var(--pismo-display);
    font-size: var(--velkost-l);
    letter-spacing: 0.1em;
  }
  .matica--hero .matica__nazov {
    font-size: var(--velkost-xl);
  }
  .matica__kvadrant[open] .matica__nazov {
    color: var(--akcent);
  }
  .matica__osi-sr {
    clip-path: inset(50%);
    white-space: nowrap;
    block-size: 1px;
    inline-size: 1px;
    position: absolute;
    overflow: hidden;
  }
  .matica__pozvanka {
    color: var(--akcent);
    font-size: var(--velkost-s);
    letter-spacing: 0.04em;
  }
  .matica__obsah {
    gap: var(--odstup-m);
    padding: 0 var(--odstup-m) var(--odstup-m);
    display: grid;
  }
  .matica__stav {
    gap: var(--odstup-2xs);
    border-inline-start: 2px solid var(--akcent);
    padding-inline-start: var(--odstup-s);
    display: grid;
  }
  .matica__stav-nazov {
    font-family: var(--pismo-display);
    font-size: var(--velkost-l);
  }
  .matica__pole {
    gap: var(--odstup-s);
    grid-template-columns: 6.5rem 1fr;
    align-items: baseline;
    display: grid;
  }
  .matica__pole-nazov {
    color: var(--text-tlmeny);
    font-size: var(--velkost-s);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .matica__pole-hodnota {
    color: var(--text-tlmeny);
  }
  .matica__pole-hodnota--strategia {
    color: var(--akcent);
    letter-spacing: 0.04em;
  }
  @media (width < 480px) {
    .matica__pole {
      grid-template-columns: 1fr;
      gap: 0;
    }
  }

  .matica__spinac-drziak {
    justify-items: center;
    display: grid;
    position: relative;
    margin-block-start: var(--odstup-s);
  }
  .matica__spinac-drziak:before {
    content: "";
    background-color: var(--akcent);
    opacity: 0.4;
    block-size: 1px;
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
  }
  .matica__spinac {
    align-items: center;
    gap: var(--odstup-2xs);
    min-block-size: 44px;
    padding-inline: var(--odstup-m);
    background-color: var(--povrch);
    color: var(--akcent);
    font: inherit;
    font-size: var(--velkost-s);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    display: inline-flex;
    position: relative;
    z-index: 1;
  }
  .sekcia--striedava .matica__spinac {
    background-color: var(--povrch-2);
  }
  .matica__spinac:hover .matica__spinac-text {
    text-underline-offset: 0.25em;
    text-decoration: underline;
  }
  .matica__spinac-sever {
    fill: none;
    block-size: 1.25rem;
    inline-size: 1.25rem;
    stroke: var(--akcent);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);
  }
  .matica__spinac[aria-expanded="true"] .matica__spinac-sever {
    transform: rotate(180deg);
  }
  .matica-dovetok {
    color: var(--text-tlmeny);
    margin-block-start: var(--odstup-xl);
  }
}