/*
 * Kutak časopisa. Vrijednosti prate sass/_colors.scss i _main.scss; kutak
 * se od ostatka portala razlikuje toplijim naglaskom (žuta, bež), a ne
 * novom tipografijom — ostaje prepoznatljivo kao isti portal.
 */

.casopis {
  padding: 28px 0 64px;
  --naglasak: #F7A823;
  --naglasak-tinta: #8a5c05;
  --podloga: #FFF5E2;
  --zaglavlje: #FFF5E2;
  /* Vesela pozadina trake: točkice i zvjezdice, u boji naglaska. */
  --uzorak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='%23ffffff' fill-opacity='.55'%3E%3Ccircle cx='18' cy='22' r='4.5'/%3E%3Ccircle cx='104' cy='14' r='3'/%3E%3Ccircle cx='66' cy='58' r='2.5'/%3E%3Ccircle cx='28' cy='96' r='3.5'/%3E%3Ccircle cx='118' cy='88' r='4'/%3E%3Ccircle cx='84' cy='120' r='2.5'/%3E%3Cpath d='M52 8l1.7 3.8L58 13.4l-3.4 3 .8 4.6-3.4-2.2-3.4 2.2.8-4.6-3.4-3 4.3-1.6z'/%3E%3Cpath d='M96 54l1.7 3.8 4.3 1.6-3.4 3 .8 4.6-3.4-2.2-3.4 2.2.8-4.6-3.4-3 4.3-1.6z'/%3E%3Cpath d='M14 60l1.7 3.8 4.3 1.6-3.4 3 .8 4.6L14 70.8l-3.4 2.2.8-4.6-3.4-3 4.3-1.6z'/%3E%3Cpath d='M60 100l1.7 3.8 4.3 1.6-3.4 3 .8 4.6-3.4-2.2-3.4 2.2.8-4.6-3.4-3 4.3-1.6z'/%3E%3C/g%3E%3C/svg%3E");
}

/* zaglavlje kutka */
.casopis-zaglavlje {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  background-color: var(--zaglavlje);
  background-image: var(--uzorak);
  border-radius: 12px;
  padding: 36px 40px;
  margin-bottom: 36px;
  overflow: hidden;
}
.casopis-zaglavlje > * { position: relative; }
.casopis-zaglavlje__tekst { flex-grow: 1; }
.casopis-zaglavlje__oznaka {
  display: inline-block;
  background: var(--naglasak);
  color: #212121;
  border-radius: 100px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 14px;
}
.casopis-naslov {
  margin: 0 0 10px;
  font-size: 46px;
  line-height: 52px;
  font-weight: 700;
  letter-spacing: -.6px;
}
.casopis-naslov--rubrika { font-size: 34px; line-height: 42px; }
.casopis-opis {
  margin: 0;
  font-family: 'PT Serif', serif;
  font-size: 17px;
  line-height: 27px;
  color: #666666;
  max-width: 62ch;
}

/* mjesto za pravi logotip/maskotu — dok ih nema, stoji obris knjige */
.casopis-zaglavlje__znak {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(138, 92, 5, 0.35);
  text-align: center;
}
.casopis-zaglavlje__znak-nota {
  font-size: 11px;
  line-height: 15px;
  max-width: 110px;
  color: rgba(138, 92, 5, 0.6);
}

/* rubrike */
.casopis-rubrike {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 44px;
}
.casopis-rubrika {
  display: block;
  border: 1px solid #EEEEEE;
  border-radius: 10px;
  padding: 22px;
  color: #212121;
  transition: .2s all;
  box-shadow: 0px 0px 1px rgba(48, 49, 51, 0.05), 0px 2px 4px rgba(48, 49, 51, 0.1);
}
.casopis-rubrika:hover {
  border-color: var(--naglasak);
  transform: translateY(-2px);
  color: #212121;
}
.casopis-rubrika__ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--podloga);
  color: var(--naglasak-tinta);
  margin-bottom: 14px;
}
.casopis-rubrika__naziv {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 5px;
}
.casopis-rubrika:hover .casopis-rubrika__naziv { color: #D22D36; }
.casopis-rubrika__opis {
  display: block;
  font-size: 13.5px;
  line-height: 21px;
  color: #666666;
  margin-bottom: 12px;
}
.casopis-rubrika__broj {
  display: block;
  font-size: 12.5px;
  color: #8b8b8b;
}

/* zaglavlje pojedine rubrike */
.casopis-rubrika-zaglavlje {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 3px solid var(--naglasak);
  margin-bottom: 32px;
}
.casopis-rubrika-zaglavlje__ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--podloga);
  color: var(--naglasak-tinta);
  flex-shrink: 0;
}

.casopis-odjeljak { margin-top: 8px; }
.casopis-odjeljak__naslov {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.casopis-odjeljak__naslov span {
  font-family: 'PT Serif', serif;
  font-size: 24px;
  font-weight: 700;
  color: #D22D36;
  white-space: nowrap;
}
.casopis-odjeljak__naslov:after {
  content: '';
  flex-grow: 1;
  border-top: 3px solid #D22D36;
}

/* objave */
.casopis-objave {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 26px;
}
.casopis-objava { display: block; color: #212121; }
.casopis-objava__slika {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: #EEEEEE;
  aspect-ratio: 3 / 2;
  margin-bottom: 12px;
}
.casopis-objava__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.casopis-objava__rubrika {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: var(--naglasak);
  color: #212121;
  border-radius: 100px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
}
.casopis-objava__naslov {
  display: block;
  font-size: 16px;
  line-height: 23px;
  font-weight: 700;
}
.casopis-objava:hover .casopis-objava__naslov { color: #D22D36; }
.casopis-objava__datum {
  display: block;
  font-size: 12.5px;
  color: #8b8b8b;
  margin-top: 6px;
}

/* prazna stanja */
.casopis-prazno {
  background: #FCFCFC;
  border: 1px dashed #DDDDDD;
  border-radius: 10px;
  padding: 28px 30px;
}
.casopis-prazno__naslov {
  font-family: 'PT Serif', serif;
  font-size: 17px;
  font-weight: 700;
  color: #212121;
  margin-bottom: 6px;
}
.casopis-prazno__opis {
  font-size: 14px;
  line-height: 22px;
  color: #666666;
  max-width: 68ch;
}

.casopis-ostale { margin-top: 44px; }
.casopis-ostale__naslov {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  color: #8b8b8b;
  margin-bottom: 12px;
}
.casopis-ostale__popis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 780px) {
  .casopis-zaglavlje {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 26px 22px;
  }
  .casopis-naslov { font-size: 32px; line-height: 38px; }
  .casopis-naslov--rubrika { font-size: 26px; line-height: 33px; }
  .casopis-rubrike { grid-template-columns: 1fr; }
}

/* Modra lasta: isti raspored, vlastiti naglasak */
/* Modra lasta: isti raspored, vlastita boja. Traka je brend-cijan jer
   logotip ima bijeli dio koji bi se na svijetloj podlozi izgubio. */
/* Smib je za 1-4. razred, pa traka nosi šarene konfete iz palete portala
   umjesto suzdržanih bijelih točkica. */
.casopis--smib {
  /* Bež je uz zasićeni cijan Modre laste izgledao kao bijelo, pa panel nije
     čitao kao panel. Nijansa dublje, i dalje mekano. */
  --zaglavlje: #FFEBC8;
  --uzorak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='24' cy='28' r='7' fill='%23F7A823' fill-opacity='.5'/%3E%3Ccircle cx='132' cy='18' r='5' fill='%2366bcd8' fill-opacity='.6'/%3E%3Ccircle cx='86' cy='74' r='4' fill='%23D22D36' fill-opacity='.35'/%3E%3Ccircle cx='40' cy='124' r='6' fill='%2340E0D0' fill-opacity='.55'/%3E%3Ccircle cx='150' cy='112' r='6.5' fill='%23F7A823' fill-opacity='.45'/%3E%3Ccircle cx='104' cy='150' r='4.5' fill='%2366bcd8' fill-opacity='.5'/%3E%3Cpath d='M64 12l2.2 4.9 5.4 2-4.3 3.8 1 5.8-4.3-2.7-4.3 2.7 1-5.8-4.3-3.8 5.4-2z' fill='%23D22D36' fill-opacity='.32'/%3E%3Cpath d='M124 62l2.2 4.9 5.4 2-4.3 3.8 1 5.8-4.3-2.7-4.3 2.7 1-5.8-4.3-3.8 5.4-2z' fill='%23F7A823' fill-opacity='.55'/%3E%3Cpath d='M16 76l2.2 4.9 5.4 2-4.3 3.8 1 5.8L16 89.8l-4.3 2.7 1-5.8-4.3-3.8 5.4-2z' fill='%2340E0D0' fill-opacity='.5'/%3E%3Cpath d='M78 120l2.2 4.9 5.4 2-4.3 3.8 1 5.8-4.3-2.7-4.3 2.7 1-5.8-4.3-3.8 5.4-2z' fill='%2366bcd8' fill-opacity='.5'/%3E%3Cpath d='M148 44c4-5 9-5 13 0' stroke='%23D22D36' stroke-opacity='.3' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M8 146c4-5 9-5 13 0' stroke='%23F7A823' stroke-opacity='.5' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M96 36c4-5 9-5 13 0' stroke='%2340E0D0' stroke-opacity='.5' stroke-width='2.6' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}

.casopis--modra-lasta {
  --naglasak: #29BEEF;
  --naglasak-tinta: #12556b;
  --podloga: #E4F5FC;
  --zaglavlje: #29BEEF;
}
.casopis--modra-lasta .casopis-zaglavlje__oznaka {
  background: #ffffff;
  color: #12556b;
}
.casopis--modra-lasta .casopis-opis { color: #0f3d4d; }

/* Ilustracija Lastana ima bijelu, ne prozirnu pozadinu — zato stoji na
   bijeloj pločici, da se šav ne vidi na cijan traci. */
.casopis-zaglavlje__maskota {
  flex-shrink: 0;
  align-self: flex-end;
  background: #ffffff;
  border-radius: 14px 14px 0 0;
  padding: 10px 12px 0;
  margin-bottom: -36px;
  box-shadow: 0 6px 18px rgba(15, 61, 77, 0.18);
}
.casopis-zaglavlje__maskota img {
  display: block;
  width: auto;
  height: 168px;
}

.casopis-naslov--logo { margin-bottom: 14px; }
.casopis-naslov--logo img {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
}

.casopis-zaglavlje__naslovnica--lepeza img {
  width: 300px;
  border-radius: 0;
  transform: none;
  box-shadow: none;
  filter: drop-shadow(0 10px 22px rgba(20, 20, 19, 0.22));
}

/* naslovnica u zaglavlju */
.casopis-zaglavlje__naslovnica {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.casopis-zaglavlje__naslovnica img {
  display: block;
  width: 190px;
  height: auto;
  border-radius: 6px;
  transform: rotate(-3deg);
  box-shadow: 0 10px 28px rgba(20, 20, 19, 0.22), 0 2px 6px rgba(20, 20, 19, 0.12);
}
.casopis-zaglavlje__nota {
  font-size: 11.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--naglasak-tinta);
  opacity: .75;
}

@media (max-width: 780px) {
  .casopis-zaglavlje__naslovnica { align-self: center; }
  .casopis-zaglavlje__naslovnica img { width: 150px; }
  .casopis-zaglavlje__maskota { display: none; }
}

/* CTA za pretplatu. Portalna crvena, a ne boja kutka — na bež i na cijan
   traci jednako iskače, i ista je boja kao ostale glavne akcije na portalu. */
.casopis-pretplata {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  background: #D22D36;
  color: #ffffff;
  border-radius: 100px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: 0 6px 20px rgba(210, 45, 54, 0.35);
  transition: .2s all;
}
.casopis-pretplata:hover {
  background: #212121;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(33, 33, 33, 0.32);
  transform: translateY(-1px);
}
.casopis-pretplata svg { flex-shrink: 0; transition: transform .2s; }
.casopis-pretplata:hover svg { transform: translateX(3px); }

@media (max-width: 780px) {
  .casopis-pretplata {
    width: 100%;
    justify-content: center;
    padding: 15px 20px;
  }
}

/* -------------------------------------------------------------------------
 * Widget "Časopisi" na naslovnici
 *
 * Namjerno drukčije od kartica: dva široka obojena panela, svaki u boji
 * svog kutka. Boje i uzorak dolaze iz .casopis--<slug> definicija gore.
 * ---------------------------------------------------------------------- */

.casopisi-paneli {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.casopis-panel {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 28px;
  border-radius: 12px;
  background-color: var(--zaglavlje);
  background-image: var(--uzorak);
  overflow: hidden;
  position: relative;
}
.casopis-panel > * { position: relative; }

.casopis-panel__slika {
  flex-shrink: 0;
  display: block;
}
.casopis-panel__slika img {
  display: block;
  width: 128px;
  height: auto;
  border-radius: 5px;
  transform: rotate(-3deg);
  box-shadow: 0 8px 22px rgba(20, 20, 19, 0.24), 0 2px 5px rgba(20, 20, 19, 0.12);
  transition: transform .25s;
}
.casopis-panel__slika:hover img { transform: rotate(-3deg) translateY(-3px); }

.casopis-panel__tekst {
  flex-grow: 1;
  min-width: 0;
}
.casopis-panel__razred {
  display: inline-block;
  background: var(--naglasak);
  color: #212121;
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 10px;
}
.casopis-panel__naslov {
  display: block;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: #212121;
  margin-bottom: 12px;
}
.casopis-panel__naslov img {
  display: block;
  width: auto;
  max-width: 190px;
  height: auto;
}
.casopis-panel__naslov:hover { color: #D22D36; }

.casopis-panel__rubrike {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.casopis-panel__rubrike a {
  background: rgba(255, 255, 255, 0.78);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #444444;
  transition: .2s all;
}
.casopis-panel__rubrike a:hover { background: #ffffff; color: #D22D36; }

.casopis-panel__akcije {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.casopis-panel__kutak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #D22D36;
  color: #ffffff;
  border-radius: 100px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  transition: .2s all;
}
.casopis-panel__kutak:hover { background: #212121; color: #ffffff; }
.casopis-panel__kutak svg { transition: transform .2s; }
.casopis-panel__kutak:hover svg { transform: translateX(3px); }
.casopis-panel__pretplata {
  font-size: 13px;
  font-weight: 600;
  color: var(--naglasak-tinta);
  text-decoration: underline;
}
.casopis-panel__pretplata:hover { color: #D22D36; }

@media (max-width: 1000px) {
  .casopisi-paneli { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .casopis-panel { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 20px; }
  .casopis-panel__slika img { width: 104px; }
  .casopis-panel__naslov { font-size: 25px; line-height: 31px; }
}

/* najnovija objava u panelu časopisa */
.casopis-panel__zadnja {
  display: block;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  padding: 11px 14px;
  margin-bottom: 14px;
  color: #212121;
  transition: .2s all;
}
.casopis-panel__zadnja:hover { background: #ffffff; }
.casopis-panel__zadnja-oznaka {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--naglasak-tinta);
  margin-bottom: 3px;
}
.casopis-panel__zadnja-naslov {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.casopis-panel__zadnja:hover .casopis-panel__zadnja-naslov { color: #D22D36; }
.casopis-panel__zadnja-datum {
  display: block;
  font-size: 12px;
  color: #666666;
  margin-top: 3px;
}

/* blok iz webshopa na dnu kutka */
.casopis-shop { margin-top: 48px; }