/* =====================================================================
 *  Vizualizator tip carte (revista școlii).
 *
 *  Două pagini alăturate, cu cotor la mijloc și o umbră care sugerează
 *  hârtia îndoită. Pe ecrane înguste rămâne o singură pagină — două ar
 *  fi ilizibile pe telefon.
 * ===================================================================*/

.carte {
  margin: 2rem 0;
  border-radius: var(--radius-lg, 16px);
  background: linear-gradient(180deg, #eef1f6, #e4e8f0);
  padding: 1.6rem 1.2rem 1.1rem;
  outline: none;
}

.carte:focus-visible {
  box-shadow: 0 0 0 3px var(--coral, #e8604c);
}

/* --------------------------------------------------------- Scena */

.carte__scena {
  display: grid;
  place-items: center;
  min-height: 340px;
  perspective: 1800px;      /* dă adâncime întoarcerii */
}

.carte__foaie {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 100%;
  filter: drop-shadow(0 14px 34px rgba(16, 30, 60, .28));
}

.carte__fata {
  background: #fff;
  overflow: hidden;
  line-height: 0;            /* fără spațiul de sub canvas */
  max-width: 50%;
}

.carte__foaie--singura .carte__fata { max-width: 100%; }

.carte__panza {
  display: block;
  width: 100%;
  height: auto;
  max-height: 74vh;
  object-fit: contain;
}

/* Cotorul: o umbră subțire pe muchia dinspre mijloc, ca la o carte
   deschisă. Pe pagina singură nu are ce căuta. */
.carte__fata--stanga {
  border-radius: 4px 0 0 4px;
  box-shadow: inset -14px 0 22px -14px rgba(20, 33, 61, .45);
}

.carte__fata--dreapta {
  border-radius: 0 4px 4px 0;
  box-shadow: inset 14px 0 22px -14px rgba(20, 33, 61, .45);
}

.carte__fata--singura { border-radius: 4px; }

/* --------------------------------------------------- Întoarcerea */

@keyframes carte-vine-dreapta {
  from { opacity: .35; transform: rotateY(-16deg) translateX(4%); transform-origin: left center; }
  to   { opacity: 1;   transform: none; }
}

@keyframes carte-vine-stanga {
  from { opacity: .35; transform: rotateY(16deg) translateX(-4%); transform-origin: right center; }
  to   { opacity: 1;   transform: none; }
}

.carte__foaie--vine-dreapta { animation: carte-vine-dreapta .34s var(--ease-out, ease) both; }
.carte__foaie--vine-stanga  { animation: carte-vine-stanga  .34s var(--ease-out, ease) both; }

/* ------------------------------------------------------- Bara */

.carte__bara {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}

.carte__btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border, #d9dee8);
  background: #fff;
  color: var(--navy, #14213d);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s var(--ease, ease), border-color .15s var(--ease, ease);
}

.carte__btn--mare { width: 46px; height: 46px; }

.carte__btn:hover:not(:disabled) {
  background: var(--navy, #14213d);
  border-color: var(--navy, #14213d);
  color: #fff;
}

.carte__btn:disabled { opacity: .35; cursor: default; }

.carte__btn:focus-visible {
  outline: 3px solid var(--coral, #e8604c);
  outline-offset: 2px;
}

.carte__pozitie {
  min-width: 190px;
  text-align: center;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text, #474c5c);
  padding: 0 .5rem;
}

/* ------------------------------------------- Așteptare și erori */

.carte__asteapta,
.carte__eroare {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 3.5rem 1rem;
  color: var(--muted, #667085);
  font-size: .92rem;
  text-align: center;
}

.carte__eroare { color: var(--danger, #b42318); }

.carte__spin {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border, #d9dee8);
  border-top-color: var(--navy, #14213d);
  border-radius: 50%;
  animation: carte-invarte .8s linear infinite;
}

@keyframes carte-invarte { to { transform: rotate(360deg); } }

/* ------------------------------------------------- Tot ecranul */

.carte:fullscreen {
  padding: 2rem;
  background: #11162a;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: center;
}

.carte:fullscreen .carte__panza { max-height: 84vh; }

.carte:fullscreen .carte__pozitie { color: rgba(255, 255, 255, .8); }

/* ------------------------------------------------------ Ecrane mici */

@media (max-width: 899px) {
  .carte { padding: 1rem .7rem .8rem; }
  .carte__scena { min-height: 260px; }
  .carte__panza { max-height: 68vh; }
  .carte__pozitie { min-width: 100%; order: 3; margin-top: .3rem; }
}

/* ------------------------------------------------------------ Respect */

@media (prefers-reduced-motion: reduce) {
  .carte__foaie--vine-dreapta,
  .carte__foaie--vine-stanga { animation: none; }
  .carte__spin { animation-duration: 2s; }
}

@media print {
  .carte__bara { display: none; }
  .carte { background: none; padding: 0; }
}