/* ===== Strona główna – style własne ===== */

#home-main {
  overflow: clip;
}

/* ===== Hero ===== */
.home-hero {
  padding-block: var(--space-9);
}

.home-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: var(--space-7);
  align-items: center;
}

.home-hero__text {
  min-width: 0;
}

.home-hero__text h1 {
  max-width: 520px;
  margin-block-end: var(--space-5);
}

.home-hero__subheading {
  max-width: 480px;
  margin-block-end: var(--space-6);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.home-hero__cta {
  flex-shrink: 0;
}

.home-hero__media {
  min-width: 0;
}

.home-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-small);
}

/* ===== Pierwsze danie ===== */
.home-first {
  padding-block: var(--space-9);
}

.home-first__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

.home-first__text {
  min-width: 0;
}

.home-first__text h2 {
  margin-block-end: var(--space-5);
}

.home-first__text p {
  max-width: 560px;
  margin-block-end: var(--space-5);
}

.home-first__tags {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.home-first__tags li {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  color: var(--color-burgund);
  letter-spacing: 0.02em;
}

.home-first__cta {
  margin-block-start: var(--space-4);
}

.home-first__media {
  min-width: 0;
}

.home-first__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-small);
}

/* ===== Stół się wydłuża ===== */
.home-moments {
  padding-block: var(--space-9);
}

.home-moments__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.home-moments h2 {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: 0;
}

.home-moments__track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.home-moment {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.home-moment__label {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  color: var(--color-burgund);
  line-height: 1.3;
}

.home-moment p {
  margin: 0;
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
}

/* ===== Kuchnia ===== */
.home-kitchen {
  padding-block: var(--space-9);
}

.home-kitchen__inner {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: var(--space-7);
  align-items: start;
}

.home-kitchen__heading {
  min-width: 0;
}

.home-kitchen__heading h2 {
  max-width: 480px;
  margin-block-end: 0;
}

.home-kitchen__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  min-width: 0;
}

.home-kitchen-step {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.home-kitchen-step__visual {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-small);
  object-fit: cover;
  display: block;
}

.home-kitchen-step figcaption {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ===== Wieczór przy stole ===== */
.home-evening {
  padding-block: var(--space-9);
}

.home-evening__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.home-evening h2 {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: 0;
}

.home-evening__media {
  width: 100%;
  border-radius: var(--radius-small);
  overflow: hidden;
}

.home-evening__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.home-evening__description {
  max-width: 100%;
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ===== Zmiana powierzchni ===== */
.home-transition {
  padding-block: var(--space-9);
  background-color: var(--color-surface-alt);
}

.home-transition__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.home-transition h2 {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: 0;
}

.home-transition__description {
  max-width: 720px;
  margin-block-start: 0;
  margin-block-end: 0;
}

.home-transition__sequence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  min-height: 400px;
}

.home-transition-step {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--space-5);
  border-radius: var(--radius-small);
  min-width: 0;
  color: var(--color-text-on-dark);
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  background-size: cover;
  background-position: center;
}

.home-transition-step--wood {
  background-image: linear-gradient(180deg, rgba(46, 46, 46, 0.08), rgba(46, 46, 46, 0.78)), url("/src/media/kuchnia-stol-degustacyjny.webp");
}

.home-transition-step--card {
  background-image: linear-gradient(180deg, rgba(46, 46, 46, 0.08), rgba(46, 46, 46, 0.78)), url("/src/media/kuchnia-poker-przekaski.webp");
}

.home-transition-step--deck {
  background-image: linear-gradient(180deg, rgba(46, 46, 46, 0.08), rgba(46, 46, 46, 0.78)), url("/src/media/poker-table-detail.webp");
}

.home-transition-step--poker {
  background-image: linear-gradient(180deg, rgba(46, 46, 46, 0.08), rgba(46, 46, 46, 0.78)), url("/src/media/stol-pokerowy-hero.webp");
}

/* ===== Prawdziwy poker stacjonarny ===== */
.home-poker {
  padding-block: var(--space-9);
  background-color: var(--color-grafit);
  color: var(--color-text-on-dark);
}

.home-poker__inner {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: var(--space-7);
  align-items: center;
}

.home-poker__text {
  min-width: 0;
}

.home-poker__text h1 {
  color: var(--color-krem);
  max-width: 520px;
  margin-block-end: var(--space-5);
}

.home-poker__text p {
  max-width: 480px;
  margin-block-end: var(--space-6);
  color: var(--color-text-on-dark);
}

.home-poker__cta {
  margin-block-start: var(--space-4);
}

.home-poker__media {
  min-width: 0;
}

.home-poker__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-small);
}

/* ===== Przy fizycznym stole ===== */
.home-physical {
  padding-block: var(--space-9);
  background-color: var(--color-grafit);
  color: var(--color-text-on-dark);
}

.home-physical__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.home-physical h2 {
  color: var(--color-krem);
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: 0;
}

.home-physical__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

.home-physical__table {
  width: min(100%, 600px);
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-small);
  object-fit: cover;
  display: block;
  justify-self: center;
}

.home-physical__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.home-physical__points li {
  background-color: rgba(247, 242, 233, 0.05);
  border: 1px solid rgba(247, 242, 233, 0.12);
  border-radius: var(--radius-small);
  padding: var(--space-4);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  color: var(--color-text-on-dark);
}

.home-physical__points strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  color: var(--color-krem);
  margin-block-end: var(--space-2);
}

/* ===== Restauracja powraca ===== */
.home-return {
  padding-block: var(--space-9);
  background-color: var(--color-krem);
}

.home-return__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.home-return h2 {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: 0;
}

.home-return__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: start;
  justify-content: center;
}

.home-return-item {
  max-width: 240px;
  justify-self: center;
  text-align: left;
}

.home-return-item h3 {
  margin-block-end: var(--space-3);
}

.home-return-item p {
  margin-block-end: 0;
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
}

/* ===== Galeria wieczoru ===== */
.home-gallery {
  padding-block: var(--space-9);
}

.home-gallery__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.home-gallery h2 {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: 0;
}

.home-gallery__description {
  max-width: 720px;
  margin-block-start: 0;
  margin-block-end: 0;
}

.home-gallery__sequence {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.home-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-small);
  min-height: 160px;
  margin: 0;
  min-width: 0;
  grid-column: span 3;
}

.home-gallery-item img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.home-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(25, 24, 22, 0.82));
  pointer-events: none;
}

.home-gallery-item figcaption {
  position: absolute;
  z-index: 1;
  inset-inline: var(--space-4);
  inset-block-end: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-small-size);
  color: var(--color-text-on-dark);
}

.home-gallery-item:hover img {
  transform: scale(1.035);
}

.home-gallery-item--wide {
  grid-column: span 4;
}

/* ===== Rezerwacja ===== */
.home-reservation {
  padding-block: var(--space-9);
}

.home-reservation__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: center;
}

.home-reservation h1 {
  max-width: 600px;
  text-align: center;
  margin-inline: auto;
  margin-block-end: 0;
}

.home-reservation__intro {
  max-width: 720px;
  text-align: center;
  margin-inline: auto;
  margin-block-start: 0;
  margin-block-end: 0;
}

.home-reservation__card {
  width: min(100%, 720px);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

.home-reservation__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.home-reservation__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.home-reservation__grid .form-field {
  margin-block-end: 0;
  min-width: 0;
}

.home-reservation__grid .form-field--full {
  grid-column: 1 / -1;
}

.home-reservation__submit {
  margin-block-start: var(--space-4);
}

.home-reservation__success {
  color: var(--color-oliwka);
  font-weight: 500;
  margin-block-start: var(--space-3);
}

.home-reservation__contact {
  width: min(100%, 720px);
  margin-block-start: var(--space-4);
}

.home-reservation__contact p {
  margin-block-end: 0;
}

.home-reservation__contact a {
  color: var(--color-link);
}

.home-reservation__contact a:hover {
  color: var(--color-link-hover);
}

/* ===== Responsywność ===== */
@media (max-width: 1024px) {
  .home-hero__inner,
  .home-first__inner,
  .home-poker__inner {
    gap: var(--space-6);
  }

  .home-kitchen__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .home-kitchen__heading h2 {
    max-width: 600px;
  }

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

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

  .home-gallery-item {
    grid-column: span 4;
  }

  .home-gallery-item--wide {
    grid-column: span 6;
  }
}

@media (max-width: 768px) {
  .home-hero,
  .home-first,
  .home-moments,
  .home-kitchen,
  .home-evening,
  .home-transition,
  .home-poker,
  .home-physical,
  .home-return,
  .home-gallery,
  .home-reservation {
    padding-block: var(--space-7);
  }

  .home-hero__inner,
  .home-first__inner,
  .home-poker__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .home-hero__text h1 {
    max-width: 100%;
  }

  .home-hero__subheading,
  .home-first__text p,
  .home-poker__text p {
    max-width: 100%;
  }

  .home-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .home-hero__cta,
  .home-first__cta,
  .home-poker__cta {
    width: 100%;
  }

  .home-first__tags {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .home-moments__track {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-kitchen__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-transition__sequence {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }

  .home-transition-step {
    min-height: 180px;
  }

  .home-physical__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .home-physical__table {
    width: min(100%, 400px);
    justify-self: center;
  }

  .home-return__items {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .home-return-item {
    max-width: 100%;
    justify-self: stretch;
  }

  .home-gallery__sequence {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-gallery-item,
  .home-gallery-item--wide {
    grid-column: auto;
    min-height: 120px;
  }

  .home-reservation__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-reservation__grid .form-field--full {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  .home-hero__text h1 {
    font-size: var(--text-h1-size);
  }

  .home-hero__subheading,
  .home-first__text p,
  .home-poker__text p,
  .home-transition__description,
  .home-gallery__description,
  .home-reservation__intro {
    font-size: var(--text-body-size);
  }

  .home-moment {
    padding: var(--space-4);
  }

  .home-reservation__card {
    padding: var(--space-4);
  }
}