/* Przy Stole page styles */

.przy-stole-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-gleboki-grafit);
  color: var(--color-kremowy-tekst-na-ciemnym);
}

.przy-stole-hero__media {
  width: 100%;
  min-width: 0;
}

.przy-stole-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.przy-stole-hero__content {
  width: 100%;
  min-width: 0;
  padding: var(--space-2xl) var(--container-margin-mobile);
  background: linear-gradient(to top, var(--color-gleboki-grafit) 0%, rgba(35, 38, 43, 0.85) 60%, rgba(35, 38, 43, 0.4) 100%);
}

.przy-stole-hero__text {
  max-width: 760px;
  margin-inline: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.przy-stole-hero__text h1 {
  margin-block-end: 0;
  color: var(--color-kremowy-tekst-na-ciemnym);
}

.przy-stole-hero__text p {
  margin-block-end: 0;
  color: var(--color-kremowy-tekst-na-ciemnym);
}

.przy-stole-hero__text .btn {
  align-self: flex-start;
}

@media (min-width: 768px) {
  .przy-stole-hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 70vh;
  }

  .przy-stole-hero__media {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 1;
  }

  .przy-stole-hero__media img {
    height: 70vh;
    object-fit: cover;
  }

  .przy-stole-hero__content {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 2;
    align-self: end;
    background: linear-gradient(to top, var(--color-gleboki-grafit) 0%, rgba(35, 38, 43, 0.55) 55%, rgba(35, 38, 43, 0) 100%);
    padding: var(--space-3xl) var(--container-margin-desktop) var(--space-2xl);
  }

  .przy-stole-hero__text {
    margin-inline: 0;
  }
}

@media (max-width: 767px) {
  .przy-stole-hero__media img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  .przy-stole-hero__content {
    padding: var(--space-xl) var(--container-margin-mobile);
  }

  .przy-stole-hero__text .btn {
    align-self: stretch;
    text-align: center;
  }
}

/* Rytuał kolacji */
.przy-stole-rytual {
  background-color: var(--surface-page);
  padding-block: var(--space-3xl);
}

.przy-stole-rytual__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-margin-mobile);
}

.przy-stole-rytual__heading {
  margin-block-end: var(--space-xl);
}

.przy-stole-rytual__heading h2 {
  color: var(--color-przygaszona-cegla);
  margin-block-end: 0;
}

.przy-stole-rytual__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

.przy-stole-rytual__card {
  background-color: var(--surface-secondary);
  border: var(--border-light);
  border-radius: var(--radius-card);
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  min-width: 0;
  transition: background-color 240ms ease;
}

.przy-stole-rytual__card:hover {
  background-color: #f0e8da;
}

.przy-stole-rytual__card .badge {
  align-self: flex-start;
}

.przy-stole-rytual__card h3 {
  margin-block-end: 0;
}

.przy-stole-rytual__card p {
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .przy-stole-rytual {
    padding-block: var(--space-3xl);
  }

  .przy-stole-rytual__inner {
    padding-inline: var(--container-margin-desktop);
  }

  .przy-stole-rytual__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m);
  }
}

@media (max-width: 767px) {
  .przy-stole-rytual {
    padding-block: var(--space-2xl);
  }
}

/* Stół jako miejsce spotkania */
.przy-stole-spotkanie {
  background-color: var(--surface-secondary);
  padding-block: var(--space-3xl);
}

.przy-stole-spotkanie__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-margin-mobile);
}

.przy-stole-spotkanie__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  margin-block-end: var(--space-xl);
}

.przy-stole-spotkanie__text {
  min-width: 0;
}

.przy-stole-spotkanie__text h2 {
  color: var(--color-przygaszona-cegla);
}

.przy-stole-spotkanie__media {
  min-width: 0;
}

.przy-stole-spotkanie__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card);
}

.przy-stole-spotkanie__quote {
  max-width: 760px;
  margin-inline: 0;
  border-inline-start: 1px solid var(--color-miodowy-bez);
  padding-inline-start: var(--space-l);
  color: var(--color-przygaszona-cegla);
  font-style: italic;
  margin-block-end: 0;
}

.przy-stole-spotkanie__quote p {
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .przy-stole-spotkanie {
    padding-block: var(--space-3xl);
  }

  .przy-stole-spotkanie__inner {
    padding-inline: var(--container-margin-desktop);
  }

  .przy-stole-spotkanie__grid {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-xl);
  }

  .przy-stole-spotkanie__text {
    max-width: 560px;
  }

  .przy-stole-spotkanie__media img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

@media (max-width: 767px) {
  .przy-stole-spotkanie {
    padding-block: var(--space-2xl);
  }

  .przy-stole-spotkanie__media img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

/* Zmiana światła */
.przy-stole-zmiana {
  background-color: var(--surface-dark);
  color: var(--color-kremowy-tekst-na-ciemnym);
  padding-block: var(--space-3xl);
}

.przy-stole-zmiana__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-margin-mobile);
}

.przy-stole-zmiana__inner h2 {
  color: var(--color-kremowy-tekst-na-ciemnym);
  max-width: 760px;
  margin-inline: auto;
  text-align: left;
}

.przy-stole-zmiana__inner > p {
  max-width: 760px;
  margin-inline: auto;
  text-align: left;
  margin-block-end: var(--space-xl);
}

.przy-stole-zmiana__list-wrapper {
  max-width: 760px;
  margin-inline: auto;
}

.przy-stole-zmiana__list-wrapper h3 {
  color: var(--color-kremowy-tekst-na-ciemnym);
}

.przy-stole-zmiana__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  padding-inline-start: var(--space-l);
  margin-block-end: 0;
}

.przy-stole-zmiana__list li {
  min-width: 0;
}

@media (min-width: 768px) {
  .przy-stole-zmiana {
    padding-block: var(--space-3xl);
  }

  .przy-stole-zmiana__inner {
    padding-inline: var(--container-margin-desktop);
  }

  .przy-stole-zmiana__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-s) var(--space-l);
  }
}

@media (max-width: 767px) {
  .przy-stole-zmiana {
    padding-block: var(--space-2xl);
  }
}

/* Przy stołach gier */
.przy-stole-gry {
  background-color: var(--surface-dark);
  color: var(--color-kremowy-tekst-na-ciemnym);
  padding-block: var(--space-3xl);
}

.przy-stole-gry__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-margin-mobile);
}

.przy-stole-gry__heading {
  margin-block-end: var(--space-xl);
}

.przy-stole-gry__heading h2 {
  color: var(--color-kremowy-tekst-na-ciemnym);
  margin-block-end: 0;
}

.przy-stole-gry__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  margin-block-end: var(--space-xl);
}

.przy-stole-gry__card {
  background-color: var(--surface-dark-soft);
  border: var(--border-dark);
  border-radius: var(--radius-card);
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  min-width: 0;
  transition: background-color 240ms ease;
}

.przy-stole-gry__card:hover {
  background-color: #3d4249;
}

.przy-stole-gry__card h3 {
  margin-block-end: 0;
  color: var(--color-kremowy-tekst-na-ciemnym);
}

.przy-stole-gry__card p {
  margin-block-end: 0;
}

.przy-stole-gry__media {
  min-width: 0;
}

.przy-stole-gry__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card);
}

@media (min-width: 768px) {
  .przy-stole-gry {
    padding-block: var(--space-3xl);
  }

  .przy-stole-gry__inner {
    padding-inline: var(--container-margin-desktop);
  }

  .przy-stole-gry__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m);
  }

  .przy-stole-gry__media img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

@media (max-width: 767px) {
  .przy-stole-gry {
    padding-block: var(--space-2xl);
  }

  .przy-stole-gry__media img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
}

/* Odpowiedzialna atmosfera */
.przy-stole-odpowiedzialna {
  background-color: var(--surface-page);
  padding-block: var(--space-3xl);
}

.przy-stole-odpowiedzialna__inner {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--container-margin-mobile);
}

.przy-stole-odpowiedzialna__inner h2 {
  color: var(--color-przygaszona-cegla);
}

.przy-stole-odpowiedzialna__inner h3 {
  color: var(--color-lesna-zielen);
}

.przy-stole-odpowiedzialna__list {
  padding-inline-start: var(--space-l);
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .przy-stole-odpowiedzialna {
    padding-block: var(--space-3xl);
  }

  .przy-stole-odpowiedzialna__inner {
    padding-inline: var(--container-margin-desktop);
  }
}

@media (max-width: 767px) {
  .przy-stole-odpowiedzialna {
    padding-block: var(--space-2xl);
  }
}

/* Rezerwacja stolika */
.przy-stole-rezerwacja {
  background-color: var(--surface-secondary);
  padding-block: var(--space-3xl);
}

.przy-stole-rezerwacja__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-margin-mobile);
}

.przy-stole-rezerwacja__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.przy-stole-rezerwacja__text {
  min-width: 0;
}

.przy-stole-rezerwacja__text h2 {
  color: var(--color-przygaszona-cegla);
}

.przy-stole-rezerwacja__text .btn {
  margin-block-start: var(--space-m);
}

.przy-stole-rezerwacja__contact {
  min-width: 0;
  background-color: var(--surface-page);
  border: var(--border-light);
  border-radius: var(--radius-card);
  padding: var(--space-l);
}

.przy-stole-rezerwacja__contact h3 {
  color: var(--color-lesna-zielen);
}

.przy-stole-rezerwacja__contact p {
  margin-block-end: var(--space-s);
}

.przy-stole-rezerwacja__contact p:last-child {
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .przy-stole-rezerwacja {
    padding-block: var(--space-3xl);
  }

  .przy-stole-rezerwacja__inner {
    padding-inline: var(--container-margin-desktop);
  }

  .przy-stole-rezerwacja__grid {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-xl);
  }

  .przy-stole-rezerwacja__text {
    max-width: 560px;
  }
}

@media (max-width: 767px) {
  .przy-stole-rezerwacja {
    padding-block: var(--space-2xl);
  }
}

/* Doświadczenie czeka */
.przy-stole-doswiadczenie {
  background-color: var(--surface-page);
  padding-block: var(--space-3xl);
}

.przy-stole-doswiadczenie__inner {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--container-margin-mobile);
  text-align: center;
}

.przy-stole-doswiadczenie__inner h2 {
  color: var(--color-przygaszona-cegla);
}

.przy-stole-doswiadczenie__inner p {
  text-align: center;
}

@media (min-width: 768px) {
  .przy-stole-doswiadczenie {
    padding-block: var(--space-3xl);
  }

  .przy-stole-doswiadczenie__inner {
    padding-inline: var(--container-margin-desktop);
  }
}

@media (max-width: 767px) {
  .przy-stole-doswiadczenie {
    padding-block: var(--space-2xl);
  }
}