/* ==========================================================================
   13-contact.css — Kapcsolat oldal (Figma node 1:3120)

   Három szekció:
     1. Elnökség elérhetőségei — a kártyák az OLDAL TARTALMÁBÓL jönnek
        (Gutenberg blokkok, „ICF — Elnökségi tag" minta), a rácsot és a
        kártya-designt ez a fájl adja.
     2. Szervezeti adatkártyák — sárga ikoncsempe + címke + adatsorok.
     3. „További oldalak" sötétkék sáv — fehér link-kártyákkal.

   A tervben szereplő 11px-es mikro-címke és a 195px-es fotó nincs a
   token skálán, ezért komponens-szintű változóként élnek (a CLAUDE.md
   ezt a mintát írja elő), nem szórt hardcode értékként.
   ========================================================================== */

@layer components {

  /* ========================================================================
     1. ELNÖKSÉG — kártyarács a bejegyzés tartalmából
     ======================================================================== */

  .contact-board {
    position: relative;
    background-color: var(--color-bg);
  }

  /* A rácsot a szerkesztő a „board-grid" osztályú csoport blokkal kapja.
     Ha valaki mégis csoport nélkül szúrja be a kártyákat, a .flow
     alapértelmezett függőleges ritmusa marad — tartalom nem vész el. */
  .board-grid {
    --board-gap: var(--space-8);

    display: grid;
    gap: var(--space-10) var(--board-gap);
    margin: 0;
  }

  /* ÁLLÓ KÁRTYA: a fotó FELÜL, alatta a szöveg.

     Korábban a fotó oldalt állt, 195px-es oszlopban. Három kártyával egy
     sorban ez nem fért ki: a kártya 434px (a belső oldalon 359px), amiből a
     fotó és a köz után 223, illetve 148px maradt a szövegnek — a leghosszabb
     e-mail cím viszont 261px-et kér, ezért szó közben tört ketté. A fotót
     80px-re kellett volna zsugorítani, hogy kiférjen, és az már nem portré.

     Álló elrendezésben a szöveg a TELJES kártyaszélességet kapja, tehát a cím
     mindkét laptípuson egy sorban marad — és a névsor három oszlopos lehet,
     ahogy az ügyfél kérte. */
  .board-card {
    --board-photo-size: 195px;       /* a terv portréméret */
    --board-label-size: 0.6875rem;   /* 11px — a terv mikro-címkéje */
    --board-photo-radius: 10px;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }

  /* A kép blokk figure-je. A méretet a rács oszlopa adja, a négyzet alakot
     az aspect-ratio — így nem kell fix px, és mobilon is működik.

     ⚠️ A figure margóját és a kép magasságát a 99-wp-overrides.css állítja:
     a blokk-könyvtár `:where(figure){margin:0 0 1em}` és
     `.wp-block-image img{height:auto}` szabályai layer nélküliek, ezért
     erősebbek az itteni, layerezett deklarációknál. */
  /* A portrék áttetsző PNG-k (kék ecsetvonás + alak), ezért a csempe színe
     az OLDAL háttere kell legyen, nem egy sötétebb árnyalat — a tervben is
     #F8F0E4, vagyis maga a csontszín. */
  /* A fotó NEM tölti ki a kártya szélességét: a terv szerinti 195px-en marad.
     Álló elrendezésben a sáv szélessége a rács oszlopa (434px, a belső oldalon
     359px), és ha a négyzet ezt felvenné, egyetlen kártya 620px magas lenne —
     hét emberrel kezelhetetlenül hosszú lap. A szöveg közben a TELJES
     kártyaszélességet kapja, tehát a hosszú e-mail cím így is egy sorban marad:
     a korlát csak a képre vonatkozik. */
  .board-card__photo {
    overflow: hidden;
    inline-size: 100%;
    max-inline-size: var(--board-photo-size);
    aspect-ratio: 1;
    border-radius: var(--board-photo-radius);
    background-color: var(--color-bg);

    & img {
      display: block;
      inline-size: 100%;
      object-fit: cover;
    }
  }

  .board-card__body {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .board-card__body h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-h4);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-display);
    color: var(--color-primary);
  }

  /* A „POZÍCIÓ" és „E-MAIL" címke a designban fix kísérőszöveg, nem
     szerkesztendő tartalom — ezért CSS-ből jön, így a szerkesztőnek csak
     az értéket kell beírnia. */
  .board-card :is(.board-card__role, .board-card__email) {
    max-width: none;
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    color: var(--color-text);
  }

  .board-card :is(.board-card__role, .board-card__email)::before {
    display: block;
    margin-block-end: 2px;
    color: var(--color-text-muted);
    font-size: var(--board-label-size);
    letter-spacing: var(--tracking-widest);
    line-height: var(--lh-normal);
    text-transform: uppercase;
  }

  .board-card .board-card__role::before {
    content: "Pozíció";
  }

  .board-card .board-card__email {
    margin-block-start: var(--space-3);
    overflow-wrap: anywhere;
  }

  .board-card .board-card__email::before {
    content: "E-mail";
  }

  .board-card .board-card__cta {
    max-width: none;
    margin-block: var(--space-4) 0;
    font-size: var(--text-eyebrow);
  }

  .board-card .board-card__cta a {
    color: var(--color-primary);
    text-decoration: none;
  }

  .board-card .board-card__cta a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* ========================================================================
     CSAPATKÁRTYA — „Elnökség és szakmai csapatok" oldal

     Ott 59 ember szerepel, jellemzően csak fotóval és névvel (pozíció csak
     a csapatvezetőknél), ezért itt a kompakt, felül fotós kártya megy: a
     széles elnökségi kártya ekkora névsoron kezelhetetlenül hosszú lenne.

     Ugyanazok a blokkok, mint az elnökségnél (kép + h3 + bekezdés), csak
     `team-card` osztállyal — a szerkesztő ugyanúgy duplikálja őket.
     ======================================================================== */

  .team-grid {
    --team-gap: var(--space-6);

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-8) var(--team-gap);
    margin-block: var(--space-8) var(--space-16);
  }

  .team-card {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* ------------------------------------------------------------------------
     A CSAPAT VEZETŐJE SAJÁT SORT KAP

     Nyolc csapatrácsból hétben PONTOSAN EGY kártyán áll beosztás — a
     vezetőén (Igazgató, Alelnök) —, és az mindig az első. Ez tehát
     megbízható jel, nem kell külön osztály a tartalomba.

     A sortörés NEM span-nel megy: a `grid-column: 1 / -1` a kártyát a teljes
     sorra nyújtaná, és mivel a fotó `inline-size: 100%` + `aspect-ratio: 1`,
     egy sorszélességű négyzet lenne belőle. Ehelyett a vezető ÉS az utána
     következő kártya is az 1. oszlopot kéri: a másodiknak így nem marad hely
     az első sorban, tehát új sort nyit. A kártyák mérete változatlan.
     ------------------------------------------------------------------------ */
  .team-card:has(.team-card__role),
  .team-card:has(.team-card__role) + .team-card {
    grid-column: 1;
  }

  .team-card__photo {
    overflow: hidden;
    inline-size: 100%;
    aspect-ratio: 1;
    margin-block-end: var(--space-4);
    border-radius: 10px;
    background-color: var(--color-bg);

    & img {
      display: block;
      inline-size: 100%;
      object-fit: cover;
    }
  }

  .team-card__body h3,
  .team-card h3 {
    margin: 0;
    font-size: var(--text-h5);
    line-height: var(--lh-snug);
    color: var(--color-primary);
    text-wrap: balance;
  }

  .team-card .team-card__role {
    max-width: none;
    margin-block-start: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
  }

  /* A csapatok bemutatkozó szövege olvasható sorhosszon marad, a névsor
     viszont a teljes szélességet használja. */
  .contact-board__body > :is(p, h2) {
    max-inline-size: 68ch;
  }

  /* A térközt a `.flow` utility adja (margin-block-start: var(--flow-space)),
     és az utilities layer erősebb ennél a fájlnál — ezért a változót írjuk
     felül, nem a margót. */
  .contact-board__body h2 {
    --flow-space: var(--space-16);

    font-size: var(--text-h3);
  }

  /* ========================================================================
     2. SZERVEZETI ADATKÁRTYÁK
     ======================================================================== */

  .contact-info {
    background-color: var(--color-bg);
  }

  .contact-info__title {
    margin-block-end: var(--space-10);
    font-size: var(--text-section-title);
    text-wrap: balance;
  }

  .contact-info__grid {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* A kártya és a link-kártya közös alapja: fehér lap, halvány keret.
     A tervben 16px a lekerekítés — ez a --radius-2xl. */
  .info-card,
  .link-card {
    display: block;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background-color: var(--color-bg-alt);
  }

  .info-card__icon,
  .link-card__icon {
    --tile-size: 44px;

    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tile-size);
    block-size: var(--tile-size);
    margin-block-end: var(--space-4);
    border-radius: 10px;

    & .icon {
      inline-size: 26px;
      block-size: 26px;
    }
  }

  .info-card__icon {
    background-color: var(--color-accent);
    color: var(--icf-deep-blue);
  }

  .info-card__label {
    display: block;
    margin-block-end: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.6875rem;             /* 11px — mikro-címke, mint a kártyáknál */
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
  }

  .info-card__line {
    max-width: none;
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--lh-relaxed);
    overflow-wrap: anywhere;

    & a {
      color: var(--color-primary);
      text-decoration: none;
    }

    & a:hover {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }

  .info-card__line--strong {
    font-weight: var(--fw-semibold);
  }

  /* ========================================================================
     3. „TOVÁBBI OLDALAK" SÁV
     ======================================================================== */

  /* A sáv nem ér ki a kijelző széléig: 24px oldalmargó marad, ugyanúgy,
     ahogy a hirdetősáv, a fejléc és a kezdőlapi események sáv is
     (.events-section padding-inline). */
  .contact-band {
    position: relative;
    overflow: hidden;
    margin-block: var(--space-16);
    margin-inline: var(--space-6);
    padding-block: var(--space-16);
    border-radius: var(--radius-card);
    background-color: var(--color-primary);
    color: var(--color-text-invert);
  }

  .contact-band .container {
    position: relative;
    z-index: var(--z-base);
  }

  .contact-band .section-head__title {
    color: var(--color-text-invert);
  }

  .contact-links {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .link-card {
    block-size: 100%;
    text-decoration: none;
    transition:
      transform var(--duration-base) var(--ease),
      box-shadow var(--duration-base) var(--ease);

    &:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-card);
    }

    &:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 3px;
    }
  }

  .link-card__icon {
    background-color: var(--color-bg);
    color: var(--icf-deep-blue);
  }

  .link-card__title {
    display: block;
    margin-block-end: var(--space-3);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-h5);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
  }

  .link-card__cta {
    display: block;
    color: var(--icf-light-blue);
    font-size: var(--text-sm);
  }

  /* ========================================================================
     DEKORÁCIÓK — a sávon átlátszó, sötétkék ecsetvonások
     ======================================================================== */

  .contact-band__deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  .contact-band__deco .brush {
    --brush-color: var(--icf-deep-blue);

    opacity: 0.35;
  }

  .brush--contact-asterisk {
    inset-block-start: 8%;
    inset-inline-start: -2%;
    inline-size: 300px;
  }

  .brush--contact-line {
    inset-block-start: 4%;
    inset-inline-end: 2%;
    inline-size: 320px;
    aspect-ratio: 360 / 115;
  }

  .brush--contact-arrow {
    inset-block-end: -12%;
    inset-inline-end: 4%;
    inline-size: 300px;
  }

  /* ========================================================================
     RESPONSIVE
     ======================================================================== */

  @media (min-width: 640px) {
    .contact-info__grid,
    .contact-links {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* ------------------------------------------------------------------------
     A NÉVSOR SORAI: AZ ELNÖK EGYEDÜL, A TÖBBIEK HÁRMASÁVAL

     Az ügyfél kérése: az elnök álljon egyedül az első sorban, a másik hat
     igazgató pedig két sorban — vagyis hármasával.

     BALRA IGAZÍTVA, nem középen. Középre húzva ugyanis a kártya DOBOZA kerül
     középre, és mivel a névsor többi eleme balról indul, a lap teteje
     félrecsúszottnak látszik. Balra igazítva az elnök fotója a második sor
     első kártyájáéval ugyanazon a vonalon kezdődik.

     A sortörés nem `grid-column: 1 / -1` span-nel megy: az a kártyát a teljes
     sorra nyújtaná, és mivel a fotó `inline-size: 100%` + `aspect-ratio: 1`,
     egy sorszélességű négyzet lenne belőle. Ehelyett az elnök ÉS az utána
     következő kártya is az 1. oszlopot kéri: a másodiknak így nem marad hely
     az első sorban, tehát új sort nyit — a kártyák mérete változatlan.
     ------------------------------------------------------------------------ */
  @media (min-width: 640px) {
    .board-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .board-grid > .board-card:first-child,
    .board-grid > .board-card:first-child + .board-card {
      grid-column: 1;
    }
  }

  @media (min-width: 1024px) {
    .board-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .contact-info__grid,
    .contact-links {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .contact-band {
      padding-block: var(--space-20);
    }
  }

  /* ------------------------------------------------------------------------
     A TANÁCSADÓ TESTÜLET HÉT FŐJE KÉT SORBA

     Ez az EGYETLEN csapatrács, amiben senkinek nincs beosztása — nincs
     vezetője, mind a hét tag egyenrangú. Emiatt a fenti sortörés sem hat rá,
     és a hét kártya 6+1-re esett szét: egy árva a második sorban.

     Négy oszlopnyi szélességre fogva 4+3 lesz belőle. A rácsot szűkítjük, nem
     az oszlopszámot írjuk át: így az `auto-fill` ugyanazt a 208px-es
     kártyaméretet adja, mint a többi csapatnál — csak a blokk lesz rövidebb.
     A képlet a hat oszlopból négyet hagy meg: 4 × sáv + 3 × köz.
     ------------------------------------------------------------------------ */
  @media (min-width: 1280px) {
    .team-grid:not(:has(.team-card__role)) {
      max-inline-size: calc(200% / 3 - var(--team-gap) / 3);
    }
  }

}