@charset "UTF-8";
/* =====================================================================
   Blocuri de conținut
   Școala Gimnazială „Mihai Drăgan” Bacău

   Lucrurile pe care le poate pune cineva într-o pagină din editor, fără
   să scrie HTML: casete colorate, pași numerotați, liste cu bifă, două
   coloane, imagine cu text alături, galerie mică.

   Fișierul ăsta se încarcă în două locuri — în site (unde conținutul stă
   în `.prose`) și în panou, peste zona de scriere a editorului. De aceea
   regulile sunt scrise pe clase, fără să depindă de locul în care stau:
   ce se vede în editor e ce se vede în pagină.

   Semnele caseteor sunt desenate aici, ca imagini de fundal. Așa, în
   conținutul salvat rămâne doar `<aside class="caseta caseta--info">`,
   curat, fără SVG-uri care ar putea fi scoase la curățarea HTML-ului.
   ===================================================================== */

/* ---------- Casete ------------------------------------------------- */

.caseta {
  position: relative;
  margin: 1.7rem 0;
  padding: 1.05rem 1.25rem 1.05rem 3.5rem;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: 14px;
  line-height: 1.65;
}

.caseta::before {
  content: '';
  position: absolute;
  left: 1.2rem;
  top: 1.15rem;
  width: 22px;
  height: 22px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.caseta > *:first-child { margin-top: 0; }
.caseta > *:last-child  { margin-bottom: 0; }

/* Titlul casetei: primul rând scris îngroșat */
.caseta strong { color: inherit; }

.caseta--info {
  background: #EEF3FB;
  border-color: #CCDBF2;
  border-left-color: #1B3C74;
  color: #1A2E52;
}
.caseta--info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3C74' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 11v5.4M12 7.6v.1'/%3E%3C/svg%3E");
}

.caseta--atentie {
  background: #FDF4E7;
  border-color: #F0DCB6;
  border-left-color: #B7791F;
  color: #5C4211;
}
.caseta--atentie::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B7791F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 21.4 19.8H2.6z'/%3E%3Cpath d='M12 9.6v4.2M12 17.1v.1'/%3E%3C/svg%3E");
}

.caseta--sfat {
  background: #F3F0FA;
  border-color: #DED6F3;
  border-left-color: #6B4FC0;
  color: #382A63;
}
.caseta--sfat::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B4FC0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 18.4h5.6M10 21.2h4'/%3E%3Cpath d='M12 2.8a6.4 6.4 0 0 0-3.7 11.6c.5.4.8 1 .8 1.6h5.8c0-.6.3-1.2.8-1.6A6.4 6.4 0 0 0 12 2.8z'/%3E%3C/svg%3E");
}

.caseta--succes {
  background: #EAF6EF;
  border-color: #C8E6D6;
  border-left-color: #1F8A5B;
  color: #14543A;
}
.caseta--succes::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F8A5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='m7.8 12.3 2.9 2.9 5.5-6'/%3E%3C/svg%3E");
}

/* Legăturile din casete își iau culoarea de la casetă, nu de la pagină */
.caseta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.caseta a:hover { opacity: .78; }

/* ---------- Pași numerotați ---------------------------------------- */

ol.pasi {
  counter-reset: pas;
  list-style: none;
  margin: 1.7rem 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}

ol.pasi > li {
  counter-increment: pas;
  position: relative;
  margin: 0;
  padding: .95rem 1.15rem .95rem 3.5rem;
  border: 1px solid #E3E7EE;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(23, 43, 77, .05);
}

ol.pasi > li::before {
  content: counter(pas);
  position: absolute;
  left: 1rem;
  top: .9rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #1B3C74 0%, #2A5199 55%, #35619E 100%);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
}

ol.pasi > li > *:first-child { margin-top: 0; }
ol.pasi > li > *:last-child  { margin-bottom: 0; }

/* ---------- Listă cu bifă ------------------------------------------ */

ul.lista-bifa {
  list-style: none;
  margin: 1.3rem 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

ul.lista-bifa > li {
  position: relative;
  margin: 0;
  padding-left: 2rem;
}

ul.lista-bifa > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .22em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #EAF6EF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F8A5B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9'/%3E%3C/svg%3E") center / .78rem no-repeat;
}

/* ---------- Două coloane ------------------------------------------- */

.coloane {
  display: grid;
  gap: 1.1rem 1.6rem;
  margin: 1.7rem 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.coloane > * { min-width: 0; }
.coloane > * > *:first-child { margin-top: 0; }
.coloane > * > *:last-child  { margin-bottom: 0; }

/* ---------- Imagine cu text alături -------------------------------- */

.media-text {
  display: grid;
  gap: 1.1rem 1.6rem;
  align-items: center;
  margin: 1.8rem 0;
}

.media-text > * { min-width: 0; }
.media-text figure { margin: 0; }
.media-text img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(23, 43, 77, .09);
}
.media-text > *:last-child > *:first-child { margin-top: 0; }
.media-text > *:last-child > *:last-child  { margin-bottom: 0; }

@media (min-width: 700px) {
  .media-text { grid-template-columns: 38% minmax(0, 1fr); }
  .media-text--dreapta { grid-template-columns: minmax(0, 1fr) 38%; }
  .media-text--dreapta figure { order: 2; }
}

/* ---------- Galerie mică ------------------------------------------- */

.galerie-bloc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .7rem;
  margin: 1.7rem 0;
}

.galerie-bloc img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}
.galerie-bloc a:hover img,
.galerie-bloc img:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(23, 43, 77, .16);
}

/* ---------- Text evidențiat cu marker ------------------------------ */

mark {
  background: #FFF0A6;
  color: inherit;
  padding: .05em .18em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Pozele adăugate în galerie una câte una vin fiecare în paragraful ei */
.galerie-bloc p { margin: 0; }

/* ---------- La tipărire -------------------------------------------- */

@media print {
  .caseta, ol.pasi > li { break-inside: avoid; box-shadow: none; }
  .coloane { grid-template-columns: 1fr 1fr; }
}