/**
 * Program tartalomoldal - a blogposzt (node--article) mintajara.
 * A .node--type-article .blog-post__* szabalyok tukre .node--type-program-ra,
 * plusz a Datum/Helyszin meta-blokk es a Helyszin-terkep blokk.
 * A zold pipa + "Ellenorzott szakember" az ellenorzott_szakember modulbol jon
 * (img.blog-card__author-image szelektor).
 * ASCII-only fajl.
 */

/* ---- Szerzo meta sor ---------------------------------------------------- */
.node--type-program .blog-post__author--rich {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .5rem;
}

.node--type-program .blog-post__avatar-link {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

.node--type-program img.blog-post__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.node--type-program .blog-post__author-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .15rem;
  min-width: 0;
}

.node--type-program .blog-post__author-name {
  color: inherit;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
}

.node--type-program .blog-post__author-name:hover {
  text-decoration: underline;
}

.node--type-program .blog-post__meta-line {
  color: #6b7280;
  font-size: .82rem;
  line-height: 1.3;
}

/* ---- Kep + cim ---------------------------------------------------------- */
.node--type-program .article-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.node--type-program .article-header h1 {
  margin-top: 1rem;
}

/* ---- Datum + Helyszin meta-blokk ---------------------------------------- */
.node--type-program .program-meta {
  margin: 1.1rem 0 1.35rem;
  padding: .9rem 1.1rem;
  background: #f6f9f6;
  border: 1px solid #e2e8ef;
  border-left: 4px solid #7cc576;
  border-radius: 8px;
}

.node--type-program .program-meta__row {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .15rem 0;
}

.node--type-program .program-meta__fa {
  flex: 0 0 auto;
  width: 1.1rem;
  text-align: center;
  color: #7cc576;
  font-size: 1rem;
  position: relative;
  top: .1rem;
}

.node--type-program .program-meta__label {
  font-weight: 700;
  color: #28313c;
}

.node--type-program .program-meta__value {
  color: #28313c;
}

/* ---- Cimkek chipek ------------------------------------------------------ */
.node--type-program .blog-post__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1.5rem;
  clear: both;
}

.node--type-program .blog-post__tags-label {
  font-weight: 600;
  margin-right: .2rem;
}

.node--type-program a.blog-post__tag {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: #e7f0f8;
  color: #33607f;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
}

.node--type-program a.blog-post__tag:hover {
  background: #d5e6f3;
  text-decoration: none;
}

/* ---- "Komment irasa" sor elvalasztasa (mint a blognal) ------------------ */
.node--type-program .blog-post__actions {
  clear: both;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #ececec;
  text-align: right;
}

.node--type-program .blog-post__actions ul.links {
  float: none !important;
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* ---- Helyszin terkep (inline, a Helyszin alatt - mint a profilnal) ------ */
.node--type-program .programok-helyszin-map {
  margin: 0 0 1.35rem;
  border-radius: 10px;
  overflow: hidden;
}

.node--type-program .programok-helyszin-map .leaflet-container {
  border-radius: 10px;
}

/* ---- Hozzaszolas szekcio - a blog (node--type-article) kinezete ---------- */
/* A blognal a comment-cim <h6> (pl. "Komment irasa"); a lista cime is nagybetus.
   Nagybetusen + nagyobban, mint a blognal. Az egyes hozzaszolasok cime (h3)
   valtozatlan marad. */
.node--type-program .article-comments h6,
.node--type-program .article-comments h2,
.node--type-program .article-comments .comments__title,
.node--type-program .article-comments .comment-form__title {
  text-transform: uppercase;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-top: 1.25rem;
}

/* ---- Profiloldal: Programok szekcio ------------------------------------ */
/* A szekcio a fooldali carousel blokkot jeleniti meg (programok_carousel),
   ezert a kartya-stilus a blog carousel + programok/carousel CSS-ebol jon.
   Itt csak a szekcio kornyezete. */
.profil-programok-tartalom {
  margin-top: .25rem;
}

/* ---- Tobb resztvevo a fejlecben (szerzo + elfogadott meghivottak) -------
   Tobb user eseten torhet a sor, hogy szuk helyen se csusszon szet.
   Az avatar/nev stilusat a fentebbi .blog-post__* szabalyok adjak, igy a
   resztvevok pontosan ugy neznek ki, mint a szerzo. */
.node--type-program .blog-post__author--rich {
  flex-wrap: wrap;
  row-gap: .5rem;
}

.node--type-program .blog-post__author--rich .blog-post__author-text {
  margin-right: .6rem;
}

/* ---- Bekuldo urlap: "Korabbi programjaim" KULON BLOKK a gomb ALATT -----
   A blog urlap "Korabbi blogposztjaim" dobozaval megegyezo megjelenes. */
.programok-korabbi {
  margin-top: 2rem;
  padding: 1.5rem 1.75rem;
  background: #f8f9fb;
  border: 1px solid #e8edf2;
  border-radius: 8px;
}

.programok-korabbi__cim {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  font-weight: 600;
}

.programok-korabbi__tabla {
  width: 100%;
  margin: 0;
}

.programok-korabbi__tabla th {
  font-weight: 600;
  text-align: left;
}

.programok-korabbi__tabla th,
.programok-korabbi__tabla td {
  padding: .75rem .9rem;
  vertical-align: middle;
}

/* Szerkesztes link a korabbi programok listajaban. */
a.programok-korabbi__szerkesztes {
  font-weight: 600;
  white-space: nowrap;
}

/* A Gin urlap-stilus flexbox-szal rendezi az urlapot, es a gombsort
   (.form-actions) order-rel az aljara teszi - ezert a lista a #weight ellenere
   is a gomb FOLE kerult. Nagyobb order-rel a lista a gomb ALA kerul.
   Ha az urlap nem flex, az order-nek nincs hatasa (a #weight dont). */
/* Magasabb specificitas + !important: a Gin scoped CSS (data-drupal-admin-styles)
   sajat order-szabalya kulonben felulirna. */
.programok-korabbi,
form[data-drupal-admin-styles] .programok-korabbi,
[data-drupal-admin-styles] .programok-korabbi {
  order: 9999 !important;
}

/* =========================================================================
 *  Elfogado resztvevok a cim alatt (a szerzo-sor alatt)
 *  ------------------------------------------------------------------------
 *  A markup azonos a szerzo soraval (.blog-post__author--rich), csak a
 *  fuggoleges tavolsag es a szerep-felirat szine ter el.
 * ====================================================================== */

.blog-post__author--resztvevo {
  margin-top: 0.6rem;
}

.blog-post__author--resztvevo .blog-post__meta-line {
  color: #2f7d39;
  font-weight: 600;
}

/* =========================================================================
 *  MOBIL: a "Korabbi programjaim" tabla kartyakra bomlik (append, 2026-07)
 *  ------------------------------------------------------------------------
 *  A .programok-korabbi__tabla tobb oszlopos (Cim / Allapot / Letrehozva /
 *  Muveletek). Keskeny kepernyon a datum es a hosszu cimek vizszintesen
 *  tullogatjak a tablat -- az oldal "szetcsuszik". Mobilon a sorok onallo
 *  kartyakka alakulnak, minden cella ele a sajat oszlopneve kerul.
 *
 *  A Drupal #type=>table fix fejlecet ad (Cim, Allapot, Letrehozva,
 *  Muveletek), ezert az oszlopneveket CSS-bol, az nth-child alapjan tesszuk
 *  ki -- nem kell hozza JS.
 *
 *  Toresponnt: 767.98px.
 * ====================================================================== */

@media (max-width: 767.98px) {

  .programok-korabbi {
    padding: 1.1rem 1rem;
  }

  .programok-korabbi__cim {
    font-size: 1.2rem;
  }

  .programok-korabbi__tabla,
  .programok-korabbi__tabla tbody {
    display: block;
    width: 100%;
  }

  .programok-korabbi__tabla thead {
    display: none;
  }

  .programok-korabbi__tabla tr {
    display: block;
    width: 100%;
    margin: 0 0 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
  }

  .programok-korabbi__tabla td {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .85rem;
    width: 100%;
    padding: .6rem .9rem;
    border: 0;
    border-top: 1px solid #eef2f7;
    text-align: left;
    word-break: break-word;
  }

  .programok-korabbi__tabla tr td:first-child {
    border-top: 0;
  }

  /* Oszlopnev a cella elott, a fix fejlecsorrend alapjan. */
  .programok-korabbi__tabla td::before {
    flex: 0 0 34%;
    max-width: 34%;
    color: #7a869a;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.35;
    word-break: break-word;
  }

  .programok-korabbi__tabla td:nth-child(1)::before { content: "C\00ed m"; }
  .programok-korabbi__tabla td:nth-child(2)::before { content: "\00c1 llapot"; }
  .programok-korabbi__tabla td:nth-child(3)::before { content: "L\00e9 trehozva"; }
  .programok-korabbi__tabla td:nth-child(4)::before { content: "M\0171 veletek"; }

  .programok-korabbi__tabla td > * {
    min-width: 0;
  }

  /* A cim cellaban a link tordeljen, ne loglaljon fix szelesseget. */
  .programok-korabbi__tabla td:nth-child(1) a {
    display: inline;
    word-break: break-word;
  }
}