/* ==========================================================================
   G-LOG · Komponens könyvtár · v1.0
   Előfeltétel: tokens.css (+ fonts.css). Minden szín tokenből jön, ezért a
   komponensek világos és sötét szekcióban is helyesen jelennek meg.
   Osztály-prefix: .gl-
   ========================================================================== */

/* ---- Alap tipográfiai szerepek ------------------------------------------ */
.gl-display, .gl-h1, .gl-h2, .gl-h3, .gl-h4, .gl-h5 {
  font-family: var(--gl-font-display);
  color: var(--gl-heading);
  margin: 0;
  text-wrap: balance;
}
.gl-display { font-size: var(--gl-fs-display); font-weight: var(--gl-fw-bold); line-height: var(--gl-lh-tight); letter-spacing: var(--gl-ls-display); }
.gl-h1      { font-size: var(--gl-fs-h1);      font-weight: var(--gl-fw-bold); line-height: var(--gl-lh-tight); letter-spacing: var(--gl-ls-display); }
.gl-h2      { font-size: var(--gl-fs-h2);      font-weight: var(--gl-fw-bold); line-height: var(--gl-lh-snug);  letter-spacing: var(--gl-ls-heading); }
.gl-h3      { font-size: var(--gl-fs-h3);      font-weight: var(--gl-fw-semibold); line-height: var(--gl-lh-snug); letter-spacing: var(--gl-ls-heading); }
.gl-h4      { font-size: var(--gl-fs-h4);      font-weight: var(--gl-fw-semibold); line-height: var(--gl-lh-heading); }
.gl-h5      { font-size: var(--gl-fs-h5);      font-weight: var(--gl-fw-semibold); line-height: var(--gl-lh-heading); }

.gl-lead      { font-family: var(--gl-font-body); font-size: var(--gl-fs-h5); font-weight: var(--gl-fw-medium); line-height: var(--gl-lh-heading); color: var(--gl-text); margin: 0; }
.gl-body      { font-family: var(--gl-font-body); font-size: var(--gl-fs-body); font-weight: var(--gl-fw-regular); line-height: var(--gl-lh-body); color: var(--gl-text-2); margin: 0; }
.gl-small     { font-family: var(--gl-font-body); font-size: var(--gl-fs-small); line-height: var(--gl-lh-small); color: var(--gl-text-2); margin: 0; }
.gl-caption   { font-family: var(--gl-font-ui);   font-size: var(--gl-fs-caption); line-height: var(--gl-lh-small); color: var(--gl-text-3); margin: 0; }
.gl-highlight { font-family: var(--gl-font-display); font-size: var(--gl-fs-h5); font-weight: var(--gl-fw-semibold); line-height: var(--gl-lh-heading); color: var(--gl-accent-text); margin: 0; text-wrap: pretty; }
.gl-label     { font-family: var(--gl-font-ui); font-size: var(--gl-fs-small); font-weight: var(--gl-fw-medium); letter-spacing: var(--gl-ls-label); text-transform: uppercase; color: var(--gl-text-3); margin: 0; }

/* ---- Szekció cím korall csíkkal ----------------------------------------- */
.gl-heading {
  position: relative;
  padding-left: calc(var(--gl-space-4) - 3px);
}
.gl-heading::before {
  content: "";
  position: absolute;
  left: 0; top: .08em; bottom: .08em;
  width: 3px;
  background: var(--gl-accent);
}

/* ---- Szekció címke (pill) ----------------------------------------------- */
.gl-tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--gl-space-3);
  border-radius: var(--gl-radius);
  background: var(--gl-tag-bg);
  color: var(--gl-tag-text);
  font-family: var(--gl-font-ui);
  font-size: .75rem;
  font-weight: var(--gl-fw-medium);
  letter-spacing: var(--gl-ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- Gombok -------------------------------------------------------------- */
.gl-btn {
  --_bg: var(--gl-btn-bg);
  --_fg: var(--gl-btn-text);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gl-space-3);
  height: var(--gl-btn-h);
  padding: 0 var(--gl-space-6);
  border: 1px solid var(--_bd);
  border-radius: var(--gl-radius);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--gl-font-ui);
  font-size: 1rem;
  font-weight: var(--gl-fw-medium);
  letter-spacing: var(--gl-ls-ui);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--gl-dur) var(--gl-ease), color var(--gl-dur) var(--gl-ease), border-color var(--gl-dur) var(--gl-ease), transform var(--gl-dur-fast) var(--gl-ease);
}
.gl-btn svg { width: 20px; height: 17px; flex: none; transition: transform var(--gl-dur) var(--gl-ease); }
.gl-btn:hover,  .gl-btn.is-hover   { --_bg: var(--gl-btn-hover-bg);   --_fg: var(--gl-btn-hover-text);   --_bd: transparent; }
.gl-btn:hover svg, .gl-btn.is-hover svg { transform: translateX(3px); }
.gl-btn:active, .gl-btn.is-pressed { --_bg: var(--gl-btn-pressed-bg); --_fg: var(--gl-btn-pressed-text); --_bd: transparent; transform: translateY(1px); }
.gl-btn:disabled, .gl-btn[aria-disabled="true"], .gl-btn.is-disabled {
  --_bg: var(--gl-btn-disabled-bg); --_fg: var(--gl-btn-disabled-text); --_bd: transparent;
  cursor: not-allowed; transform: none;
}
.gl-btn:disabled svg, .gl-btn.is-disabled svg { transform: none; }
.gl-btn:focus-visible { outline: none; box-shadow: var(--gl-focus); }

/* Secondary: körvonalas */
.gl-btn--secondary { --_bg: transparent; --_fg: var(--gl-btn-outline-text); --_bd: var(--gl-btn-outline); }

/* Méret */
.gl-btn--lg { height: var(--gl-btn-h-lg); padding: 0 var(--gl-space-7); font-size: 1.0625rem; }

/* Ikon gomb (kártya nyíl): 64×40, pill */
.gl-btn--icon {
  width: 64px; padding: 0;
  background: var(--gl-fog-150);
  color: var(--gl-slate-700);
}
.gl-btn--icon svg { width: 18px; height: 15px; }

/* ---- Szöveges gomb (Szekció gomb) --------------------------------------- */
.gl-textlink {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--gl-textlink);
  font-family: var(--gl-font-ui);
  font-size: 1rem;
  font-weight: var(--gl-fw-medium);
  letter-spacing: var(--gl-ls-ui);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  background: none; border: 0; padding: 0;
  transition: color var(--gl-dur) var(--gl-ease), gap var(--gl-dur) var(--gl-ease);
}
.gl-textlink svg {
  width: 0; height: 16px; flex: none; opacity: 0;
  color: var(--gl-accent);
  transition: width var(--gl-dur) var(--gl-ease), opacity var(--gl-dur) var(--gl-ease);
}
.gl-textlink:hover, .gl-textlink.is-hover { color: var(--gl-textlink-hover); }
.gl-textlink:active, .gl-textlink.is-pressed { color: var(--gl-textlink-pressed); gap: var(--gl-space-2); }
.gl-textlink:active svg, .gl-textlink.is-pressed svg { width: 20px; opacity: 1; }
.gl-textlink:disabled, .gl-textlink.is-disabled { color: var(--gl-textlink-disabled); gap: var(--gl-space-2); cursor: not-allowed; }
.gl-textlink:disabled svg, .gl-textlink.is-disabled svg { width: 20px; opacity: 1; color: var(--gl-textlink-disabled); }
.gl-textlink:focus-visible { outline: none; box-shadow: var(--gl-focus); border-radius: 4px; }

/* ---- Menü link ------------------------------------------------------------ */
.gl-navlink {
  color: var(--gl-navlink);
  font-family: var(--gl-font-ui);
  font-size: .875rem;
  font-weight: var(--gl-fw-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--gl-navlink-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color var(--gl-dur) var(--gl-ease), text-decoration-color var(--gl-dur) var(--gl-ease);
}
.gl-navlink:hover, .gl-navlink.is-hover, .gl-navlink[aria-current="page"] {
  color: var(--gl-navlink-hover);
  text-decoration-color: var(--gl-navlink-hover-line);
}
.gl-navlink:focus-visible { outline: none; box-shadow: var(--gl-focus); border-radius: 4px; }

/* ---- Header (üveg pill) --------------------------------------------------- */
.gl-header {
  display: flex;
  align-items: center;
  gap: var(--gl-space-3);
}
.gl-header__bar {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  gap: var(--gl-space-7);
  height: var(--gl-control-h);
  padding: 0 var(--gl-space-7);
  border-radius: var(--gl-radius);
  background: var(--gl-menu-50);
  -webkit-backdrop-filter: blur(var(--gl-blur));
  backdrop-filter: blur(var(--gl-blur));
  overflow-x: auto;
  scrollbar-width: none;
}
.gl-header__bar::-webkit-scrollbar { display: none; }

/* ---- Menü ikon ------------------------------------------------------------ */
.gl-menu-btn {
  --_bg: var(--gl-menu-50);
  display: inline-grid;
  place-items: center;
  width: var(--gl-control-h);
  height: var(--gl-control-h);
  padding: 0; border: 0;
  border-radius: var(--gl-radius);
  background: var(--_bg);
  color: var(--gl-fog-200);
  -webkit-backdrop-filter: blur(var(--gl-blur));
  backdrop-filter: blur(var(--gl-blur));
  cursor: pointer;
  transition: background-color var(--gl-dur) var(--gl-ease);
}
.gl-menu-btn:hover, .gl-menu-btn.is-hover { --_bg: var(--gl-menu-80); }
.gl-menu-btn[aria-expanded="true"] { --_bg: var(--gl-menu-100); }
.gl-menu-btn[aria-expanded="true"]:hover, .gl-menu-btn[aria-expanded="true"].is-hover { --_bg: var(--gl-menu-80); }
.gl-menu-btn:focus-visible { outline: none; box-shadow: var(--gl-focus); }
.gl-menu-btn__lines { width: 24px; height: 12px; position: relative; }
.gl-menu-btn__lines::before, .gl-menu-btn__lines::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--gl-dur) var(--gl-ease), opacity var(--gl-dur) var(--gl-ease);
}
.gl-menu-btn__lines::before { top: 0; }
.gl-menu-btn__lines::after  { bottom: 0; }
.gl-menu-btn[aria-expanded="true"] .gl-menu-btn__lines::before { transform: translateY(4.5px); }
.gl-menu-btn[aria-expanded="true"] .gl-menu-btn__lines::after  { transform: translateY(-4.5px); }

/* ---- Kártya (fotó + üveg panel) ------------------------------------------- */
.gl-card {
  position: relative;
  display: block;
  aspect-ratio: 5 / 6;
  border-radius: var(--gl-radius-outer);
  overflow: hidden;
  background: var(--gl-navy-800);
  color: var(--gl-on-media);
  text-decoration: none;
  isolation: isolate;
  box-shadow: var(--gl-shadow-card);
}
.gl-card__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--gl-dur-slow) var(--gl-ease);
}
.gl-card:hover .gl-card__media { transform: scale(1.03); }
.gl-card__action {
  position: absolute;
  top: var(--gl-inset); right: var(--gl-inset);
}
.gl-card__panel {
  position: absolute;
  left: var(--gl-inset); right: var(--gl-inset); bottom: var(--gl-inset);
  padding: var(--gl-space-5);
  border-radius: var(--gl-radius);
  background: var(--gl-glass-10);
  -webkit-backdrop-filter: blur(var(--gl-blur));
  backdrop-filter: blur(var(--gl-blur));
  display: grid;
  gap: var(--gl-space-6);
}
.gl-card__panel--strong { background: var(--gl-glass-30); }
.gl-card__eyebrow {
  font-family: var(--gl-font-ui);
  font-size: .75rem;
  font-weight: var(--gl-fw-medium);
  color: var(--gl-on-media);
  margin: 0;
}
.gl-card__title {
  font-family: var(--gl-font-display);
  font-size: var(--gl-fs-h5);
  font-weight: var(--gl-fw-semibold);
  line-height: var(--gl-lh-heading);
  color: var(--gl-on-media-2);
  margin: 0;
  text-wrap: pretty;
}
.gl-card__panel--strong .gl-card__title { color: var(--gl-on-media); }

/* ---- Szekció -------------------------------------------------------------- */
.gl-section {
  background: var(--gl-bg);
  color: var(--gl-text);
  padding-block: var(--gl-section-y);
  padding-inline: var(--gl-gutter);
}
.gl-section--alt      { background: var(--gl-bg-alt); }
.gl-section--elevated { background: var(--gl-bg-elevated); }
.gl-container {
  max-width: var(--gl-container);
  margin-inline: auto;
}
.gl-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gl-space-5); align-content: start; }
.gl-stack > .gl-tag { justify-self: start; }
.gl-actions { display: flex; flex-wrap: wrap; gap: var(--gl-space-3); align-items: center; }
.gl-measure { max-width: 62ch; }

/* ---- Csökkentett mozgás --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gl-btn, .gl-btn svg, .gl-textlink, .gl-textlink svg, .gl-navlink, .gl-menu-btn, .gl-menu-btn__lines::before, .gl-menu-btn__lines::after, .gl-card__media {
    transition-duration: .01ms;
  }
  .gl-card:hover .gl-card__media { transform: none; }
}