/* Keep the portrait centred and lift the eyes above the hero heading.
   The existing zoom leaves enough image below to cover the upward shift. */
.libera-page .phero__bg.libera-portrait {
  inset: 0;
  overflow: hidden;
}
.libera-page .libera-portrait img {
  display: block;
  object-position: 50% 0;
  transform: translateY(-14%) scale(1.15);
  transform-origin: center top;
  animation: none;
  will-change: auto;
}
/* Concentrate the reading veil behind the copy instead of washing out
   the whole photograph. Let the existing curve define the lower edge. */
.libera-page .phero > .veil {
  background:
    radial-gradient(ellipse 56% 64% at 50% 43%,
      rgba(245, 242, 235, .72) 0%,
      rgba(245, 242, 235, .56) 52%,
      rgba(245, 242, 235, .18) 82%,
      rgba(245, 242, 235, .08) 100%),
    linear-gradient(to bottom,
      rgba(245, 242, 235, .28) 0%,
      rgba(245, 242, 235, .08) 30%,
      rgba(245, 242, 235, .08) 100%);
}
.libera-explore {
  display: inline-block;
  margin-top: 20px;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Keep the six lessons in order. Centre the subject in the cover's right half;
   a small zoom keeps the embedded titles outside the portrait frame. */
.libera-steps .libera-step {
  grid-template-columns: clamp(132px, 15vw, 180px) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 12px clamp(22px, 3vw, 40px);
}
.libera-step__media {
  position: relative;
  grid-row: 1 / 3;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
  background: var(--fu-cream-100);
}
.libera-step__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 84% top;
  transform: scale(1.14);
  transform-origin: center top;
}
/* The first cover includes a thin black line in its topmost pixels. */
.libera-step__media--trim img { top: -1px; }
/* This asset is already a centred portrait, without cover typography. */
.libera-step__media--portrait img {
  object-position: center top;
  transform: none;
}
.libera-step__heading {
  display: flex;
  align-items: baseline;
  gap: 18px;
  align-self: end;
}
.libera-step .step__n {
  flex-shrink: 0;
  margin: 0;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1;
  color: var(--fu-bloom-500);
}
.libera-step .libera-step__body {
  margin: 0;
  align-self: start;
}
/* Follow the lesson cards' spacing while keeping testimonials aligned
   with the full content width. Each row fits its own longest quote. */
.libera-page .testimonial-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: clamp(10px, 1.2vw, 16px);
}
.libera-page .testimonial-grid .quote--ba {
  min-width: 0;
  max-width: none;
  padding: clamp(18px, 2vw, 28px);
  border-radius: clamp(20px, 2.2vw, 30px);
}
.libera-page .testimonial-grid .ba-cmp { border-radius: 16px; }
@media (max-width: 1199px) {
  .libera-page .testimonial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .libera-page .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .libera-page .testimonial-grid { grid-template-columns: minmax(0, 1fr); }
  .libera-page .testimonial-grid .quote--ba {
    display: grid;
    grid-template-columns: clamp(132px, 30vw, 164px) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr auto;
    gap: 12px 18px;
  }
  .libera-page .testimonial-grid .ba-cmp {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
  }
  .libera-page .testimonial-grid figcaption {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  .libera-page .testimonial-grid .quote__label,
  .libera-page .testimonial-grid .quote__obs-label {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
    text-align: left;
  }
  .libera-page .testimonial-grid blockquote,
  .libera-page .testimonial-grid .quote__obs {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  /* Keep both language variants of the comparison buttons separated
     inside the compact portrait, without changing its 3:5 crop. */
  .libera-page .testimonial-grid .ba-cmp__lab {
    min-height: 32px;
    padding: 6px 7px;
    font-family: var(--fu-font-sans);
    letter-spacing: .08em;
  }
  .libera-page .testimonial-grid .ba-cmp__lab--prima { left: 6px; }
  .libera-page .testimonial-grid .ba-cmp__lab--dopo { right: 6px; }
}
@media (max-width: 600px) {
  .libera-steps .libera-step {
    grid-template-columns: 100px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 18px;
  }
  .libera-step__media { grid-row: auto; }
  .libera-step__heading {
    display: grid;
    gap: 10px;
    align-self: center;
  }
  .libera-step .libera-step__body { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .libera-page .fu-btn--lg { padding-inline: 16px; font-size: 14px; }
}