/* =========================================================
   FINANSOWANIE POGRZEBU
   Mobile-first
   ========================================================= */


/* =========================================================
   BAZA
   ========================================================= */

.finance-page h3 {
  margin-bottom: 0;

  font-size: 22px;
  line-height: 1.25;
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.finance-hero {
  padding: 22px 0 72px;

  border-bottom:
    1px solid rgba(15, 51, 43, .10);
}


.finance-hero__content {
  max-width: 850px;
}


.finance-hero h1 {
  max-width: 13ch;

  margin: 0;

  font-size: clamp(39px, 11vw, 50px);
  line-height: 1.025;
  letter-spacing: -.032em;
}


.finance-hero__lead {
  max-width:46ch;
}


.finance-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 30px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.finance-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 52px;

  padding: 0 24px;

  border:
    1px solid var(--color-green);

  border-radius: var(--radius-md);

  background: var(--color-green);

  color: #FFFEFA;

  font-size: 14px;
  font-weight: 600;

  text-decoration: none;
}


.finance-button:visited {
  color: #FFFEFA;
}


.finance-button--secondary {
  background: transparent;
  color: var(--color-green);
}


.finance-button--secondary:visited {
  color: var(--color-green);
}


/* =========================================================
   ZDJĘCIA
   ========================================================= */

.finance-photo {
  width: 100vw;

  margin:
    0 0 0 calc(50% - 50vw);

  overflow: hidden;

  background: var(--color-surface);
}


.finance-photo img {
  display: block;

  width: 100%;
  height: auto;
}


/* =========================================================
   ZASIŁEK
   ========================================================= */

.finance-benefit {
  padding: 72px 0 0;

  background: var(--color-white);
}


.finance-benefit__grid {
  display: grid;
  gap: 40px;
}


.finance-benefit__content h2 {
  max-width: 13ch;
}


.finance-benefit__content .lead-copy {
  max-width: 46ch;

  margin: 24px 0 0;
}


.finance-benefit__important {
  max-width: 44ch;

  margin: 24px 0 0;

  color: var(--color-green);

  font-size: 17px;
  line-height: 1.58;
  font-weight: 600;
}


/* =========================================================
   LINK TEKSTOWY
   ========================================================= */

.finance-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  max-width: 46ch;

  margin-top: 28px;

  color: var(--color-green);

  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;

  text-decoration: none;
}


.finance-text-link span {
  flex: 0 0 auto;

  transition:
    transform .15s ease;
}


.finance-text-link:hover span {
  transform:
    translateX(3px);
}


/* =========================================================
   NAGŁÓWKI SEKCJI
   ========================================================= */

.finance-section-header {
  max-width: 760px;

  margin-bottom: 38px;
}


.finance-section-header h2 {
  max-width: 15ch;
}


/* =========================================================
   OD CZEGO ZALEŻY CENA
   ========================================================= */

.finance-factors {
  padding: 76px 0;

  background: var(--color-bg);
}


.finance-factors__list {
  border-top:
    1px solid var(--color-border);
}


.finance-factor {
  display: grid;

  grid-template-columns:
    42px minmax(0, 1fr);

  gap: 14px;

  padding: 26px 0;

  border-bottom:
    1px solid var(--color-border);
}


.finance-factor__number {
  padding-top: 4px;

  color: var(--color-gold);

  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;

  letter-spacing: .08em;
}


.finance-factor h3 {
  max-width: 28ch;
}


.finance-factor p {
  max-width: 54ch;

  margin: 10px 0 0;

  color: var(--color-muted);

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


.finance-factor__standard {
  color: var(--color-text) !important;
  font-weight: 600;
}


/* =========================================================
   STANDARD USŁUG
   ========================================================= */

.finance-standard {
  padding: 72px 0 0;

  background: var(--color-white);
}


.finance-standard__grid {
  display: grid;
  gap: 40px;
}


.finance-standard__content h2 {
  max-width: 15ch;
}


.finance-standard__content .lead-copy {
  max-width: 44ch;

  margin: 24px 0 0;
}


.finance-standard__content > p:not(.service-eyebrow):not(.lead-copy) {
  max-width: 47ch;

  margin: 20px 0 0;

  color: var(--color-muted);

  line-height: 1.68;
}


.finance-standard__content strong {
  color: var(--color-text);
  font-weight: 600;
}


/* =========================================================
   SKŁADNIKI POGRZEBU
   ========================================================= */

.finance-components {
  padding: 76px 0;

  background: var(--color-white);
}


.finance-components__grid {
  display: grid;
  gap: 58px;
}


.finance-components__column h3 {
  padding-bottom: 20px;

  border-bottom:
    1px solid var(--color-border);

  font-size: 27px;
}


.finance-cost-list {
  list-style: none;

  margin: 0;
  padding: 0;
}


.finance-cost-list li {
  position: relative;

  padding:
    20px 0 20px 24px;

  border-bottom:
    1px solid var(--color-border);
}


.finance-cost-list li::before {
  content: "";

  position: absolute;

  top: 29px;
  left: 0;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--color-gold);
}


.finance-cost-list strong {
  display: block;

  color: var(--color-text);

  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
}


.finance-cost-list span {
  display: block;

  margin-top: 5px;

  color: var(--color-muted);

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


.finance-components__note {
  max-width: 70ch;

  margin: 42px 0 0;

  padding-top: 26px;

  border-top:
    1px solid var(--color-border);

  color: var(--color-muted);

  font-size: 14px;
  line-height: 1.65;

  font-style: italic;
}


/* =========================================
   OPŁATY CMENTARNE
   ========================================= */
.finance-cemetery .service-eyebrow {
  color: var(--color-gold);
}

.finance-cemetery {
  padding: 68px 0 72px;
  background: var(--color-surface);
}

.finance-cemetery__grid {
  display: grid;
  gap: 40px;
}

.finance-cemetery h2 {
  max-width: 14ch;
  color: var(--color-green);
}

.finance-cemetery__content {
  max-width: 620px;
}

.finance-cemetery__content p {
  margin: 0;
  color: var(--color-muted);
  font-size: 18px;
  line-height: 1.65;
}

.finance-cemetery__content strong {
  color: var(--color-green);
  font-weight: 600;
}


/* =========================================================
   FAQ
   ========================================================= */

.finance-faq {
  padding: 76px 0;

  background: var(--color-bg);
}


.finance-faq .faq__header {
  max-width: 720px;

  margin-bottom: 40px;
}


.finance-faq .faq__header h2 {
  max-width: 14ch;
}


/* =========================================================
   KOŃCOWY KONTAKT
   Styl zgodny z /uslugi-pogrzebowe/
   ========================================================= */


.finance-contact h2 {
  max-width: 12ch;

  color: var(--color-white);
}


.finance-contact__grid > div:first-child > p:last-child {
  max-width: 39ch;

  margin: 20px 0 0;

  color: rgba(255, 254, 250, .75);

  line-height: 1.65;
}


/* =========================================================
   FOCUS
   ========================================================= */


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

@media (min-width: 768px) {
.finance-hero {
    padding: 42px 0 88px;
  }


  .finance-hero h1 {
    font-size: 50px;
  }


  .finance-benefit {
    padding: 92px 0;
  }


  .finance-benefit__grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(340px, .92fr);

    align-items: center;

    gap: 72px;
  }


  .finance-photo {
    width: 100%;
    margin: 0;

    border-radius: var(--radius-md);
  }


  .finance-photo img {
    width: 100%;
    height: auto;
  }


  .finance-factors {
    padding: 92px 0;
  }


  .finance-factor {
    grid-template-columns:
      52px minmax(0, 1fr);

    gap: 22px;

    padding: 30px 0;
  }


  .finance-factor h3 {
    font-size: 24px;
  }


  .finance-factor p {
    font-size: 16px;
  }


  .finance-standard {
    padding: 92px 0;
  }


  .finance-standard__grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(340px, .92fr);

    align-items: center;

    gap: 72px;
  }


  .finance-components {
    padding: 92px 0;
  }


  .finance-components__grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap: 64px;
  }


  .finance-components__column + .finance-components__column {
    padding-left: 64px;

    border-left:
      1px solid var(--color-border);
  }


  .finance-cemetery {
    padding: 84px 0 88px;
  }

  .finance-cemetery__grid {
    grid-template-columns:
      minmax(0, .8fr)
      minmax(0, 1.2fr);

    align-items: start;
    gap: 72px;
  }



  .finance-faq {
    padding: 92px 0;
  }



  


}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1200px) {
.finance-hero {
    padding: 46px 0 100px;
  }


  .finance-hero h1 {
    font-size: 60px;
    line-height: 1.02;
  }


  .finance-benefit {
    padding: 108px 0;
  }


  .finance-benefit__grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(460px, .92fr);

    gap: 110px;
  }


  .finance-factors {
    padding: 106px 0;
  }


  .finance-section-header {
    margin-bottom: 48px;
  }


  .finance-factor {
    grid-template-columns:
      64px minmax(0, 1fr);

    gap: 28px;

    padding: 34px 0;
  }


  .finance-factor h3 {
    font-size: 26px;
  }


  .finance-standard {
    padding: 108px 0;
  }


  .finance-standard__grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(460px, .92fr);

    gap: 110px;
  }


  .finance-components {
    padding: 108px 0;
  }


  .finance-components__grid {
    gap: 82px;
  }


  .finance-components__column + .finance-components__column {
    padding-left: 82px;
  }


  .finance-components__column h3 {
    font-size: 30px;
  }


  .finance-cost-list strong {
    font-size: 17px;
  }


  .finance-cost-list span {
    font-size: 16px;
  }


  .finance-cemetery {
    padding: 96px 0 100px;
  }

  .finance-cemetery__grid {
    gap: 110px;
  }

  .finance-cemetery__content p {
    font-size: 19px;
  }


  .finance-faq {
    padding: 108px 0;
  }


  


}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .finance-text-link span {
    transition: none;
  }

}