/* =========================================
   USŁUGI PROSEKTORYJNE — WARMIŃSKI
   Mobile-first
   Wzorzec: pozostałe strony usługowe
   ========================================= */


/* =========================================
   TYPOGRAFIA / WSPÓLNE
   ========================================= */

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


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

.prosectorium-hero h1 {
  max-width: 11ch;

  margin: 0;

  font-size: clamp(39px,11vw,50px);
  line-height: 1.025;

  letter-spacing: -.032em;
}


.prosectorium-hero__lead {
  max-width:40ch;
}

/*
 * MOBILE:
 * zdjęcie wychodzi poza container
 * i zajmuje pełną szerokość viewportu.
 *
 * BRAK:
 * height,
 * aspect-ratio,
 * object-fit: cover.
 *
 * Zdjęcie zachowuje oryginalne proporcje.
 */

.prosectorium-photo-placeholder {
  width: 100%;

  aspect-ratio: 4 / 3;

  background:
    linear-gradient(
      145deg,
      var(--color-surface),
      #b8c8b6 65%,
      #557466
    );
}



/* =========================================
   WSPÓLNY SPLIT
   ========================================= */

.prosectorium-split {
  display: grid;

  gap: 34px;
}


.prosectorium-page .section-heading h2 {
  max-width: 12ch;
}



/* =========================================
   INTRO
   ========================================= */

.prosectorium-intro {
  padding:
    72px
    0
    68px;
}


.prosectorium-prose {
  max-width: 680px;
}


.prosectorium-prose .lead-copy {
  margin-bottom: 24px;
}


.prosectorium-prose > p:not(.lead-copy) {
  color: var(--color-muted);

  line-height: 1.65;
}



/* =========================================
   TANATOKOSMETYKA
   ========================================= */

.prosectorium-cosmetics {
  padding:
    70px
    0
    74px;

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


.prosectorium-cosmetics__grid {
  display: grid;

  gap: 44px;
}


.prosectorium-cosmetics__content {
  max-width: 700px;
}


.prosectorium-cosmetics__content h2 {
  max-width: 12ch;
}


.prosectorium-cosmetics__content
> p:not(.service-eyebrow) {
  margin: 22px 0 0;

  color: var(--color-muted);

  line-height: 1.65;
}



/* =========================================
   KWALIFIKACJE
   ========================================= */

.prosectorium-qualification {
  display: grid;

  grid-template-columns:
    34px
    1fr;

  gap: 14px;

  padding-top: 27px;

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


.prosectorium-qualification__line {
  width: 28px;
  height: 2px;

  margin-top: 12px;

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


.prosectorium-qualification h3 {
  max-width: 15ch;

  margin-bottom: 20px;
}


.prosectorium-qualification
p:not(.service-eyebrow) {
  color: var(--color-muted);

  line-height: 1.65;
}



/* =========================================
   ZAKRES
   ========================================= */

.prosectorium-scope {
  padding:
    70px
    0
    74px;
}


.prosectorium-scope__heading {
  max-width: 760px;

  margin-bottom: 38px;
}


.prosectorium-scope__heading h2 {
  max-width: 15ch;
}


.prosectorium-scope__items {
  display: grid;

  gap: 30px;
}


.prosectorium-scope__items article {
  padding-top: 24px;

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


.prosectorium-number {
  display: block;

  margin-bottom: 30px;

  color: var(--color-gold);

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

  letter-spacing: .08em;
}


.prosectorium-scope__items h3 {
  margin-bottom: 13px;
}


.prosectorium-scope__items p {
  margin-bottom: 0;

  color: var(--color-muted);

  line-height: 1.65;
}



/* =========================================
   TANATOPRAKSJA
   ========================================= */

.prosectorium-thanato {
  padding:
    72px
    0;

  background: #0A2721;

  color: rgba(255,254,250,.76);
}


.prosectorium-thanato__grid {
  display: grid;

  gap: 36px;
}


.prosectorium-thanato h2,
.prosectorium-thanato h3 {
  color: var(--color-white);
}


.prosectorium-thanato__heading h2 {
  max-width: 11ch;
}


.prosectorium-thanato__body {
  max-width: 720px;
}


.prosectorium-thanato__lead {
  margin-bottom: 25px;

  color: var(--color-white);

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


.prosectorium-thanato__body
> p:not(.prosectorium-thanato__lead) {
  margin-bottom: 18px;

  line-height: 1.68;
}


.prosectorium-embalming {
  margin-top: 38px;

  padding-top: 30px;

  border-top:
    1px solid rgba(255,254,250,.18);
}


.prosectorium-embalming h3 {
  margin-bottom: 18px;
}


.prosectorium-embalming
> p:not(.service-eyebrow) {
  color: rgba(255,254,250,.72);

  line-height: 1.68;
}



/* =========================================
   VIDEO
   ========================================= */

.prosectorium-video {
  padding:
    72px
    0;

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


.prosectorium-video__grid {
  display: grid;

  gap: 40px;
}


.prosectorium-video__copy {
  max-width: 650px;
}


.prosectorium-video__copy h2 {
  max-width: 10ch;
}


.prosectorium-video__copy
> p:not(.service-eyebrow) {
  margin: 22px 0 0;

  color: var(--color-muted);

  line-height: 1.65;
}



/*
 * Shorts ma pionowe proporcje.
 *
 * Nie ładujemy iframe przy wejściu na stronę.
 * Iframe pojawia się dopiero po kliknięciu.
 */

.prosectorium-video__player {
  width: min(100%, 420px);

  margin-inline: auto;

  aspect-ratio: 9 / 16;

  overflow: hidden;

  background: #0A2721;

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


.prosectorium-video__poster {
  position: relative;

  display: block;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 77% 15%,
      rgba(161,135,80,.30),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #174036,
      #0A2721 72%
    );

  color: var(--color-white);

  text-decoration: none;
}


.prosectorium-video__poster::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      145deg,
      transparent 0 42%,
      rgba(255,255,255,.045) 42% 42.5%,
      transparent 42.5% 100%
    );

  pointer-events: none;
}


.prosectorium-video__play {
  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 2;

  display: grid;

  place-items: center;

  width: 72px;
  height: 72px;

  padding-left: 4px;

  border:
    1px solid rgba(255,254,250,.65);

  border-radius: 50%;

  background:
    rgba(10,39,33,.48);

  color: var(--color-white);

  font-size: 23px;

  transform:
    translate(-50%,-50%);
}


.prosectorium-video__poster-copy {
  position: absolute;

  z-index: 2;

  left: 26px;
  right: 26px;
  bottom: 30px;

  display: grid;

  gap: 7px;
}


.prosectorium-video__poster-copy small {
  color: var(--color-gold-light);

  font-size: 10px;
  line-height: 1.3;
  font-weight: 600;

  letter-spacing: .11em;

  text-transform: uppercase;
}


.prosectorium-video__poster-copy strong {
  max-width: 11ch;

  font-family: Lora, Georgia, serif;

  font-size: 29px;
  line-height: 1.12;
  font-weight: 400;
}


.prosectorium-video__poster-copy
> span:last-child {
  margin-top: 5px;

  font-size: 13px;
  font-weight: 600;
}


.prosectorium-video__iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}



/* =========================================
   KIEDY TANATOPRAKSJA
   ========================================= */

.prosectorium-when {
  padding:
    72px
    0;

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


.prosectorium-when__body ul {
  margin: 0;
  padding: 0;

  list-style: none;

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


.prosectorium-when__body li {
  position: relative;

  padding:
    17px
    0
    17px
    26px;

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

  line-height: 1.55;
}


.prosectorium-when__body li::before {
  content: "";

  position: absolute;

  top: 27px;
  left: 0;

  width: 8px;
  height: 2px;

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



/* =========================================
   ZAPLECZE
   ========================================= */

.prosectorium-facilities {
  padding:
    72px
    0;
}


.prosectorium-facilities__grid {
  display: grid;

  gap: 34px;
}


.prosectorium-facilities__grid h2 {
  max-width: 12ch;
}


.prosectorium-facilities__body {
  max-width: 680px;
}


.prosectorium-facilities__body .lead-copy {
  margin-bottom: 24px;
}


.prosectorium-facilities__body
> p:not(.lead-copy) {
  color: var(--color-muted);

  line-height: 1.65;
}



/* =========================================
   KONTAKT
   ========================================= */


.prosectorium-contact h2 {
  max-width: 720px;

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


.prosectorium-contact__copy
> p:last-child {
  max-width: 680px;

  margin:
    20px
    0
    0;

  line-height: 1.68;
}


/* =========================================
   TABLET — 768+
   ========================================= */

@media (min-width: 768px) {


  /* HERO */

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

/*
   * Desktop/tablet:
   * zdjęcie wraca do normalnej kolumny,
   * ale nadal NIE MA stałej wysokości.
   */

/* SPLIT */

  .prosectorium-split {
    grid-template-columns:
      minmax(0,.72fr)
      minmax(0,1.28fr);

    gap: 72px;
  }



  /* SEKCJE */

  .prosectorium-intro,
  .prosectorium-scope,
  .prosectorium-video,
  .prosectorium-when,
  .prosectorium-facilities {
    padding:
      88px
      0;
  }



  /* TANATOKOSMETYKA */

  .prosectorium-cosmetics {
    padding:
      88px
      0
      92px;
  }


  .prosectorium-cosmetics__grid {
    grid-template-columns:
      minmax(0,1.1fr)
      minmax(300px,.9fr);

    align-items: start;

    gap: 64px;
  }



  /* ZAKRES */

  .prosectorium-scope__heading {
    margin-bottom: 56px;
  }


  .prosectorium-scope__items {
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap: 42px;
  }



  /* TANATOPRAKSJA */

  .prosectorium-thanato {
    padding:
      88px
      0;
  }


  .prosectorium-thanato__grid {
    grid-template-columns:
      minmax(0,.72fr)
      minmax(0,1.28fr);

    gap: 72px;
  }



  /* VIDEO */

  .prosectorium-video__grid {
    grid-template-columns:
      minmax(0,.9fr)
      minmax(320px,390px);

    align-items: center;

    gap: 64px;
  }



  /* ZAPLECZE */

  .prosectorium-facilities__grid {
    grid-template-columns:
      minmax(0,.72fr)
      minmax(0,1.28fr);

    gap: 72px;
  }



  /* KONTAKT */

  


  

}



/* =========================================
   DESKTOP — 1200+
   ========================================= */

@media (min-width: 1200px) {
/* HERO */

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



  /* SPLIT */

  .prosectorium-split {
    gap: 120px;
  }



  /* TANATOKOSMETYKA */

  .prosectorium-cosmetics__grid {
    grid-template-columns:
      minmax(0,1.12fr)
      minmax(380px,.88fr);

    gap: 100px;
  }



  /* ZAKRES */

  .prosectorium-scope__items {
    grid-template-columns:
      repeat(4,minmax(0,1fr));

    gap: 46px;
  }



  /* TANATOPRAKSJA */

  .prosectorium-thanato__grid {
    gap: 120px;
  }



  /* VIDEO */

  .prosectorium-video__grid {
    grid-template-columns:
      minmax(0,.9fr)
      390px;

    gap: 105px;
  }



  /* ZAPLECZE */

  .prosectorium-facilities__grid {
    gap: 120px;
  }



  /* KONTAKT */

  


  


  

}



/* =========================================
   HOVER
   ========================================= */

@media (hover:hover) {


  .prosectorium-page .text-link,
  .prosectorium-video__poster {
    transition:
      color .16s ease,
      transform .16s ease;
  }


  .prosectorium-page .text-link:hover {
    color: var(--color-gold);
  }


  .prosectorium-video__poster:hover
  .prosectorium-video__play {
    border-color:
      rgba(255,254,250,.95);

    background:
      rgba(161,135,80,.25);
  }

}



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

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

  .prosectorium-page *,
  .prosectorium-page *::before,
  .prosectorium-page *::after {
    transition: none !important;
  }

}