/* ===== Page-owned styles for Galeria wnętrz ===== */

.galeria-wnetrz-main {
  --tlo-bazowe: #0B0D11;
  --tlo-powierzchni: #13171F;
  --tlo-podniesione: #1E232E;
  --tekst-glowny: #F3F4F6;
  --tekst-wyciszony: #9CA3AF;
  --akcent-akcja: #F97316;
  --akcent-akcja-hover: #EA580C;
  --akcent-informacja: #06B6D4;
  --border-default: 1px solid var(--tlo-podniesione);
  --border-focus: 2px solid var(--akcent-informacja);
  --transition-fast: 150ms ease-out;
  --transition-medium: 200ms ease-out;
  --radius-control: 0.25rem;
  --space-8: 0.5rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;
}

/* ===== Hero ===== */
.hero-wnetrz {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  background-image: url('/src/media/hero-wnetrze.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-block: var(--space-64) var(--space-48);
}

.hero-wnetrz__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--tlo-bazowe);
  opacity: 0.25;
  pointer-events: none;
}

.hero-wnetrz__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  width: 100%;
}

.hero-wnetrz__title {
  font-size: clamp(2rem, 5vw + 1rem, 3rem);
  line-height: 1.1;
  font-weight: 700;
  color: var(--tekst-glowny);
  margin-block-end: 0;
  max-width: 12ch;
}

.hero-wnetrz__lead {
  font-size: var(--text-body-large, 1.125rem);
  line-height: 1.6;
  color: var(--tekst-glowny);
  max-width: 37.5rem;
  margin-block-end: 0;
}

.hero-wnetrz__cta {
  min-width: 12.5rem;
}

/* ===== Filozofia designu ===== */
.filozofia-designu {
  padding-block: var(--space-96) var(--space-64);
}

.filozofia-designu__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: start;
}

.filozofia-designu__text {
  min-width: 0;
}

.filozofia-designu__text h2 {
  margin-block-end: var(--space-24);
}

.filozofia-designu__text p {
  max-width: 37.5rem;
  margin-block-end: var(--space-24);
}

.filozofia-designu__lista {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 37.5rem;
}

.filozofia-designu__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  min-width: 0;
}

.filozofia-designu__ikona {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-block-start: 0.2rem;
  background-color: var(--akcent-informacja);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.filozofia-designu__media {
  margin-block-end: 0;
  width: 100%;
}

.filozofia-designu__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: brightness(0.85);
}

/* ===== Strefy wnętrz ===== */
.strefy-wnetrz {
  padding-block: var(--space-64);
}

.strefy-wnetrz h2 {
  margin-block-end: var(--space-32);
}

.strefy-wnetrz__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

.strefa-karta {
  background-color: var(--tlo-powierzchni);
  border: var(--border-default);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
  transition: background-color var(--transition-fast);
}

.strefa-karta:hover {
  background-color: var(--tlo-podniesione);
}

.strefa-karta__ikona {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--akcent-informacja);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.strefa-karta h3 {
  margin-block-end: 0;
  color: var(--tekst-glowny);
}

.strefa-karta p {
  margin-block-end: 0;
  color: var(--tekst-glowny);
}

.strefa-karta ul {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.strefa-karta li {
  color: var(--tekst-wyciszony);
  font-size: 0.9375rem;
  line-height: 1.5;
  position: relative;
  padding-inline-start: var(--space-16);
}

.strefa-karta li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--akcent-informacja);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* ===== Galeria zdjęć ===== */
.galeria-zdjec {
  padding-block: var(--space-64);
}

.galeria-zdjec h2 {
  margin-block-end: var(--space-32);
}

.galeria-zdjec__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

.galeria-zdjec__item {
  margin-block-end: 0;
  min-width: 0;
}

.galeria-zdjec__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: brightness(0.85);
}

.galeria-zdjec__item figcaption {
  margin-block-start: var(--space-8);
  font-size: 0.8125rem;
  color: var(--tekst-wyciszony);
  line-height: 1.4;
}

/* ===== Detale, które tworzą klimat ===== */
.detale-klimat {
  padding-block: var(--space-64);
}

.detale-klimat__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: start;
}

.detale-klimat__media {
  margin-block-end: 0;
  width: 100%;
}

.detale-klimat__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: brightness(0.85);
}

.detale-klimat__text {
  min-width: 0;
}

.detale-klimat__text h2 {
  margin-block-end: var(--space-16);
}

.detale-klimat__text > p {
  max-width: 37.5rem;
  margin-block-end: var(--space-16);
}

.detale-klimat__lista {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 37.5rem;
}

.detale-klimat__lista li {
  position: relative;
  padding-inline-start: var(--space-24);
  color: var(--tekst-glowny);
  line-height: 1.6;
}

.detale-klimat__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--akcent-informacja);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* ===== Atmosfera wieczoru ===== */
.atmosfera-wieczoru {
  padding-block: var(--space-64);
}

.atmosfera-wieczoru__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: start;
}

.atmosfera-wieczoru__text {
  min-width: 0;
}

.atmosfera-wieczoru__text h2 {
  margin-block-end: var(--space-24);
}

.atmosfera-wieczoru__text p {
  max-width: 31.25rem;
  margin-block-end: var(--space-16);
}

.atmosfera-wieczoru__wyroznienie {
  font-weight: 600;
  color: var(--akcent-informacja);
}

.atmosfera-wieczoru__media {
  margin-block-end: 0;
  width: 100%;
}

.atmosfera-wieczoru__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: brightness(0.85);
}

/* ===== FAQ ===== */
.faq-wnetrz {
  padding-block: var(--space-64);
}

.faq-wnetrz__container {
  max-width: 43.75rem;
}

.faq-wnetrz h2 {
  margin-block-end: var(--space-32);
}

.faq-wnetrz__akordeon {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.faq-wnetrz__pozycja {
  background-color: var(--tlo-powierzchni);
  border: var(--border-default);
}

.faq-wnetrz__pytanie {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  background: none;
  border: none;
  color: var(--tekst-glowny);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  min-height: 3rem;
  transition: background-color var(--transition-fast);
}

.faq-wnetrz__pytanie:hover {
  background-color: var(--tlo-podniesione);
}

.faq-wnetrz__pytanie:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
}

.faq-wnetrz__ikona {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
  transition: transform var(--transition-medium);
}

.faq-wnetrz__ikona::before,
.faq-wnetrz__ikona::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--akcent-informacja);
  transition: transform var(--transition-medium);
}

.faq-wnetrz__ikona::before {
  width: 1.25rem;
  height: 2px;
}

.faq-wnetrz__ikona::after {
  width: 2px;
  height: 1.25rem;
}

.faq-wnetrz__pozycja[data-otwarta="true"] .faq-wnetrz__ikona::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.faq-wnetrz__odpowiedz {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-medium);
}

.faq-wnetrz__odpowiedz > p {
  overflow: hidden;
  margin-block-end: 0;
  padding-inline: var(--space-24);
  color: var(--tekst-wyciszony);
  line-height: 1.6;
}

.faq-wnetrz__pozycja[data-otwarta="true"] .faq-wnetrz__odpowiedz {
  grid-template-rows: 1fr;
}

.faq-wnetrz__pozycja[data-otwarta="true"] .faq-wnetrz__odpowiedz > p {
  padding-block-end: var(--space-16);
}

/* ===== Finalne CTA ===== */
.finalne-cta {
  background-color: var(--tlo-podniesione);
  padding-block: var(--space-64);
}

.finalne-cta__container {
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}

.finalne-cta h2 {
  margin-block-end: 0;
  color: var(--tekst-glowny);
  font-size: clamp(1.375rem, 3vw + 0.5rem, 1.75rem);
}

.finalne-cta__przycisk {
  min-width: 12.5rem;
}

/* ===== Responsive ===== */
@media (min-width: 48rem) {
  .hero-wnetrz {
    min-height: 70vh;
    padding-block: var(--space-96) var(--space-64);
  }

  .filozofia-designu__grid {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-48);
  }

  .strefy-wnetrz__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-24);
  }

  .galeria-zdjec__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
  }

  .detale-klimat__grid {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-48);
  }

  .atmosfera-wieczoru__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-48);
  }
}

@media (min-width: 64rem) {
  .hero-wnetrz__title {
    max-width: 14ch;
  }

  .hero-wnetrz__lead {
    max-width: 37.5rem;
  }

  .filozofia-designu__grid {
    gap: var(--space-64);
  }

  .strefy-wnetrz__grid {
    gap: var(--space-32);
  }

  .galeria-zdjec__grid {
    gap: var(--space-24);
  }

  .detale-klimat__grid {
    gap: var(--space-64);
  }

  .atmosfera-wieczoru__grid {
    gap: var(--space-64);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-wnetrz__odpowiedz,
  .faq-wnetrz__ikona::before,
  .faq-wnetrz__ikona::after {
    transition: none;
  }
}