@charset "utf-8";
/* ==========================================================
   Chimie-bl.eu – meniul „tabel periodic” (11 coloane × 6 perioade)
   ========================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font:100%/1.3 "Century Gothic",Verdana,sans-serif;
  background:#6e6e6e url(imagini/bg.png) repeat;
  color:#1f2937;
  min-width:20em;
}
.wrap{max-width:1180px;margin:0 auto;padding:1.6rem 1rem 2rem}

/* ---------- tabelul ---------- */
.scroller{overflow-x:auto;padding:.4rem .2rem 1rem}
.pt{
  display:grid;
  grid-template-columns:1.8rem repeat(11, minmax(0,1fr));
  grid-template-rows:auto;
  grid-auto-rows:auto;
  gap:6px;
  min-width:560px;
}
.ghead,.phead{
  color:#fff;font-weight:700;font-size:.8rem;text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  align-self:end;
}
.phead{align-self:center;font-size:1rem}

/* căsuța unui element */
.cell{
  position:relative;aspect-ratio:1;
  border-radius:8px;
  border:2px solid rgba(0,0,0,.25);
  background:var(--bg,#fff);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-decoration:none;color:#1f2937;
  box-shadow:0 2px 5px rgba(0,0,0,.35);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cell .z{position:absolute;top:4px;left:6px;font-size:.7rem;font-weight:700;opacity:.75}
.cell .sym{font-size:clamp(1.1rem, 3.2vw, 2rem);font-weight:700;line-height:1}
.cell .nm{font-size:clamp(.5rem, 1.1vw, .72rem);margin-top:.25em;text-align:center;padding:0 3px;line-height:1.1}

/* familii (culori discrete, ca în manual) */
.f-alc{--bg:#ffd9d2}   /* metale alcaline */
.f-alp{--bg:#ffe8c7}   /* metale alcalino-pământoase */
.f-d  {--bg:#f3e2f7}   /* metale tranziționale */
.f-p  {--bg:#e3f1dc}   /* grupele III A – VI A */
.f-hal{--bg:#fff6bf}   /* halogeni */
.f-gaz{--bg:#d9ecff}   /* gaze rare */

/* căsuța cu link (secțiune a site-ului) */
.cell.link{
  background:#fff;
  border:3px solid var(--c);
  box-shadow:0 3px 10px rgba(0,0,0,.45), inset 0 0 0 2px #fff;
  justify-content:flex-start;padding:16% 4px 4px;
  cursor:pointer;
}
.cell.link .z{color:var(--c);opacity:1}
.cell.link .pic{flex:1;width:78%;min-height:0;background:center/contain no-repeat}
.cell.link .ttl{
  width:calc(100% + 8px);margin:3px -4px -4px;
  background:var(--c);color:#fff;
  font-size:clamp(.5rem, 1.15vw, .74rem);font-weight:700;text-align:center;line-height:1.1;
  padding:3px 2px;
}
.cell.link.light .ttl{color:#222}
.cell.link:hover,.cell.link:focus-visible,.cell.link.hl{
  transform:scale(1.12);z-index:2;outline:none;
  box-shadow:0 8px 22px rgba(0,0,0,.55);
}
.cell.link.soon{cursor:default}
.cell.link.soon .pic{filter:grayscale(1)}

/* animația de apariție */
.flip{animation:flip .5s ease both}
@keyframes flip{
  from{transform:perspective(500px) rotateY(90deg);opacity:0}
  to{transform:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){.flip{animation:none}}

/* ---------- panoul din golul tabelului ---------- */
.info{
  grid-column:4 / 9;grid-row:2 / 4;          /* golul de deasupra metalelor tranziționale */
  display:flex;align-items:center;gap:1rem;
  background:rgba(15,23,42,.88);color:#fff;
  border-radius:12px;padding:.6rem 1rem;
  box-shadow:0 3px 10px rgba(0,0,0,.45);
  min-width:0;
}
.info .logo{height:auto;width:34%;max-width:150px;aspect-ratio:1;border-radius:50%;background:#fff;object-fit:cover;flex:none}
.info-text{min-width:0}
.info-title{font-weight:700;font-size:clamp(.9rem, 2vw, 1.25rem);color:#ffd54a}
.info-sub{font-size:clamp(.7rem, 1.4vw, .9rem);margin:.2rem 0 .45rem;color:#e2e8f0}
.shuffle{
  font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;
  border:0;border-radius:2em;padding:.3em .9em;
  background:#ffd54a;color:#0f172a;
}
.shuffle:hover{background:#ffe27a}

/* ---------- lista secțiunilor ---------- */
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.6rem}
.chip{
  display:inline-flex;align-items:center;gap:.45em;
  background:var(--c);color:#fff;text-decoration:none;
  font-size:.82rem;font-weight:700;
  padding:.25em .7em .25em .3em;border-radius:2em;
  box-shadow:0 2px 5px rgba(0,0,0,.35);
}
.chip.light{color:#222}
.chip .mini{width:1.6em;height:1.6em;border-radius:50%;background:#fff center/80% no-repeat;flex:none}
.chip b{font-size:.72em;background:rgba(255,255,255,.85);color:#222;border-radius:1em;padding:.05em .45em}
.chip:hover{filter:brightness(1.08)}
.chip.soon{opacity:.75}

/* ---------- ecrane înguste ---------- */
@media (max-width:640px){
  .wrap{padding:1rem .5rem 1.5rem}
  .scroller{overflow:visible;padding:0}
  .pt{min-width:0;gap:3px;grid-template-columns:1rem repeat(11, minmax(0,1fr))}
  .ghead{font-size:.55rem}
  .phead{font-size:.7rem}
  .cell{border-radius:5px;border-width:1px}
  .cell .z,.cell .nm{display:none}
  .cell .sym{font-size:1rem}
  .cell.link{padding:3px;border-width:2px;justify-content:center}
  .cell.link .z,.cell.link .ttl{display:none}
  .cell.link .pic{width:100%}
  .info{gap:.4rem;padding:.3rem .5rem;border-radius:8px}
  .info{flex-direction:column;justify-content:center;text-align:center}
  .info .logo,.info-sub{display:none}
  .info-title{font-size:.8rem}
  .shuffle{font-size:.7rem;margin-top:.2rem}
}

/* ---------- fără JavaScript ---------- */
.fallback{list-style:none;max-width:24rem;margin:1rem auto;background:#fff;border-radius:1rem;padding:1rem 1.4rem}
.fallback li{margin:.4rem 0}
.fallback a{color:#1d4ed8;font-weight:700}

/* ==========================================================
   Varianta cu tabelul periodic complet (tabel-complet.html)
   ========================================================== */
.f-lan{--bg:#ffe0ef}   /* lantanide */
.f-act{--bg:#ffd6e6}   /* actinide */

.wrap:has(.pt.full){max-width:1320px}
.pt.full{
  grid-template-columns:1.6rem repeat(18, minmax(0,1fr));
  gap:4px;min-width:900px;
}
.pt.full .info{grid-column:4 / 14;grid-row:2 / 4}
.pt.full .ghead{font-size:.62rem}
.pt.full .cell{border-radius:5px;border-width:1px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.pt.full .cell .z{top:2px;left:4px;font-size:.55rem}
.pt.full .cell .sym{font-size:clamp(.85rem, 1.6vw, 1.35rem)}
.pt.full .cell .nm{font-size:clamp(.38rem, .62vw, .55rem);margin-top:.15em}
.pt.full .cell.ref .sym{font-size:clamp(.6rem, 1vw, .85rem)}
.pt.full .cell.link{padding:14% 2px 2px;border-width:2px}
.pt.full .cell.link .ttl{display:none}
.pt.full .cell.link .pic{width:92%}
.pt.full .cell.link:hover,.pt.full .cell.link:focus-visible,.pt.full .cell.link.hl{transform:scale(1.35)}
.pt.full .fhead{
  align-self:center;justify-self:end;padding-right:.4rem;
  color:#fff;font-weight:700;font-size:.75rem;text-shadow:0 1px 2px rgba(0,0,0,.7);
}
/* spațiu între tabel și rândurile de lantanide/actinide */
.pt.full::after{content:"";grid-column:1 / -1;grid-row:9;height:6px}
@media (max-width:640px){
  /* pe telefon, tabelul complet se derulează orizontal în interiorul paginii */
  .scroller:has(.pt.full){overflow-x:auto;padding-bottom:.6rem}
  .pt.full{min-width:780px}
  .pt.full .info{grid-column:4 / 14}
}