/* ==========================================================
   PÄÄKORTTI
========================================================== */

.ukfv-book-hero {
  position: relative;
  overflow: hidden;

  margin: 30px 0 28px;
  padding: 38px 40px 30px;

  border: 1px solid rgba(129, 140, 248, 0.38);
  border-radius: 18px;

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(34, 211, 238, 0.11),
      transparent 38%
    ),
    radial-gradient(
      circle at 10% 0%,
      rgba(168, 85, 247, 0.11),
      transparent 42%
    ),
    linear-gradient(
      120deg,
      #211c3b 0%,
      #1b2740 58%,
      #142b3e 100%
    );

  color: #fff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 18px 45px rgba(0,0,0,0.18);
}


/* ==========================================================
   ESITTELY
========================================================== */

.ukfv-book-hero-intro {
  max-width: 900px;
  margin: 0 auto 30px;

  text-align: center;
}


.ukfv-book-hero-kicker {
  display: block;

  margin-bottom: 10px;

  color: #8ea2ff;

  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.11em;
}


.ukfv-book-hero-title {
  margin: 0 0 13px !important;

  color: #fff !important;

  font-size: 30px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}


.ukfv-book-hero-description {
  max-width: 850px;
  margin: 0 auto;

  color: rgba(255,255,255,0.76);

  font-size: 15px;
  line-height: 1.65;
}


/* ==========================================================
   LUKUTILASTOJEN KEHYS

   Desktop:
   4 yhtä leveää mittaria rinnakkain.
========================================================== */

.ukfv-book-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  margin-bottom: 12px;

  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;

  background: rgba(7,12,28,0.19);

  overflow: hidden;
}


/* ==========================================================
   YKSI TILASTO
========================================================== */

.ukfv-book-hero-stat {
  min-width: 0;
  min-height: 86px;

  padding: 16px 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;
}


.ukfv-book-hero-stat + .ukfv-book-hero-stat {
  border-left: 1px solid rgba(255,255,255,0.09);
}


/* ==========================================================
   ISO NUMERO
========================================================== */

.ukfv-book-hero-stat-value {
  flex: 0 0 auto;

  color: #61b1ff;

  font-size: 29px;
  line-height: 1;
  font-weight: 800;

  white-space: nowrap;
}


.ukfv-book-hero-stat-value small {
  font-size: 14px;
  font-weight: 700;
}


/* ==========================================================
   TILASTON TEKSTIT
========================================================== */

.ukfv-book-hero-stat-text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


.ukfv-book-hero-stat-title {
  color: #fff;

  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;

  white-space: nowrap;
}


.ukfv-book-hero-stat-period {
  color: rgba(255,255,255,0.45);

  font-size: 9px;
  line-height: 1.2;
  font-weight: 600;

  white-space: nowrap;
}


/* ==========================================================
   MINITRENDI

   VAIN tilaston nimen yhteydessä:

   lukijaa ↗
   aktiivista lukuaikaa ↗
   keskim. / lukija ↗
   lukua / lukija ↗

   JS lisää:
   .is-visible
   sekä --up / --flat / --down
========================================================== */

.ukfv-book-hero-trend {
  display: none;

  margin-left: 2px;

  font-size: 10px;
  line-height: 1;
  font-weight: 900;

  vertical-align: 1px;
}


.ukfv-book-hero-trend.is-visible {
  display: inline;
}


/* Nousu */

.ukfv-book-hero-trend--up {
  color: #55e6a5;
}


/* Vakaa */

.ukfv-book-hero-trend--flat {
  color: rgba(255,255,255,0.48);
}


/* Lasku */

.ukfv-book-hero-trend--down {
  color: #ff6b7a;
}


/* ==========================================================
   SUOSITUIMMAT LUVUT

   Ei nuolia.
   Koko laatikko toimii linkkinä.
========================================================== */

.ukfv-book-hero-popular-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  margin-bottom: 22px;

  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;

  background: rgba(7,12,28,0.19);

  overflow: hidden;
}


.ukfv-book-hero-popular {
  min-width: 0;
  min-height: 72px;

  padding: 14px 18px;

  display: flex;
  align-items: center;

  background: rgba(99,102,241,0.045);

  color: #fff !important;
  text-decoration: none !important;

  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}


.ukfv-book-hero-popular +
.ukfv-book-hero-popular {
  border-left: 1px solid rgba(255,255,255,0.09);
}


.ukfv-book-hero-popular:hover {
  background: rgba(99,102,241,0.15);

  box-shadow:
    inset 0 0 30px rgba(99,102,241,0.07);
}


.ukfv-book-hero-popular-text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 5px;
}


.ukfv-book-hero-popular-label {
  color: #8ea2ff;

  font-size: 9px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.1em;
}


.ukfv-book-hero-popular-title {
  color: #fff;

  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;

  word-break: normal;
  overflow-wrap: normal;
}


/* ==========================================================
   PÄÄ-CTA
========================================================== */

.ukfv-book-hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 11px;

  width: 100%;

  padding: 14px 18px;

  border: 1px solid rgba(129,140,248,0.75);
  border-radius: 11px;

  background:
    linear-gradient(
      100deg,
      rgba(99,102,241,0.63),
      rgba(124,58,237,0.50)
    );

  color: #fff !important;
  text-decoration: none !important;

  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 8px 22px rgba(0,0,0,0.18);

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.ukfv-book-hero-cta:hover {
  transform: translateY(-2px);

  border-color: #a5b4fc;

  background:
    linear-gradient(
      100deg,
      rgba(99,102,241,0.82),
      rgba(124,58,237,0.68)
    );

  box-shadow:
    0 10px 28px rgba(0,0,0,0.26),
    0 0 26px rgba(99,102,241,0.13);

  color: #fff !important;
}


.ukfv-book-hero-cta-arrow {
  font-size: 17px;

  transition: transform 0.2s ease;
}


.ukfv-book-hero-cta:hover
.ukfv-book-hero-cta-arrow {
  transform: translateX(5px);
}


/* ==========================================================
   TABLET

   Neljä mittaria säilyvät yhdellä rivillä, mutta niitä
   tiivistetään hieman.
========================================================== */

@media (max-width: 850px) {

  .ukfv-book-hero {
    padding: 30px 25px 25px;
  }


  .ukfv-book-hero-stat {
    padding-left: 5px;
    padding-right: 5px;

    gap: 6px;
  }


  .ukfv-book-hero-stat-value {
    font-size: 25px;
  }


  .ukfv-book-hero-stat-value small {
    font-size: 12px;
  }


  .ukfv-book-hero-stat-title {
    font-size: 9px;
  }

}


/* ==========================================================
   MOBILE
   ----------------------------------------------------------
   Neljä tilastoa näytetään 2 x 2 -ruudukkona.

   Näin uusi keskimääräinen lukuaika mahtuu selkeästi
   ilman että neljä mittaria puristetaan yhdelle riville.

   Suosituimmat luvut pinotaan edelleen allekkain.
========================================================== */

@media (max-width: 600px) {

  /* PÄÄKORTTI */

  .ukfv-book-hero {
    margin: 20px 0;

    padding: 23px 15px 18px;

    border-radius: 15px;
  }


  /* ESITTELY */

  .ukfv-book-hero-intro {
    margin-bottom: 21px;

    text-align: left;
  }


  .ukfv-book-hero-kicker {
    font-size: 10px;
  }


  .ukfv-book-hero-title {
    font-size: 22px !important;
  }


  .ukfv-book-hero-description {
    font-size: 13px;
    line-height: 1.58;
  }


  /* ========================================================
     4 TILASTOA – 2 x 2
  ======================================================== */

  .ukfv-book-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    margin-bottom: 10px;
  }


  .ukfv-book-hero-stat {
    min-width: 0;
    min-height: 82px;

    padding: 11px 5px;

    flex-direction: column;

    gap: 5px;

    text-align: center;
  }


  /*
   * Desktopin pystyerottimet nollataan ensin.
   * Sen jälkeen rakennetaan mobiilin 2 x 2 -ruudukko.
   */

  .ukfv-book-hero-stat + .ukfv-book-hero-stat {
    border-left: 0;
  }


  .ukfv-book-hero-stat:nth-child(even) {
    border-left: 1px solid rgba(255,255,255,0.09);
  }


  .ukfv-book-hero-stat:nth-child(n+3) {
    border-top: 1px solid rgba(255,255,255,0.09);
  }


  /* NUMERO */

  .ukfv-book-hero-stat-value {
    font-size: 23px;
  }


  .ukfv-book-hero-stat-value small {
    font-size: 11px;
  }


  /* TEKSTIT */

  .ukfv-book-hero-stat-text {
    width: 100%;
    min-width: 0;

    align-items: center;

    gap: 2px;
  }


  .ukfv-book-hero-stat-title {
    max-width: 100%;

    font-size: 9px;
    line-height: 1.15;

    white-space: normal;

    text-align: center;
  }


  .ukfv-book-hero-stat-period {
    font-size: 7px;
    line-height: 1.15;

    white-space: nowrap;
  }


  /* MINITRENDI */

  .ukfv-book-hero-trend {
    margin-left: 1px;

    font-size: 8px;

    vertical-align: 1px;
  }


  /* ========================================================
     SUOSITUIMMAT LUVUT ALLEKKAIN
  ======================================================== */

  .ukfv-book-hero-popular-grid {
    grid-template-columns: 1fr;

    margin-bottom: 15px;
  }


  .ukfv-book-hero-popular {
    min-height: 65px;

    padding: 12px 14px;
  }


  .ukfv-book-hero-popular +
  .ukfv-book-hero-popular {
    border-left: 0;

    border-top: 1px solid rgba(255,255,255,0.09);
  }


  .ukfv-book-hero-popular-label {
    font-size: 8px;
  }


  .ukfv-book-hero-popular-title {
    font-size: 12px;
    line-height: 1.3;

    word-break: normal;
    overflow-wrap: normal;
  }


  /* CTA */

  .ukfv-book-hero-cta {
    padding: 13px 12px;

    font-size: 13px;
  }

}


/* ==========================================================
   ERITTÄIN KAPEA MOBIILI
   ----------------------------------------------------------
   Pieni lisätiivistys vain alle 390 px näytöille.
========================================================== */

@media (max-width: 390px) {

  .ukfv-book-hero {
    padding-left: 14px;
    padding-right: 14px;
  }


  .ukfv-book-hero-stat {
    padding-left: 3px;
    padding-right: 3px;
  }


  .ukfv-book-hero-stat-value {
    font-size: 21px;
  }


  .ukfv-book-hero-stat-value small {
    font-size: 10px;
  }


  .ukfv-book-hero-stat-title {
    font-size: 8px;
  }


  .ukfv-book-hero-stat-period {
    font-size: 7px;
  }


  .ukfv-book-hero-trend {
    font-size: 8px;
  }

}
/* Status messages and accessible placeholders */
.ukfv-book-hero-stat-period{display:block}
.ukfv-book-hero-popular[aria-disabled="true"]{pointer-events:none;cursor:default;opacity:.78}
.ukfv-book-hero-stat-value small{font-size:.45em}
.ukfv-book-hero .ukfv-book-hero-trend:not(.is-visible){display:none}
@media (prefers-reduced-motion: reduce){.ukfv-book-hero *{transition:none!important}}
/* 0.1.3: accessible mobile labels; the legacy editor's 7 px captions are unreadable. */
@media (max-width: 600px) {
  .ukfv-book-hero-description { font-size: 14px; }
  .ukfv-book-hero-stat { min-height: 104px; padding: 13px 7px; }
  .ukfv-book-hero-stat-value { font-size: 26px; }
  .ukfv-book-hero-stat-title { font-size: 12px; line-height: 1.25; }
  .ukfv-book-hero-stat-period { font-size: 10px; line-height: 1.4; white-space: normal; }
  .ukfv-book-hero-popular-title { font-size: 14px; line-height: 1.4; }
  .ukfv-book-hero-popular-label { font-size: 10px; }
  .ukfv-book-hero-cta { font-size: 14px; }
}
@media (max-width: 390px) {
  .ukfv-book-hero-stat { min-height: 104px; }
  .ukfv-book-hero-stat-title { font-size: 11px; }
  .ukfv-book-hero-stat-period { font-size: 9px; }
}