/* Page-owned styles for O lokalu */

.o-lokalu-page {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Hero */
.hero-o-lokalu {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 75vh;
  width: 100%;
  background-color: var(--color-obsidian);
  overflow: hidden;
}

.hero-o-lokalu__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-o-lokalu__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-o-lokalu__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 11, 13, 0.9) 0%, rgba(10, 11, 13, 0.55) 45%, rgba(10, 11, 13, 0.15) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-o-lokalu__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  padding-block-end: var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: flex-start;
}

.hero-o-lokalu__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
}

.hero-o-lokalu__text h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-crisp-white);
  margin-block-end: 0;
  max-width: 100%;
}

.hero-o-lokalu__accent {
  color: var(--color-champagne-gold);
}

.hero-o-lokalu__subtitle {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
  color: var(--color-soft-silver);
  max-width: 60ch;
  margin-block-end: 0;
  text-align: left;
}

.hero-o-lokalu__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  align-items: stretch;
}

.hero-o-lokalu__actions .btn {
  width: 100%;
  white-space: normal;
  text-align: center;
  justify-content: center;
}

/* Historia i filozofia */
.historia-filozofia {
  background-color: var(--color-obsidian);
  padding-block: var(--space-3xl);
}

.historia-filozofia__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: flex-start;
}

.historia-filozofia h2 {
  color: var(--color-crisp-white);
  margin-block-end: 0;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
}

.historia-filozofia__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
}

.historia-filozofia__lead {
  max-width: 70ch;
  margin-block-end: 0;
  color: var(--color-crisp-white);
  line-height: 1.6;
}

.historia-filozofia__support {
  max-width: 60ch;
  margin-block-end: 0;
  color: var(--color-soft-silver);
  line-height: 1.6;
}

.historia-filozofia__quote {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  line-height: 1.4;
  color: var(--color-champagne-gold);
  border-inline-start: 3px solid var(--color-champagne-gold);
  padding-inline-start: var(--space-lg);
  max-width: 50ch;
  margin-block-end: 0;
}

/* Przestrzeń restauracji */
.przestrzen-restauracji {
  background-color: var(--color-charcoal);
  padding-block: var(--space-3xl);
}

.przestrzen-restauracji__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  align-items: stretch;
}

.przestrzen-restauracji__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
  min-width: 0;
}

.przestrzen-restauracji h2 {
  color: var(--color-crisp-white);
  margin-block-end: 0;
}

.przestrzen-restauracji__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.przestrzen-restauracji__copy p {
  max-width: 70ch;
  margin-block-end: 0;
  color: var(--color-soft-silver);
  line-height: 1.6;
}

.przestrzen-restauracji__features {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.przestrzen-restauracji__features li {
  position: relative;
  padding-inline-start: var(--space-lg);
  color: var(--color-crisp-white);
  line-height: 1.5;
  max-width: 40ch;
}

.przestrzen-restauracji__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-champagne-gold);
}

.przestrzen-restauracji__media {
  width: 100%;
  margin-block-end: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: var(--border-subtle);
}

.przestrzen-restauracji__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Sala gier */
.sala-gier {
  background-color: var(--color-obsidian);
  padding-block: var(--space-3xl);
}

.sala-gier__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  align-items: stretch;
}

.sala-gier__media {
  width: 100%;
  margin-block-end: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: var(--border-subtle);
}

.sala-gier__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.sala-gier__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
  min-width: 0;
}

.sala-gier h2 {
  color: var(--color-crisp-white);
  margin-block-end: 0;
}

.sala-gier__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.sala-gier__copy p {
  max-width: 70ch;
  margin-block-end: 0;
  color: var(--color-soft-silver);
  line-height: 1.6;
}

.sala-gier__games {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.sala-gier__games li {
  position: relative;
  padding-inline-start: var(--space-lg);
  color: var(--color-crisp-white);
  line-height: 1.5;
  max-width: 40ch;
}

.sala-gier__games li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-champagne-gold);
}

/* 100% bez alkoholu */
.bez-alkoholu {
  background-color: var(--color-charcoal);
  padding-block: var(--space-3xl);
}

.bez-alkoholu__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: flex-start;
}

.bez-alkoholu h2 {
  color: var(--color-crisp-white);
  margin-block-end: 0;
}

.bez-alkoholu__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
}

.bez-alkoholu__lead {
  max-width: 70ch;
  margin-block-end: 0;
  color: var(--color-crisp-white);
  line-height: 1.6;
}

.bez-alkoholu__support {
  max-width: 60ch;
  margin-block-end: 0;
  color: var(--color-soft-silver);
  line-height: 1.6;
}

.bez-alkoholu__benefits {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.bez-alkoholu__benefits li {
  position: relative;
  padding-inline-start: var(--space-lg);
  color: var(--color-crisp-white);
  line-height: 1.5;
  max-width: 40ch;
}

.bez-alkoholu__benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-champagne-gold);
}

/* Kuchnia */
.kuchnia {
  background-color: var(--color-obsidian);
  padding-block: var(--space-3xl);
}

.kuchnia__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  align-items: stretch;
}

.kuchnia__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
  min-width: 0;
}

.kuchnia h2 {
  color: var(--color-crisp-white);
  margin-block-end: 0;
}

.kuchnia__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.kuchnia__copy p {
  max-width: 70ch;
  margin-block-end: 0;
  color: var(--color-soft-silver);
  line-height: 1.6;
}

.kuchnia__dishes {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.kuchnia__dishes li {
  position: relative;
  padding-inline-start: var(--space-lg);
  color: var(--color-crisp-white);
  line-height: 1.5;
  max-width: 40ch;
}

.kuchnia__dishes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-champagne-gold);
}

.kuchnia__media {
  width: 100%;
  margin-block-end: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: var(--border-subtle);
}

.kuchnia__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Zespół */
.zespol {
  background-color: var(--color-obsidian);
  padding-block: var(--space-3xl);
}

.zespol__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: flex-start;
}

.zespol h2 {
  color: var(--color-crisp-white);
  margin-block-end: 0;
}

.zespol__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
}

.zespol__lead {
  max-width: 70ch;
  margin-block-end: 0;
  color: var(--color-crisp-white);
  line-height: 1.6;
}

.zespol__support {
  max-width: 60ch;
  margin-block-end: 0;
  color: var(--color-soft-silver);
  line-height: 1.6;
}

.zespol__roles {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.zespol__roles li {
  position: relative;
  padding-inline-start: var(--space-lg);
  color: var(--color-crisp-white);
  line-height: 1.5;
  max-width: 40ch;
}

.zespol__roles li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-champagne-gold);
}

/* Opinie */
.opinie {
  background-color: var(--color-charcoal);
  padding-block: var(--space-3xl);
}

.opinie__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: flex-start;
}

.opinie h2 {
  color: var(--color-crisp-white);
  margin-block-end: 0;
}

.opinie__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
  align-items: stretch;
}

.opinie__quote {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.4;
  color: var(--color-champagne-gold);
  border-inline-start: 3px solid var(--color-champagne-gold);
  padding-inline-start: var(--space-lg);
  margin-block-end: 0;
  max-width: 50ch;
  background-color: var(--color-obsidian);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  border: var(--border-subtle);
  border-inline-start: 3px solid var(--color-champagne-gold);
}

.opinie__quote p {
  margin-block-end: var(--space-md);
  color: var(--color-champagne-gold);
}

.opinie__author {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-soft-silver);
  margin-block-start: var(--space-sm);
}

/* Rezerwacja */
.rezerwacja {
  background-color: var(--color-obsidian);
  padding-block: var(--space-3xl);
}

.rezerwacja__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: flex-start;
}

.rezerwacja h2 {
  color: var(--color-crisp-white);
  margin-block-end: 0;
}

.rezerwacja__text {
  max-width: 60ch;
  margin-block-end: 0;
  color: var(--color-soft-silver);
  line-height: 1.6;
}

.rezerwacja__action {
  width: 100%;
}

.rezerwacja__action .btn {
  width: 100%;
  white-space: normal;
  text-align: center;
  justify-content: center;
}

/* Informacje praktyczne */
.informacje-praktyczne {
  background-color: var(--color-charcoal);
  padding-block: var(--space-3xl);
}

.informacje-praktyczne__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: flex-start;
}

.informacje-praktyczne h2 {
  color: var(--color-crisp-white);
  margin-block-end: 0;
}

.informacje-praktyczne__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
  align-items: stretch;
}

.informacje-praktyczne__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  min-width: 0;
}

.informacje-praktyczne__column h3 {
  color: var(--color-crisp-white);
  margin-block-end: 0;
}

.informacje-praktyczne__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.informacje-praktyczne__list li {
  color: var(--color-soft-silver);
  line-height: 1.5;
  max-width: 40ch;
}

.informacje-praktyczne__list a {
  color: var(--color-champagne-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.informacje-praktyczne__list a:hover {
  color: var(--color-amber-glow);
}

/* Tablet and desktop */
@media (min-width: 768px) {
  .hero-o-lokalu {
    min-height: 80vh;
  }

  .hero-o-lokalu__content {
    padding-inline: var(--container-padding-desktop);
    padding-block-end: var(--space-4xl);
  }

  .hero-o-lokalu__actions {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
  }

  .hero-o-lokalu__actions .btn {
    width: auto;
    flex-shrink: 0;
  }

  .historia-filozofia__inner,
  .bez-alkoholu__inner,
  .zespol__inner,
  .opinie__inner,
  .rezerwacja__inner,
  .informacje-praktyczne__inner {
    padding-inline: var(--container-padding-desktop);
  }

  .przestrzen-restauracji__inner,
  .sala-gier__inner,
  .kuchnia__inner {
    padding-inline: var(--container-padding-desktop);
  }

  .przestrzen-restauracji__features,
  .sala-gier__games,
  .bez-alkoholu__benefits,
  .kuchnia__dishes,
  .zespol__roles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }

  .przestrzen-restauracji__features li,
  .sala-gier__games li,
  .bez-alkoholu__benefits li,
  .kuchnia__dishes li,
  .zespol__roles li {
    max-width: none;
  }

  .opinie__grid {
    display: grid;
    grid-template-columns: 35% 30% 35%;
    gap: var(--space-xl);
    align-items: start;
  }

  .opinie__quote {
    max-width: none;
  }

  .opinie__quote--first {
    grid-column: 1;
    grid-row: 1;
  }

  .opinie__quote--second {
    grid-column: 2;
    grid-row: 1;
    margin-block-start: var(--space-xl);
  }

  .opinie__quote--third {
    grid-column: 3;
    grid-row: 1;
  }

  .informacje-praktyczne__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl);
  }

  .informacje-praktyczne__column {
    width: 100%;
  }

  .rezerwacja__action .btn {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .przestrzen-restauracji__inner {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: var(--space-2xl);
    align-items: center;
  }

  .przestrzen-restauracji__text {
    grid-column: 1;
    grid-row: 1;
  }

  .przestrzen-restauracji__media {
    grid-column: 2;
    grid-row: 1;
  }

  .sala-gier__inner {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: var(--space-2xl);
    align-items: center;
  }

  .sala-gier__media {
    grid-column: 1;
    grid-row: 1;
  }

  .sala-gier__text {
    grid-column: 2;
    grid-row: 1;
  }

  .kuchnia__inner {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: var(--space-2xl);
    align-items: center;
  }

  .kuchnia__text {
    grid-column: 1;
    grid-row: 1;
  }

  .kuchnia__media {
    grid-column: 2;
    grid-row: 1;
  }

  .historia-filozofia__copy {
    display: grid;
    grid-template-columns: 70ch 60ch;
    gap: var(--space-2xl);
    align-items: start;
  }

  .historia-filozofia__lead {
    grid-column: 1;
    grid-row: 1;
  }

  .historia-filozofia__support {
    grid-column: 2;
    grid-row: 1;
  }

  .bez-alkoholu__copy {
    display: grid;
    grid-template-columns: 70ch 60ch;
    gap: var(--space-2xl);
    align-items: start;
  }

  .bez-alkoholu__lead {
    grid-column: 1;
    grid-row: 1;
  }

  .bez-alkoholu__support {
    grid-column: 2;
    grid-row: auto;
  }

  .bez-alkoholu__copy .bez-alkoholu__support:nth-of-type(2) {
    grid-column: 2;
    grid-row: 2;
  }

  .bez-alkoholu__copy .bez-alkoholu__support:nth-of-type(3) {
    grid-column: 2;
    grid-row: 3;
  }

  .bez-alkoholu__copy .bez-alkoholu__support:nth-of-type(4) {
    grid-column: 2;
    grid-row: 4;
  }

  .zespol__copy {
    display: grid;
    grid-template-columns: 70ch 60ch;
    gap: var(--space-2xl);
    align-items: start;
  }

  .zespol__lead {
    grid-column: 1;
    grid-row: 1;
  }

  .zespol__support {
    grid-column: 2;
    grid-row: auto;
  }

  .zespol__copy .zespol__support:nth-of-type(2) {
    grid-column: 2;
    grid-row: 2;
  }

  .zespol__copy .zespol__support:nth-of-type(3) {
    grid-column: 2;
    grid-row: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .o-lokalu-page *,
  .o-lokalu-page *::before,
  .o-lokalu-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
