/* ASTROLINIA / ASTROLOGY — scoped HERO carousel, never loaded in other departments. */
.section-astrology .astro-hero-carousel {
  position: relative;
  isolation: isolate;
  width: 100%;
  background: #fff7f0;
  border-bottom: 1px solid #f0d7c0;
  color: #35173f;
}
.section-astrology .astro-hero-carousel__stage { position: relative; }
.section-astrology .astro-hero-slide {
  display: block;
  position: relative;
  min-height: clamp(460px, 34vw, 540px);
  overflow: hidden;
  background: radial-gradient(circle at 14% 5%,#fff 5%,transparent 52%),
    linear-gradient(100deg,#fffaf4 20%,#fff1e7 57%,#ead9d3);
}
.section-astrology .astro-hero-slide[hidden] { display: none !important; }
.section-astrology .astro-hero-slide__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 59%;
  background: linear-gradient(135deg,#cfb29b,#4f364c);
  overflow: hidden;
}
.section-astrology .astro-hero-slide__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04);
}
.section-astrology .astro-hero-slide__media-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,#fff9f3 0%,rgba(255,248,243,.94) 5%,
    rgba(255,248,243,.62) 21%,rgba(255,248,243,.03) 58%),
    linear-gradient(0deg,rgba(55,24,52,.32),transparent 40%);
  pointer-events: none;
}
.section-astrology .astro-hero-slide__inner {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 2;
  min-height: clamp(460px, 34vw, 540px);
  padding-block: 43px 56px;
  pointer-events: none;
}
.section-astrology .astro-hero-slide__copy {
  width: min(52%, 660px);
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.section-astrology .astro-hero-slide__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
  color: var(--ast-plum);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .105em;
  text-transform: uppercase;
}
.section-astrology .astro-hero-slide__eyebrow-sparkle {
  color: var(--ast-gold);
  font-size: 18px;
  line-height: 1;
  margin-left: 5px;
  flex-shrink: 0;
}
.section-astrology .astro-hero-slide__title {
  margin: 0 0 7px;
  max-width: 700px;
  color: var(--ast-plum-dark,#45143b);
  font-family: var(--ast-font-display);
  font-size: clamp(58px, 6.1vw, 91px);
  letter-spacing: -.045em;
  font-weight: 600;
  line-height: .96;
  text-wrap: balance;
}
.section-astrology .astro-hero-slide__subtitle {
  margin: 11px 0 8px;
  color: #27234d;
  font-family: var(--ast-font-display);
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.028em;
}
.section-astrology .astro-hero-slide__description {
  max-width: 535px;
  margin: 13px 0 26px;
  color: #6b6070;
  font-size: clamp(13px,1.15vw,16px);
  line-height: 1.76;
}
.section-astrology .astro-hero-slide__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.section-astrology .astro-hero-slide__button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 19px;
  min-width: min(220px,100%);
  min-height: 46px;
  padding: 11px 21px;
  border-radius: 999px;
  border: 1px solid var(--ast-plum);
  font-family: var(--ast-font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-align: left;
  transition: box-shadow .15s ease, transform .15s ease;
}
.section-astrology .astro-hero-slide__button--primary {
  background: linear-gradient(105deg,#862658,var(--ast-plum));
  color: #fff;
  box-shadow: 0 5px 15px rgba(89,25,61,.14);
}
.section-astrology .astro-hero-slide__button--outline {
  background: rgba(255,255,255,.78);
  color: var(--ast-plum);
  border-color: #ac5b88;
}
.section-astrology .astro-hero-slide__button > span { font-size: 20px; line-height: .6; }
.section-astrology a.astro-hero-slide__button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px #67134420; }
.section-astrology .astro-hero-slide__button--pending { cursor: default; }
.section-astrology .astro-hero-slide__ornament {
  position: absolute;
  color: #e6a569;
  opacity: .8;
  font-size: 28px;
  letter-spacing: 9px;
  pointer-events: none;
  z-index: 3;
  user-select: none;
}
.section-astrology .astro-hero-slide__ornament--tl {
  /* Keep all three original gold stars, but away from the left-hand artwork
     and from the eyebrow label. They float above the right edge of the copy. */
  left: clamp(345px, 42%, 620px);
  top: 11px;
  font-size: 21px;
  letter-spacing: 6px;
  white-space: nowrap;
}
.section-astrology .astro-hero-slide__ornament--bl { left: max(24px,calc((100% - 1440px) / 2)); bottom: 15px; font-size: 19px; }
.section-astrology .astro-hero-slide__sms {
  position: absolute;
  z-index: 4;
  right: clamp(18px,5vw,80px);
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(440px, 86%);
  min-height: 86px;
  padding: 15px 18px;
  color: #572049;
  border: 1px solid #ebc9a7;
  border-radius: 15px;
  background: rgba(255,250,245,.95);
  box-shadow: 0 9px 29px rgba(38,18,33,.21);
  backdrop-filter: blur(8px);
}
.section-astrology .astro-hero-slide__sms-icon {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
  border-radius: 12px;
  color: #fff;
  background: var(--ast-plum);
}
.section-astrology .astro-hero-slide__sms-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.section-astrology .astro-hero-slide__sms-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.section-astrology .astro-hero-slide__sms-text strong {
  font-family: var(--ast-font-display);
  font-size: clamp(21px,2vw,29px);
  font-weight: 700;
  line-height: 1;
}
.section-astrology .astro-hero-slide__sms-text small {
  color: #725c70;
  font-size: 10px;
  line-height: 1.35;
}
.section-astrology .astro-hero-slide__sms-arrow {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #b66a93;
  border-radius: 50%;
  color: var(--ast-plum);
  text-decoration: none;
  font-size: 18px;
}
.section-astrology .astro-hero-slide__sms-arrow--disabled { opacity: .55; }
.section-astrology .astro-hero-carousel__controls {
  position: relative;
  z-index: 5;
  min-height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: #fffaf5;
}
.section-astrology .astro-hero-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.section-astrology .astro-hero-carousel__dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.section-astrology .astro-hero-carousel__dot > span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d5bcc9;
  transition: background .18s ease, width .18s ease;
}
.section-astrology .astro-hero-carousel__dot[aria-current="true"] > span {
  width: 17px;
  border-radius: 20px;
  background: var(--ast-plum);
}
.section-astrology .astro-hero-carousel__pause {
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  color: #98517a;
  cursor: pointer;
}
.section-astrology .astro-hero-carousel__announcement {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}
@media (max-width: 1100px) {
 .section-astrology .astro-hero-slide__copy { width: 55%; }
 .section-astrology .astro-hero-slide__title { font-size: clamp(51px,6.3vw,77px); }
 .section-astrology .astro-hero-slide__media { width: 61%; }
 .section-astrology .astro-hero-slide__sms { width: min(360px,78%); }
}
@media (max-width: 790px) {
  .section-astrology .astro-hero-slide { display:flex; flex-direction:column; min-height:0; }
  .section-astrology .astro-hero-slide__inner { order:1; min-height:0; width:100%; padding-top:44px; padding-bottom:30px; }
  .section-astrology .astro-hero-slide__copy { width:100%; max-width:640px; }
  .section-astrology .astro-hero-slide__title { max-width:620px; font-size:clamp(52px,9vw,73px); }
  .section-astrology .astro-hero-slide__description { max-width:620px; }
  .section-astrology .astro-hero-slide__media { order:2; position:relative; inset:auto; width:100%; height:340px; }
  .section-astrology .astro-hero-slide__media-veil { background: linear-gradient(0deg,rgba(40,14,32,.18),transparent 50%); }
  .section-astrology .astro-hero-slide__sms { bottom:15px; right:20px; }
  .section-astrology .astro-hero-slide__ornament--bl { display:none; }
}
@media (max-width: 480px) {
  .section-astrology .astro-hero-slide__inner { padding-top:30px; padding-bottom:28px; }
  .section-astrology .astro-hero-slide__eyebrow { font-size:10px; }
  .section-astrology .astro-hero-slide__title { font-size:clamp(49px,12.5vw,65px); }
  .section-astrology .astro-hero-slide__subtitle { font-size:25px; }
  .section-astrology .astro-hero-slide__description { font-size:13px; line-height:1.7; }
  .section-astrology .astro-hero-slide__actions { gap:10px; }
  .section-astrology .astro-hero-slide__button { min-width:0; width:100%; font-size:12px; }
  .section-astrology .astro-hero-slide__media { height:290px; }
  .section-astrology .astro-hero-slide__sms {
    gap:9px;
    right:12px;
    left:12px;
    width:auto;
    padding:10px 12px;
    min-height:72px;
  }
  .section-astrology .astro-hero-slide__sms-icon { width:37px; height:37px; font-size:20px; }
  .section-astrology .astro-hero-slide__sms-text strong { font-size:23px; }
  .section-astrology .astro-hero-slide__sms-arrow { width:27px; height:27px; }
  .section-astrology .astro-hero-slide__ornament { font-size:18px; left:12px; }
}
@media(prefers-reduced-motion: reduce) {
  .section-astrology .astro-hero-carousel__dot > span,
  .section-astrology .astro-hero-slide__button { transition:none; }
}


/* ASTROLINIA PROJECT MATCH HERO V3 */
@media (min-width: 791px) {
  .section-astrology .astro-hero-carousel {
    width: min(var(--ast-container-max, 1360px), calc(100% - 28px));
    margin: 14px auto 0;
    border: 1px solid #edd8c8;
    border-radius: 12px;
    overflow: hidden;
    background: #fff9f4;
    box-shadow: 0 1px 0 rgba(128, 64, 96, 0.03);
  }

  .section-astrology .astro-hero-slide,
  .section-astrology .astro-hero-slide__inner {
    min-height: 430px;
  }

  .section-astrology .astro-hero-slide {
    background:
      radial-gradient(circle at 16% 10%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.86) 16%, rgba(255,255,255,0) 44%),
      linear-gradient(90deg, #fff9f4 0%, #fff8f2 47%, #ecd9d1 63%, #d3b4a4 100%);
  }

  .section-astrology .astro-hero-slide__inner {
    padding-block: 38px 46px;
  }

  .section-astrology .astro-hero-slide__copy {
    width: min(48.5%, 650px);
    padding-left: 18px;
  }

  .section-astrology .astro-hero-slide__media {
    width: 57%;
  }

  .section-astrology .astro-hero-slide__media > img {
    /* position comes from each slide’s CMS-controlled image_focus */
    filter: saturate(.96) contrast(1.03) brightness(.98);
  }

  .section-astrology .astro-hero-slide__media-veil {
    background:
      linear-gradient(90deg,
        rgba(255,249,244,0.98) 0%,
        rgba(255,249,244,0.96) 5%,
        rgba(255,249,244,0.84) 14%,
        rgba(255,249,244,0.50) 24%,
        rgba(255,249,244,0.08) 40%,
        rgba(255,249,244,0.00) 58%),
      linear-gradient(0deg, rgba(43,20,40,.18), rgba(43,20,40,0.00) 42%);
  }


  .section-astrology .astro-hero-slide__eyebrow {
    margin-bottom: 16px;
    font-size: 12px;
    letter-spacing: .11em;
  }

  .section-astrology .astro-hero-slide__title {
    max-width: 620px;
    margin: 0 0 12px;
    font-size: clamp(64px, 5.2vw, 82px);
    line-height: .94;
    letter-spacing: -.04em;
  }

  .section-astrology .astro-hero-slide__subtitle {
    margin: 0 0 16px;
    font-size: clamp(27px, 2.45vw, 34px);
    line-height: 1.08;
    color: #2f2951;
  }

  .section-astrology .astro-hero-slide__description {
    max-width: 560px;
    margin: 0 0 28px;
    color: #645a69;
    font-size: 16px;
    line-height: 1.56;
  }

  .section-astrology .astro-hero-slide__actions {
    gap: 16px;
  }

  .section-astrology .astro-hero-slide__button {
    min-width: 235px;
    min-height: 54px;
    padding: 14px 24px;
    font-size: 14px;
    gap: 22px;
  }

  .section-astrology .astro-hero-slide__button > span {
    font-size: 22px;
  }

  .section-astrology .astro-hero-slide__sms {
    right: 24px;
    bottom: 20px;
    width: min(395px, 82%);
    min-height: 104px;
    padding: 16px 18px;
    gap: 14px;
    border-radius: 18px;
    border: 1px solid #e8c7ab;
    background: rgba(255, 249, 242, .97);
    box-shadow: 0 10px 28px rgba(48, 20, 37, .15);
  }

  .section-astrology .astro-hero-slide__sms-icon {
    width: 50px;
    height: 50px;
    font-size: 24px;
    border-radius: 13px;
  }

  .section-astrology .astro-hero-slide__sms-kicker {
    font-size: 11px;
    letter-spacing: .12em;
  }

  .section-astrology .astro-hero-slide__sms-text strong {
    font-size: clamp(28px, 2vw, 36px);
    line-height: 1.02;
  }

  .section-astrology .astro-hero-slide__sms-text small {
    font-size: 12px;
    line-height: 1.35;
  }

  .section-astrology .astro-hero-slide__sms-arrow {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }

  .section-astrology .astro-hero-slide__ornament--tl {
    left: auto;
    right: 20px;
    top: 12px;
    font-size: 20px;
    letter-spacing: 5px;
  }

  .section-astrology .astro-hero-slide__ornament--bl {
    left: 22px;
    bottom: 18px;
    font-size: 18px;
  }

  .section-astrology .astro-hero-carousel__controls {
    min-height: 32px;
    background: #fff9f4;
  }
}

@media (max-width: 1100px) and (min-width: 791px) {
  .section-astrology .astro-hero-slide,
  .section-astrology .astro-hero-slide__inner {
    min-height: 410px;
  }

  .section-astrology .astro-hero-slide__copy {
    width: 50%;
  }

  .section-astrology .astro-hero-slide__media {
    width: 55%;
  }

  .section-astrology .astro-hero-slide__title {
    font-size: clamp(56px, 5.1vw, 72px);
  }

  .section-astrology .astro-hero-slide__subtitle {
    font-size: clamp(24px, 2.3vw, 30px);
  }

  .section-astrology .astro-hero-slide__description {
    font-size: 15px;
  }

  .section-astrology .astro-hero-slide__button {
    min-width: 210px;
  }

  .section-astrology .astro-hero-slide__sms {
    width: min(360px, 82%);
  }
}

@media (max-width: 790px) {
  .section-astrology .astro-hero-carousel {
    width: calc(100% - 20px);
    margin: 10px auto 0;
    border: 1px solid #edd8c8;
    border-radius: 12px;
    overflow: hidden;
  }

  .section-astrology .astro-hero-slide {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .section-astrology .astro-hero-slide__inner {
    order: 1;
    min-height: 0;
    width: 100%;
    padding-top: 34px;
    padding-bottom: 28px;
  }

  .section-astrology .astro-hero-slide__copy {
    width: 100%;
    max-width: 680px;
  }

  .section-astrology .astro-hero-slide__title {
    max-width: 620px;
    font-size: clamp(46px, 8vw, 66px);
  }

  .section-astrology .astro-hero-slide__subtitle {
    font-size: clamp(24px, 4vw, 30px);
  }

  .section-astrology .astro-hero-slide__description {
    max-width: 620px;
    font-size: 15px;
    line-height: 1.6;
  }

  .section-astrology .astro-hero-slide__actions {
    gap: 12px;
  }

  .section-astrology .astro-hero-slide__button {
    min-height: 48px;
    min-width: 0;
  }

  .section-astrology .astro-hero-slide__media {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    height: 310px;
  }

  .section-astrology .astro-hero-slide__media > img {
    /* position comes from each slide’s CMS-controlled image_focus */
  }

  .section-astrology .astro-hero-slide__media-veil {
    background: linear-gradient(0deg, rgba(40,14,32,.16), transparent 50%);
  }


  .section-astrology .astro-hero-slide__sms {
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
    min-height: 82px;
    padding: 12px 14px;
  }

  .section-astrology .astro-hero-slide__sms-text strong {
    font-size: 24px;
  }

  .section-astrology .astro-hero-slide__ornament--bl {
    display: none;
  }
}

@media (max-width: 480px) {
  .section-astrology .astro-hero-slide__inner {
    padding-top: 28px;
    padding-bottom: 24px;
  }

  .section-astrology .astro-hero-slide__eyebrow {
    font-size: 10px;
  }

  .section-astrology .astro-hero-slide__title {
    font-size: clamp(40px, 11vw, 52px);
  }

  .section-astrology .astro-hero-slide__subtitle {
    font-size: 23px;
  }

  .section-astrology .astro-hero-slide__description {
    font-size: 14px;
  }

  .section-astrology .astro-hero-slide__button {
    width: 100%;
    font-size: 13px;
  }

  .section-astrology .astro-hero-slide__media {
    height: 270px;
  }

  .section-astrology .astro-hero-slide__sms-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .section-astrology .astro-hero-slide__sms-text strong {
    font-size: 22px;
  }

  .section-astrology .astro-hero-slide__sms-arrow {
    width: 30px;
    height: 30px;
  }
}

/* ASTROLINIA HERO - BEZ RAMKI */
.section-astrology .astro-hero-carousel {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ASTROLINIA HERO TITLE CONTROL V1 */

/* Bez ramki i bez zaokrągleń całego banera */
.section-astrology .astro-hero-carousel {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Wielkość tytułu ustawiana w panelu Wagtail */
.section-astrology .astro-hero-slide__title {
    font-size: var(--astro-title-size, 72px) !important;
}

/* Ograniczenie rozmiaru na mniejszych ekranach */
@media (max-width: 790px) {
    .section-astrology .astro-hero-slide__title {
        font-size: min(
            var(--astro-title-size, 72px),
            clamp(43px, 8vw, 60px)
        ) !important;
    }
}

@media (max-width: 480px) {
    .section-astrology .astro-hero-slide__title {
        font-size: min(
            var(--astro-title-size, 72px),
            clamp(39px, 11vw, 52px)
        ) !important;
    }
}

/* ASTROLINIA TYPOGRAPHY CONTROLS V1 — editor values, per slide. */
.section-astrology .astro-hero-slide__button {
  font-size: var(--astro-button-size, 12px);
  font-weight: var(--astro-button-weight, 700);
}
.section-astrology .astro-hero-slide__sms-kicker {
  font-size: var(--astro-sms-kicker-size, 10px);
  font-weight: var(--astro-sms-kicker-weight, 800);
}
.section-astrology .astro-hero-slide__sms-text strong {
  font-size: var(--astro-sms-heading-size, clamp(21px, 2vw, 29px));
  font-weight: var(--astro-sms-heading-weight, 700);
}
.section-astrology .astro-hero-slide__sms-text small {
  font-size: var(--astro-sms-desc-size, 10px);
  font-weight: var(--astro-sms-desc-weight, 400);
}
@media (min-width: 791px) {
  .section-astrology .astro-hero-slide__button {
    font-size: var(--astro-button-size, 14px);
  }
  .section-astrology .astro-hero-slide__sms {
    right: var(--astro-sms-right, 24px);
  }
  .section-astrology .astro-hero-slide__sms-kicker {
    font-size: var(--astro-sms-kicker-size, 11px);
  }
  .section-astrology .astro-hero-slide__sms-text strong {
    font-size: var(--astro-sms-heading-size, clamp(28px, 2vw, 36px));
  }
  .section-astrology .astro-hero-slide__sms-text small {
    font-size: var(--astro-sms-desc-size, 12px);
  }
}
@media (max-width: 790px) {
  .section-astrology .astro-hero-slide__sms-text strong {
    font-size: var(--astro-sms-heading-size, 24px);
  }
}
@media (max-width: 480px) {
  .section-astrology .astro-hero-slide__button {
    font-size: var(--astro-button-size, 13px);
  }
  .section-astrology .astro-hero-slide__sms-text strong {
    font-size: var(--astro-sms-heading-size, 22px);
  }
}

/* ASTROLINIA SMS POSITION ON TABLET V1
   Allow the same editor offset on tablets, but keep the full-width,
   readable SMS banner on narrow phones. */
@media (min-width: 481px) and (max-width: 790px) {
  .section-astrology .astro-hero-slide__sms {
    left: auto;
    right: min(var(--astro-sms-right, 24px), 38vw);
    width: min(395px, calc(100% - min(var(--astro-sms-right, 24px), 38vw) - 12px));
  }
}

/* HERO VIDEO BACKGROUND V1: image underneath is a poster/fallback. */
.section-astrology .astro-hero-slide__media-veil { z-index: 2; }
.section-astrology .astro-hero-slide__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .section-astrology .astro-hero-slide__video { display: none; }
}


/* Reveal the chosen department background beneath the main HERO layer while preserving legibility. */
body.section-astrology[data-ast-bg-mode="image"] .astro-hero-carousel {
  background: rgba(255, 249, 243, .65);
}
body.section-astrology[data-ast-bg-mode="image"] .astro-hero-slide {
  background: rgba(255, 249, 243, .82);
}


/* One solid page background selected in Ustawienia Działu.
   HERO gutters, the slide's text area and carousel navigation must be exactly
   the same color as the rest of the department, with no separate cream gradient.
   The photograph/video, SMS card and buttons keep their own artwork. */
body.section-astrology:not([data-ast-bg-mode="image"]) .astro-hero-carousel,
body.section-astrology:not([data-ast-bg-mode="image"]) .astro-hero-slide,
body.section-astrology:not([data-ast-bg-mode="image"]) .astro-hero-carousel__controls {
  background: var(--ast-page-surface, #fffaf5);
}

/* On desktop only, fade the image into THE CHOSEN COLOR rather than
   the old hardcoded #fff9f4, which made a mismatched light stripe. */
@media (min-width: 791px) {
  body.section-astrology:not([data-ast-bg-mode="image"]) .astro-hero-slide__media-veil {
    background:
      linear-gradient(90deg,
        var(--ast-page-surface, #fffaf5) 0%,
        color-mix(in srgb, var(--ast-page-surface, #fffaf5) 96%, transparent) 7%,
        color-mix(in srgb, var(--ast-page-surface, #fffaf5) 76%, transparent) 16%,
        color-mix(in srgb, var(--ast-page-surface, #fffaf5) 38%, transparent) 29%,
        transparent 57%),
      linear-gradient(0deg, rgba(43,20,40,.18), transparent 42%);
  }
}

/* Section spacing is owned by Ustawienia Działu. 0px means no exterior gap.
   Override the legacy 14px/10px top margins without altering side gutters. */
body.section-astrology .astro-hero-carousel {
  margin-top: var(--ast-hero-top-gap, 0px) !important;
}

/* Under the LEFT text of each slide. The right-side photo/video remains
   independently editable. Fade the backdrop into that media, not into a
   second hard-coded cream color. */
.section-astrology .astro-hero-slide__copy-backdrop {
  position: absolute;
  inset: 0 auto 0 0;
  width: 66%;
  z-index: 1;
  pointer-events: none;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 67%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 67%, transparent 100%);
}
.section-astrology .astro-hero-slide__copy-backdrop--photo {
  /* Soft veil in the actual image layer keeps copy readable on varied photos. */
  background-blend-mode: normal;
}
@media (max-width: 790px) {
  .section-astrology .astro-hero-slide__copy-backdrop {
    width: 100%;
    bottom: 310px; /* text area above mobile media */
    -webkit-mask-image: none;
    mask-image: none;
  }
}
@media (max-width: 480px) {
  .section-astrology .astro-hero-slide__copy-backdrop { bottom: 270px; }
}


/* CP20 — single HERO-wide desktop split: text 40% and media 60% by default.
   The CMS value is set on the carousel (not per slide). Do not alter the
   stacked photograph/SMS layout at 790px and below. */
@media (min-width: 791px) {
  .section-astrology .astro-hero-slide__copy {
    width: var(--ast-hero-text-share, 40%);
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    padding-right: clamp(12px, 1.6vw, 25px);
  }
  .section-astrology .astro-hero-slide__media {
    width: calc(100% - var(--ast-hero-text-share, 40%));
  }
  .section-astrology .astro-hero-slide__copy-backdrop {
    /* Match the wider, softer fade from before CP20, following the split. */
    width: calc(var(--ast-hero-text-share, 40%) + 26%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 67%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 67%, transparent 100%);
  }
  .section-astrology .astro-hero-slide__title,
  .section-astrology .astro-hero-slide__subtitle,
  .section-astrology .astro-hero-slide__description {
    overflow-wrap: break-word;
  }
}

/* CP22: a constant HERO slide height for each viewport class, regardless of
   photo/video dimensions, number of text lines or which slide is selected.
   Desktop remains a horizontal 40/60 (editable) composition. On mobile
   the inner text and media stay stacked with separate fixed space.
   Oversized copy scrolls INSIDE its text region instead of resizing HERO. */
@media (min-width: 791px) {
  .section-astrology .astro-hero-carousel {
    --ast-hero-slide-fixed-height: 480px;
  }
  .section-astrology .astro-hero-slide {
    height: var(--ast-hero-slide-fixed-height);
    min-height: 0;
    max-height: var(--ast-hero-slide-fixed-height);
  }
  .section-astrology .astro-hero-slide__inner {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .section-astrology .astro-hero-slide__media {
    height: 100%;
  }
}
@media (max-width: 790px) {
  .section-astrology .astro-hero-carousel {
    --ast-hero-slide-fixed-height: 760px;
    --ast-hero-fixed-media-height: 310px;
  }
  .section-astrology .astro-hero-slide {
    display: flex;
    flex-direction: column;
    height: var(--ast-hero-slide-fixed-height);
    min-height: 0;
    max-height: var(--ast-hero-slide-fixed-height);
  }
  .section-astrology .astro-hero-slide__inner {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    max-height: none;
    box-sizing: border-box;
    overflow: hidden;
  }
  .section-astrology .astro-hero-slide__media {
    flex: 0 0 var(--ast-hero-fixed-media-height);
    width: 100%;
    height: var(--ast-hero-fixed-media-height);
    min-height: 0;
    max-height: var(--ast-hero-fixed-media-height);
  }
}
@media (max-width: 480px) {
  .section-astrology .astro-hero-carousel {
    --ast-hero-slide-fixed-height: 710px;
    --ast-hero-fixed-media-height: 270px;
  }
}

/* The copy is interactive while the full-width inner overlay is not; keep
   the SMS card clickable over the media. Excess copy is scrollable and
   keyboard-accessible without forcing a taller slide. */
.section-astrology .astro-hero-slide__copy {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* CP23: SMS bottom offset per slide, independent from existing right offset.
   The value is on each article alongside --astro-sms-right; media/mobile
   dimensions and copy/SMS layers remain unchanged. */
.section-astrology .astro-hero-slide__sms {
  bottom: var(--astro-sms-bottom, 20px);
}

/* Independent artwork stays in the foreground during all slides; no pointer capture. */
.section-astrology .astro-hero-carousel__decoration {
  position: absolute;
  z-index: 50;
  left: var(--ast-hero-decor-x, -35px);
  top: calc(50% + var(--ast-hero-decor-y, 0px));
  transform: translateY(-50%);
  display: block;
  width: var(--ast-hero-decor-width, 320px);
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
/* Exactly the same foreground layer as the left ornament, but anchored to
   the right edge. Positive X moves the image right/outside the carousel;
   negative X moves it left/inside. No transform/mirroring of the artwork. */
.section-astrology .astro-hero-carousel__decoration--right {
  left: auto;
  right: calc(0px - var(--ast-hero-decor-right-x, 35px));
}
@media (max-width: 1199px) {
  .section-astrology .astro-hero-carousel__decoration { display: none !important; }
}

/* The carousel itself MUST NOT clip the independently positioned image.
   Keep photo/gradient/video safely clipped inside the separate slide stage. */
@media (min-width: 1200px) {
  .section-astrology .astro-hero-carousel {
    overflow: visible;
  }
  /* Only the independent illustration may cover the top navigation.
     Remove the carousel's stacking isolation so its z-index:50 artwork
     paints above the header (z-index:20), without raising the slider itself
     or the interactive carousel controls above menu links. */
  .section-astrology .astro-hero-carousel--decorated {
    isolation: auto;
  }
  .section-astrology .astro-hero-carousel__stage {
    overflow: hidden;
    border-radius: inherit;
  }
}


/* CP25 — real crossfade: opacity only, no display:none while switching.
   Without JavaScript the first server-rendered slide remains visible. */
.section-astrology .astro-hero-carousel.is-enhanced .astro-hero-carousel__stage {
  display: grid;
}
.section-astrology .astro-hero-carousel.is-enhanced .astro-hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}
.section-astrology .astro-hero-carousel.is-enhanced .astro-hero-slide.is-current {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
.section-astrology .astro-hero-carousel.is-enhanced.is-ready .astro-hero-slide {
  transition: opacity .9s ease-in-out, visibility 0s linear .9s;
}
.section-astrology .astro-hero-carousel.is-enhanced.is-ready .astro-hero-slide.is-current {
  transition: opacity .9s ease-in-out, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .section-astrology .astro-hero-carousel.is-enhanced .astro-hero-slide {
    transition: none !important;
  }
}

/* Raise the entire left copy area and add a quiet second row of discovery links. */
@media (min-width: 791px) {
  .section-astrology .astro-hero-slide__inner {
    align-items: flex-start;
    padding-top: clamp(23px, 2.5vw, 35px);
    padding-bottom: 26px;
  }
}
.section-astrology .astro-hero-slide__related {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 7px 10px;
  max-width: 100%;
  margin-top: 17px;
  padding: 0;
}
/* Editorial navigation, not pill buttons. All symbols are monochrome glyphs. */
.section-astrology .astro-hero-slide__related-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 29px;
  padding: 4px 7px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ast-plum, #681044);
  text-decoration: none;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  transition: color .15s ease;
}
.section-astrology a.astro-hero-slide__related-link:hover,
.section-astrology a.astro-hero-slide__related-link:focus-visible {
  color: #ab784a;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.section-astrology .astro-hero-slide__related-link--pending {
  opacity: .65;
  cursor: default;
}
.section-astrology .astro-hero-slide__related-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c29b6d;
  font-family: Georgia, "DejaVu Serif", serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}
@media (max-width: 790px) {
  .section-astrology .astro-hero-slide__inner {
    align-items: flex-start;
    padding-top: 27px;
  }
  .section-astrology .astro-hero-slide__related { margin-top: 12px; gap: 6px; }
  .section-astrology .astro-hero-slide__related-link { font-size: 10px; padding: 5px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .section-astrology .astro-hero-slide__related-link { transition: none; }
}