/* ===========================================================================
   AdventureNET — Pagina cărții pe ecrane mici
   ---------------------------------------------------------------------------
   Se încarcă ULTIMA, după `layout.css`, și corectează felul în care scena se
   așază pe telefon și pe tabletă. Desenul cărții nu se schimbă — doar
   încadrarea.

   CE NU MERGEA, măsurat pe 390×844:
   · titlul și cerul de deasupra ocupau ~450 px înainte de a se vedea ceva
     util, iar sub formular rămâneau alți ~350 px goi: conținutul stătea
     într-o bandă îngustă la mijloc, cu vid deasupra și dedesubt;
   · datele academice (student, profesor, facultate) erau aliniate la stânga
     pe un rând foarte îngust, deci se rupeau urât;
   · pe ecrane joase (640 px înălțime) trebuia derulat mult ca să ajungi la
     butonul de intrare.

   Ideea: pe ecran mic scena nu mai încearcă să fie un tablou cu cer deasupra,
   ci se strânge în jurul conținutului. Totul centrat, fără goluri.
   =========================================================================== */

@media (max-width: 900px) {

  /* Scena se strânge în jurul conținutului, fără înălțime impusă. */
  .scena-carte,
  .carte-scena {
    min-height: 0;
    padding-top: 0.75rem;
    padding-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Antetul: titlul rămâne, dar nu mai împinge cartea în jos. */
  .antet-scena {
    margin: 0 0 0.85rem;
    padding: 0;
  }

  .titlu-principal,
  .antet-scena h1 {
    font-size: clamp(1.6rem, 8vw, 2.3rem);
    margin: 0;
    line-height: 1.1;
  }

  /* Subtitlul de sub titlu ocupa un rând întreg fără să spună mult. */
  .antet-scena .subtitlu,
  .antet-scena p { margin: 0.25rem 0 0; font-size: 0.85rem; }

  /* Cele două pagini, una sub alta, lipite. */
  .carte-perspectiva { width: min(520px, 94vw); margin-inline: auto; }
  .pagina-stanga { margin-bottom: 0.75rem; }

  /* Conținutul din pagini, centrat pe verticală și pe orizontală. */
  .continut-pagina {
    padding: 1.1rem 1rem;
    text-align: center;
  }

  .continut-pagina > * { margin-inline: auto; }

  /* Datele academice: fiecare pe rândul ei, centrate, fără rupturi. */
  .date-academice {
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    text-align: center;
    margin-top: 0.5rem;
  }

  .date-academice > * {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    line-height: 1.4;
  }

  /* Formularul ocupă lățimea utilă, câmpurile sunt confortabile la atins. */
  .formular { width: 100%; max-width: 380px; margin-inline: auto; }
  .camp-cutie input { min-height: 46px; font-size: 16px; }  /* 16px = fără zoom pe iOS */
  .buton-intra { min-height: 50px; width: 100%; }

  /* Emblema din pagina formularului: mai mică, ca să rămână loc câmpurilor. */
  .emblema-platforma { margin-bottom: 0.7rem; }
  .emblema-cadru,
  .emblema-platforma-img { width: 88px; height: 88px; }

  /* Pana și ornamentele nu mai ies din cadru. */
  .pana { top: -26px; right: 4px; width: 62px; }
  .iedera { display: none; }

  /*
   * Plăcuța de subsol, centrată și strânsă.
   *
   * `position: relative`, nu `static`: `z-index: 20` (din `decor.css`) se
   * aplică DOAR elementelor poziționate. Cu `static`, pânza WebGL
   * (`position: absolute; z-index: 1`) acoperea complet subsolul pe telefon —
   * măsurat: `elementFromPoint` întorcea canvasul pe tot dreptunghiul
   * plăcuței, iar un contur roșu forțat pe element nu se vedea deloc.
   *
   * `left/right/bottom: auto` sunt obligatorii împreună cu `relative`: regula
   * de bază are `left: 50%` plus `transform: translateX(-50%)`. Poziționat și
   * cu `transform: none`, `left: 50%` redevenea activ fără compensare, iar
   * plăcuța sărea o jumătate de ecran spre dreapta și ieșea tăiată.
   */
  .placuta {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    margin: 1rem auto 0;
    text-align: center;
  }
}

/* Telefoane înguste și ecrane joase: și mai strâns. */
@media (max-width: 560px) {
  .antet-scena { margin-bottom: 0.6rem; }
  .continut-pagina { padding: 0.95rem 0.85rem; }
  .emblema-cadru,
  .emblema-platforma-img { width: 76px; height: 76px; }
  .date-academice { font-size: 0.76rem; }
}

@media (max-height: 700px) and (max-width: 900px) {
  .antet-scena { display: none; }          /* pe ecrane joase, titlul cedează locul */
  .emblema-platforma { margin-bottom: 0.45rem; }
  .emblema-cadru,
  .emblema-platforma-img { width: 64px; height: 64px; }
  .continut-pagina { padding: 0.8rem; }
}

/* ---------------------------------------------------------------------------
   Ecranul de destinații pe telefon
   Cardurile stau unul sub altul, iar bara de sus nu mai împinge harta afară.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .destinatii { padding-bottom: 1.5rem; }
  .destinatii-grila { grid-template-columns: 1fr; gap: 0.8rem; }
  .destinatie,
  .destinatie-grup { flex: 1 1 auto; width: 100%; max-width: 420px; margin-inline: auto; }
  .harta-traseu { display: none; }          /* traseul punctat nu are sens pe o coloană */
  .portaluri { grid-template-columns: 1fr; }
  .portal { max-width: 420px; margin-inline: auto; }

  .destinatii-bara {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
  }
  .destinatii-academic { font-size: 0.72rem; }
}