/* Restauracje page styles — scoped to page-owned components */

.restaurants-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0;
  background-color: var(--surface-bg);
  overflow: hidden;
  border-radius: 0 0 var(--radius-large) var(--radius-large);
}

.restaurants-hero__media {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 70vh;
  min-height: 420px;
  overflow: hidden;
  background-color: var(--surface-card);
}

.restaurants-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.restaurants-hero__panel {
  grid-column: 1;
  grid-row: 2;
  width: min(50%, 620px);
  margin: -96px 0 0 var(--space-md);
  padding: var(--space-sm);
  background-color: rgba(245, 242, 236, 0.94);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-lifted);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  position: relative;
  z-index: 2;
}

.restaurants-hero__eyebrow {
  margin: 0;
  color: var(--color-moss-green);
}

.restaurants-hero__title {
  margin: 0;
  font-size: clamp(2rem, 4vw + 0.75rem, 2.5rem);
  line-height: var(--text-h1-line-height);
  font-weight: var(--text-h1-weight);
  color: var(--color-charcoal);
  max-width: 100%;
  overflow-wrap: break-word;
}

.restaurants-hero__subtitle,
.restaurants-hero__lead {
  margin: 0;
  color: var(--color-charcoal-soft);
  max-width: 100%;
  overflow-wrap: break-word;
}

.restaurants-hero__lead {
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-charcoal);
}

.restaurants-section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-bottom: var(--space-md);
  max-width: 720px;
}

.restaurants-section-heading--left {
  margin-left: 0;
  margin-right: auto;
}

.restaurants-section-heading__accent {
  display: block;
  width: 48px;
  height: 3px;
  background-color: var(--color-moss-green);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3xs);
}

.restaurants-section-heading__title {
  margin: 0;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  font-weight: var(--text-h2-weight);
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

.restaurants-section-heading__intro {
  margin: 0;
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-charcoal-soft);
  max-width: 100%;
  overflow-wrap: break-word;
}

.restaurants-types {
  padding-block: var(--space-lg);
  background-color: var(--surface-bg);
}

.restaurants-types__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  width: 100%;
}

.restaurant-type-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  background-color: var(--surface-card);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
  min-width: 0;
  transition: box-shadow var(--transition-calm), transform var(--transition-calm);
}

.restaurant-type-card:hover {
  box-shadow: var(--shadow-lifted);
  transform: translateY(-2px);
}

.restaurant-type-card__title {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--text-h3-weight);
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

.restaurant-type-card__text {
  margin: 0;
  max-width: 90%;
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

.restaurant-type-card__list {
  margin: 0;
  padding-inline-start: var(--space-2xs);
  max-width: 90%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs);
}

.restaurant-type-card__list li {
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

.restaurants-cuisines {
  padding-block: var(--space-lg);
  background-color: var(--surface-card);
}

.restaurants-cuisines__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-sm);
  align-items: start;
  width: 100%;
}

.restaurants-cuisines__media {
  min-width: 0;
  width: 100%;
}

.restaurants-cuisines__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-medium);
}

.restaurants-cuisines__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.restaurants-cuisines__articles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  width: 100%;
}

.cuisine-article {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.cuisine-article__title {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--text-h3-weight);
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

.cuisine-article__text {
  margin: 0;
  max-width: 70%;
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

.restaurants-atmosphere {
  padding-block: var(--space-lg);
  background-color: var(--surface-bg);
}

.restaurants-atmosphere__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  width: 100%;
}

.atmosphere-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xs);
  background-color: transparent;
  border-inline-end: 1px solid var(--surface-border);
}

.atmosphere-column:last-child {
  border-inline-end: none;
}

.atmosphere-column__title {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--text-h3-weight);
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

.atmosphere-column__text {
  margin: 0;
  max-width: 90%;
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

.restaurants-dietary {
  padding-block: var(--space-lg);
  background-color: var(--surface-bg);
}

.restaurants-dietary__panel {
  background-color: var(--surface-elevated);
  border-radius: var(--radius-large);
  padding: var(--space-sm);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.restaurants-dietary__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  width: 100%;
}

.dietary-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.dietary-column__title {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--text-h3-weight);
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

.dietary-column__text {
  margin: 0;
  max-width: 90%;
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

.restaurants-dress-code {
  padding-block: var(--space-lg);
  background-color: var(--surface-bg);
}

.restaurants-dress-code__layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-sm);
  align-items: start;
  width: 100%;
}

.restaurants-dress-code__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.restaurants-dress-code__articles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
  width: 100%;
}

.dress-code-article {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.dress-code-article__title {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--text-h3-weight);
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

.dress-code-article__text {
  margin: 0;
  max-width: 70%;
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

.restaurants-dress-code__media {
  min-width: 0;
  width: 100%;
}

.restaurants-dress-code__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-medium);
}

.restaurants-tips {
  padding-block: var(--space-lg);
  background-color: var(--surface-bg);
}

.restaurants-tips__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  width: 100%;
}

.tip-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xs);
  background-color: var(--surface-card);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.tip-column__title {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--text-h3-weight);
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

.tip-column__text {
  margin: 0;
  max-width: 90%;
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

.restaurants-responsible {
  padding-block: var(--space-lg);
  background-color: var(--surface-bg);
}

.restaurants-responsible__panel {
  width: 80%;
  margin-inline: auto;
  padding: var(--space-sm);
  background-color: var(--surface-card);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  text-align: center;
}

.restaurants-responsible__icon {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-moss-green);
  opacity: 0.8;
  margin-bottom: var(--space-2xs);
}

.restaurants-responsible__title {
  margin: 0;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  font-weight: var(--text-h2-weight);
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

.restaurants-responsible__text {
  margin: 0;
  max-width: 70%;
  color: var(--color-charcoal);
  overflow-wrap: break-word;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .restaurants-hero__panel {
    width: min(60%, 560px);
    margin: -80px 0 0 var(--space-xs);
    padding: var(--space-xs);
  }

  .restaurants-types__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs);
  }

  .restaurants-cuisines__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }

  .restaurants-cuisines__articles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs);
  }

  .restaurants-atmosphere__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs);
  }

  .atmosphere-column {
    border-inline-end: none;
  }

  .restaurants-dietary__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs);
  }

  .restaurants-dress-code__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }

  .restaurants-dress-code__media {
    order: -1;
  }

  .restaurants-dress-code__image {
    aspect-ratio: 16 / 9;
  }

  .restaurants-tips__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs);
  }

  .restaurants-responsible__panel {
    width: 90%;
  }
}

@media (max-width: 767px) {
  .restaurants-hero {
    grid-template-rows: auto auto;
    border-radius: 0 0 var(--radius-medium) var(--radius-medium);
  }

  .restaurants-hero__media {
    height: 50vh;
    min-height: 280px;
  }

  .restaurants-hero__panel {
    grid-row: 2;
    width: calc(100% - 32px);
    margin: -48px 16px 0 16px;
    padding: var(--space-2xs);
    border-radius: var(--radius-medium);
    gap: var(--space-3xs);
  }

  .restaurants-hero__title {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .restaurants-hero__subtitle,
  .restaurants-hero__lead {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
  }

  .restaurants-section-heading {
    margin-bottom: var(--space-sm);
  }

  .restaurants-section-heading__intro {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
  }

  .restaurants-types,
  .restaurants-cuisines,
  .restaurants-atmosphere,
  .restaurants-dietary,
  .restaurants-dress-code,
  .restaurants-tips,
  .restaurants-responsible {
    padding-block: var(--space-sm);
  }

  .restaurants-types__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }

  .restaurant-type-card {
    padding: var(--space-2xs);
  }

  .restaurant-type-card__text,
  .restaurant-type-card__list {
    max-width: 100%;
  }

  .restaurants-cuisines__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }

  .restaurants-cuisines__articles {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }

  .cuisine-article__text {
    max-width: 100%;
  }

  .restaurants-atmosphere__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }

  .atmosphere-column {
    border-inline-end: none;
    padding: 0;
  }

  .atmosphere-column__text {
    max-width: 100%;
  }

  .restaurants-dietary__panel {
    padding: var(--space-2xs);
    border-radius: var(--radius-medium);
  }

  .restaurants-dietary__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }

  .dietary-column__text {
    max-width: 100%;
  }

  .restaurants-dress-code__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }

  .restaurants-dress-code__media {
    order: -1;
  }

  .restaurants-dress-code__image {
    aspect-ratio: 16 / 9;
  }

  .dress-code-article__text {
    max-width: 100%;
  }

  .restaurants-tips__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }

  .tip-column {
    padding: var(--space-2xs);
  }

  .tip-column__text {
    max-width: 100%;
  }

  .restaurants-responsible__panel {
    width: 100%;
    padding: var(--space-xs);
    border-radius: var(--radius-medium);
    align-items: flex-start;
    text-align: left;
  }

  .restaurants-responsible__text {
    max-width: 100%;
  }
}