/* ===========================================================================
   AdventureNET — Cardurile de destinație, în relief
   ---------------------------------------------------------------------------
   Se încarcă DUPĂ `layout.css` și rescrie înfățișarea cardurilor din ecranul
   de după poartă (Platformă / Panou Utilizator / Administrare / Panou Gazdă)
   plus butoanele „Conectare cu parolă".

   DE CE UN FIȘIER SEPARAT
   Regulile vechi rămân neatinse, la locul lor. Dacă înfățișarea aceasta nu
   convinge, se scoate o singură linie din `index.html` și totul revine cum
   era. Un fișier de suprascriere se citește mai ușor decât o sută de linii
   modificate în mijlocul altui fișier.

   IDEEA
   Aceeași materie ca la portalurile de dedesubt: piele întunecată, muchie
   ridicată, rimă aurie, umbră proprie. Culoarea rolului nu dispare — rămâne
   în inima emblemei, în dâra de sus și în halou la hover, deci fiecare panou
   se recunoaște în continuare după culoarea lui. Ce se schimbă este suportul:
   dintr-un dreptunghi plat, într-un obiect cu volum.
   =========================================================================== */

/* Perspectiva stă pe rând, nu pe card: altfel fiecare card ar avea propriul
   punct de fugă și înclinarea ar arăta strâmb la capetele rândului. */
.destinatii-grila {
  perspective: 1100px;
}

/* --------------------------------------------------------------------- */
/*  Cardul                                                                */
/* --------------------------------------------------------------------- */

.destinatie {
  gap: 0.6rem;
  padding: 1.5rem 1.15rem 1.3rem;
  border: 0;
  border-radius: var(--rotunjire-mare, 20px);
  transform-style: preserve-3d;
  transform: rotateX(0deg) translateZ(0);

  background:
    linear-gradient(168deg, rgba(46, 60, 104, .55), rgba(10, 16, 36, .93) 62%),
    radial-gradient(120% 90% at 50% -10%,
                    color-mix(in srgb, var(--rol-culoare, #dcb45f) 26%, transparent),
                    transparent 60%);

  box-shadow:
    0 0 0 1px rgba(220, 180, 95, .30),
    0 1px 0 rgba(251, 238, 194, .22) inset,
    0 -12px 26px rgba(0, 0, 0, .46) inset,
    0 14px 26px rgba(6, 11, 24, .48);

  transition:
    transform var(--durata-scurta, 240ms) var(--usor, cubic-bezier(.22,1,.36,1)),
    box-shadow var(--durata-scurta, 240ms) var(--usor, cubic-bezier(.22,1,.36,1));
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .destinatie {
    background:
      linear-gradient(168deg, rgba(46, 60, 104, .55), rgba(10, 16, 36, .93) 62%),
      radial-gradient(120% 90% at 50% -10%, rgba(220, 180, 95, .22), transparent 60%);
  }
}

/* Dâra de sus rămâne, dar în aur peste culoarea rolului: leagă cardul de
   restul obiectelor din ecran fără să piardă identitatea panoului. */
.destinatie::before {
  top: 1px;
  left: 18%;
  right: 18%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent,
              var(--rol-culoare, #dcb45f) 30%, #fbeec2 50%,
              var(--rol-culoare, #dcb45f) 70%, transparent);
  opacity: .8;
}

/* Luciul care traversează fața. `.destinatie` are deja `overflow:hidden`,
   deci dâra se oprește la marginea rotunjită. */
.destinatie::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(102deg, transparent 34%, rgba(251, 238, 194, .15) 50%, transparent 66%);
  transform: translateX(-130%);
  transition: transform 760ms var(--usor, cubic-bezier(.22,1,.36,1));
}

.destinatie:hover::after,
.destinatie:focus-visible::after {
  transform: translateX(130%);
}

.destinatie:hover,
.destinatie:focus-visible {
  transform: rotateX(7deg) translateZ(18px);
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(220, 180, 95, .58),
    0 1px 0 rgba(251, 238, 194, .34) inset,
    0 -12px 26px rgba(0, 0, 0, .42) inset,
    0 28px 46px rgba(6, 11, 24, .6),
    0 0 42px color-mix(in srgb, var(--rol-culoare, #dcb45f) 26%, transparent);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .destinatie:hover,
  .destinatie:focus-visible {
    box-shadow:
      0 0 0 1px rgba(220, 180, 95, .58),
      0 1px 0 rgba(251, 238, 194, .34) inset,
      0 28px 46px rgba(6, 11, 24, .6);
  }
}

.destinatie:active { transform: rotateX(3deg) translateZ(6px); }

/* --------------------------------------------------------------------- */
/*  Emblema — un medalion, nu un pătrat colorat                           */
/* --------------------------------------------------------------------- */

.destinatie-icoana {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  transform: translateZ(30px);

  /* Discul: întuneric cu o lumină în colțul din stânga sus, ca pe o monedă */
  background:
    radial-gradient(circle at 32% 26%,
                    color-mix(in srgb, var(--rol-culoare, #4f7cff) 42%, #1a2444),
                    #141c33 62%, #0a1020);
  color: #fbeec2;

  box-shadow:
    0 10px 22px rgba(0, 0, 0, .55),
    0 1px 0 rgba(255, 255, 255, .16) inset,
    0 -7px 15px rgba(0, 0, 0, .5) inset,
    0 0 22px color-mix(in srgb, var(--rol-culoare, #4f7cff) 30%, transparent);

  transition: transform var(--durata-medie, 520ms) var(--usor, cubic-bezier(.22,1,.36,1));
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .destinatie-icoana {
    background: radial-gradient(circle at 32% 26%, #243157, #141c33 62%, #0a1020);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .16) inset;
  }
}

/* Rama aurie. Tăiem centrul cu o mască, altfel gradientul conic ar umple tot
   discul: `transform` pe părinte creează context de stivuire, deci un
   pseudo-element cu z-index negativ NU trece în spate. */
.destinatie-icoana::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #dcb45f, #fbeec2 25%, #93691f 55%, #eed597 80%, #dcb45f);
  opacity: .9;
  pointer-events: none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.2px));
}

/* Reflexia de sticlă peste disc */
.destinatie-icoana::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(200deg, rgba(255, 255, 255, .3), transparent 46%);
  pointer-events: none;
}

.destinatie-icoana svg {
  position: relative;
  width: 27px;
  height: 27px;
  stroke: #fbeec2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .75));
}

.destinatie:hover .destinatie-icoana,
.destinatie:focus-visible .destinatie-icoana {
  transform: translateZ(48px) scale(1.07) rotate(0deg);
}

/* --------------------------------------------------------------------- */
/*  Textul                                                                */
/* --------------------------------------------------------------------- */

.destinatie-titlu {
  transform: translateZ(20px);
  color: var(--aur-clar, #fbeec2);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .7);
}

.destinatie-descriere {
  transform: translateZ(14px);
  color: rgba(230, 222, 205, .62);
}

.destinatie-notita {
  transform: translateZ(14px);
  background: rgba(220, 180, 95, .13);
  box-shadow: 0 0 0 1px rgba(220, 180, 95, .26) inset;
  color: var(--aur-cald, #eed597);
}

.destinatie-stare {
  transform: translateZ(14px);
  color: var(--aur-cald, #eed597);
}

/* --------------------------------------------------------------------- */
/*  Butonul „Conectare cu parolă"                                         */
/* --------------------------------------------------------------------- */

.destinatie-parola {
  position: relative;
  overflow: hidden;
  min-height: 50px;
  gap: 0.6rem;
  border: 0;
  border-radius: 12px;
  color: var(--aur-clar, #fbeec2);

  background:
    linear-gradient(172deg, rgba(46, 60, 104, .5), rgba(10, 16, 36, .92) 66%),
    radial-gradient(120% 120% at 50% -20%,
                    color-mix(in srgb, var(--rol-culoare, #dcb45f) 22%, transparent),
                    transparent 62%);

  box-shadow:
    0 0 0 1px rgba(220, 180, 95, .26),
    0 1px 0 rgba(251, 238, 194, .18) inset,
    0 -6px 14px rgba(0, 0, 0, .4) inset,
    0 8px 16px rgba(6, 11, 24, .42);

  transition: transform .2s var(--usor, cubic-bezier(.22,1,.36,1)),
              box-shadow .2s var(--usor, cubic-bezier(.22,1,.36,1));
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .destinatie-parola {
    background: linear-gradient(172deg, rgba(46, 60, 104, .5), rgba(10, 16, 36, .92) 66%);
  }
}

.destinatie-parola:hover,
.destinatie-parola:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(220, 180, 95, .5),
    0 1px 0 rgba(251, 238, 194, .28) inset,
    0 -6px 14px rgba(0, 0, 0, .38) inset,
    0 14px 26px rgba(6, 11, 24, .52),
    0 0 30px color-mix(in srgb, var(--rol-culoare, #dcb45f) 22%, transparent);
}

.destinatie-parola:active { transform: translateY(1px); }

/* Lacătul: cheie aurie în relief, nu un contur subțire. */
.destinatie-parola .lacat {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .7));
  transition: transform .3s var(--usor, cubic-bezier(.22,1,.36,1));
}

.destinatie-parola:hover .lacat,
.destinatie-parola:focus-visible .lacat {
  transform: translateY(-1px) scale(1.08);
}

/* Sclipirea care traversează butonul */
.destinatie-parola::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(102deg, transparent 36%, rgba(251, 238, 194, .16) 50%, transparent 64%);
  transform: translateX(-130%);
  transition: transform 700ms var(--usor, cubic-bezier(.22,1,.36,1));
}

.destinatie-parola:hover::after,
.destinatie-parola:focus-visible::after {
  transform: translateX(130%);
}

/* --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .destinatie,
  .destinatie::after,
  .destinatie-icoana,
  .destinatie-parola,
  .destinatie-parola::after,
  .destinatie-parola .lacat { transition: none; }

  .destinatie:hover,
  .destinatie:focus-visible,
  .destinatie-parola:hover,
  .destinatie-parola:focus-visible { transform: none; }
}

/* ===========================================================================
   Bara de sus a ecranului cu destinații
   ---------------------------------------------------------------------------
   Rămăsese din paleta veche: butonul „Închide sesiunea" era roz-magenta, iar
   linia de sub bară trecea prin culori care nu se mai regăsesc nicăieri în
   ecran. Cartea de dedesubt nu se atinge — doar bara.
   =========================================================================== */

.destinatii-bara {
  background: linear-gradient(180deg, rgba(16, 26, 54, .92), rgba(8, 12, 26, .84));
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(4, 8, 18, .38);
}

/* Firul de lumină de sub bară, în aur */
.destinatii-bara::after {
  background: linear-gradient(90deg,
              transparent,
              rgba(220, 180, 95, .35) 22%,
              #fbeec2 50%,
              rgba(220, 180, 95, .35) 78%,
              transparent);
  background-size: 220% 100%;
  opacity: .8;
}

/* Butonul de ieșire: aceeași piele întunecată cu ramă aurie ca restul
   ecranului. Roșul rămâne doar la hover — este, până la urmă, o acțiune care
   închide sesiunea, iar avertizarea are rost abia când ești pe el. */
.destinatii-iesire {
  border: 0;
  border-radius: 12px;
  color: var(--aur-clar, #fbeec2);
  background: linear-gradient(172deg, rgba(46, 60, 104, .55), rgba(10, 16, 36, .9) 66%);
  box-shadow:
    0 0 0 1px rgba(220, 180, 95, .28),
    0 1px 0 rgba(251, 238, 194, .18) inset,
    0 6px 14px rgba(4, 8, 18, .4);
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}

.destinatii-iesire:hover,
.destinatii-iesire:focus-visible {
  transform: translateY(-1px);
  color: #ffd9d2;
  background: linear-gradient(172deg, rgba(104, 46, 60, .55), rgba(36, 10, 16, .9) 66%);
  box-shadow:
    0 0 0 1px rgba(243, 139, 127, .5),
    0 1px 0 rgba(255, 214, 208, .2) inset,
    0 12px 24px rgba(4, 8, 18, .5);
}

.destinatii-iesire svg { stroke: currentColor; }

/* Datele academice din stânga barei */
.destinatii-academic dt,
.destinatii-academic .eticheta { color: rgba(233, 237, 246, .55); }
.destinatii-academic dd,
.destinatii-academic .valoare { color: var(--aur-clar, #fbeec2); }