/* =========================================================
   KATALOG — WARMIŃSKI ZAKŁAD POGRZEBOWY
   Mobile first
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

/* =========================================================
   PREHEADER
   ========================================================= */


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


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

.catalog-hero {
  padding: 22px 0 68px;

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


.catalog-hero__content {
  max-width: 920px;
}


.catalog-hero h1 {
  max-width: 12ch;

  margin: 0;

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


.catalog-hero__lead {
  max-width:48ch;
}


/* =========================================================
   NAWIGACJA KATALOGU
   ========================================================= */

.catalog-nav {
  display: grid;

  margin-top: 40px;

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


.catalog-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 17px 0;

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

  color: var(--color-green);

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

  text-decoration: none;
}


.catalog-nav a > span:last-child {
  color: var(--color-gold);
}


/* =========================================================
   SEKCJE
   ========================================================= */

.catalog-section {
  scroll-margin-top: 100px;

  padding: 72px 0 78px;
}


.catalog-section--white {
  background: var(--color-white);
}


.catalog-section--surface {
  background: var(--color-surface);
}


/* =========================================================
   NAGŁÓWEK SEKCJI
   ========================================================= */

.catalog-section__header {
  max-width: 720px;

  margin-bottom: 38px;
}


.catalog-section__header h2 {
  max-width: 14ch;
}


.catalog-section__header > p:last-child {
  max-width: 49ch;

  margin: 20px 0 0;

  color: var(--color-muted);

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


/* =========================================================
   GRID

   MOBILE:
   jedna kolumna

   Zdjęcia na mobile są rozszerzane do pełnej szerokości
   viewportu przez wspólny assets/css/subpages.css.
   ========================================================= */

.catalog-grid {
  display: grid;

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

  gap: 38px;
}


/* =========================================================
   ITEM
   ========================================================= */

.catalog-item {
  min-width: 0;

  margin: 0;
  padding: 0;
}


/* =========================================================
   BUTTON / IMAGE

   KLUCZOWE:
   - brak fixed height
   - brak aspect-ratio
   - brak object-fit: cover
   - brak cropowania
   ========================================================= */

.catalog-item__button {
  position: relative;

  display: block;

  width: 100%;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  color: inherit;

  text-align: left;

  cursor: zoom-in;
}


.catalog-item__button img {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;

  border: 0;
}


/* =========================================================
   DOKUMENTY KATALOGOWE
   ========================================================= */

.catalog-grid--documents .catalog-item__button {
  background: var(--color-white);
}


/* =========================================================
   POWIĘKSZ
   ========================================================= */

.catalog-item__zoom {
  position: absolute;

  right: 12px;
  bottom: 12px;

  display: inline-flex;
  align-items: center;

  gap: 8px;

  padding: 9px 12px;

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

  color: var(--color-white);

  font-size: 11px;
  line-height: 1;
  font-weight: 600;

  letter-spacing: .06em;
  text-transform: uppercase;

  pointer-events: none;
}


.catalog-item__zoom span {
  color: var(--color-gold-light);
}


/* =========================================================
   PODPIS
   ========================================================= */

.catalog-item__caption {
  margin-top: 12px;

  color: var(--color-green);

  font-family: Lora, Georgia, serif;

  font-size: 18px;
  line-height: 1.35;
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.catalog-lightbox {
  position: fixed;

  inset: 0;

  z-index: 99999;

  display: none;

  background:
    rgba(5, 20, 17, .97);

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


.catalog-lightbox.is-open {
  display: block;
}


/* =========================================================
   LIGHTBOX STAGE

   Na mobile zostawiamy miejsce na zamknięcie,
   licznik i nawigację.
   ========================================================= */

.catalog-lightbox__stage {
  position: absolute;

  inset:
    58px
    20px
    64px;

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

  overflow: auto;

  overscroll-behavior: contain;

  -webkit-overflow-scrolling: touch;
}


/* =========================================================
   DUŻY OBRAZ

   Nadal nie przycinamy.
   ========================================================= */

.catalog-lightbox__image {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 100%;

  margin: auto;

  object-fit: contain;
}


/* =========================================================
   CLOSE
   ========================================================= */

.catalog-lightbox__close {
  position: absolute;

  top: 10px;
  right: 12px;

  z-index: 4;

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

  width: 44px;
  height: 44px;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 50%;

  background: transparent;

  color: var(--color-white);

  font-size: 36px;
  line-height: 1;
  font-weight: 300;

  cursor: pointer;
}


/* =========================================================
   LIGHTBOX NAVIGATION
   ========================================================= */

.catalog-lightbox__nav {
  position: absolute;

  top: 50%;

  z-index: 4;

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

  width: 42px;
  height: 54px;

  margin: 0;
  padding: 0;

  border: 0;

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

  color: var(--color-white);

  font-size: 38px;
  line-height: 1;
  font-weight: 300;

  cursor: pointer;

  transform: translateY(-50%);
}


.catalog-lightbox__nav--prev {
  left: 6px;
}


.catalog-lightbox__nav--next {
  right: 6px;
}


/* =========================================================
   COUNTER
   ========================================================= */

.catalog-lightbox__counter {
  position: absolute;

  right: 20px;
  bottom: 18px;

  margin: 0;

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

  font-size: 12px;
  line-height: 1.3;

  letter-spacing: .06em;
}


/* =========================================================
   BODY LOCK
   ========================================================= */

body.catalog-lightbox-open {
  overflow: hidden;
}


/* =========================================================
   FINAL CTA
   ========================================================= */


.catalog-contact h2 {
  max-width: 13ch;

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


.catalog-contact__copy > p:last-child {
  max-width: 42ch;

  margin: 20px 0 0;

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

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


/* =========================================================
   CTA ACTIONS
   ========================================================= */


/* =========================================================
   ACCESSIBILITY
   ========================================================= */


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

@media (min-width: 768px) {

  .catalog-hero {
    padding:
      40px
      0
      86px;
  }


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


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

    column-gap: 42px;

    max-width: 760px;
  }


  .catalog-section {
    padding:
      88px
      0
      94px;
  }


  .catalog-section__header {
    margin-bottom: 48px;
  }


  .catalog-section__header > p:last-child {
    font-size: 18px;
  }


  /* 3 KOLUMNY */

  .catalog-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    column-gap: 24px;
    row-gap: 46px;
  }


  .catalog-item__caption {
    font-size: 19px;
  }


  .catalog-lightbox__stage {
    inset:
      44px
      78px;
  }


  .catalog-lightbox__nav {
    width: 52px;
    height: 70px;
  }


  .catalog-lightbox__nav--prev {
    left: 14px;
  }


  .catalog-lightbox__nav--next {
    right: 14px;
  }


  


  

}


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

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


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


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

    max-width: none;

    column-gap: 36px;
  }


  .catalog-section {
    padding:
      102px
      0
      108px;
  }


  .catalog-grid {
    column-gap: 30px;
    row-gap: 56px;
  }


  

}


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

@media (hover: hover) {

  .catalog-item__button img {
    transition:
      opacity .20s ease;
  }


  .catalog-item__button:hover img {
    opacity: .94;
  }


  .catalog-nav a {
    transition:
      color .15s ease;
  }


  .catalog-nav a:hover {
    color:
      var(--color-gold);
  }


}


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

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

  .catalog-item__button img,
  .catalog-nav a {
    transition: none;
  }

}