/* Atrakcje page styles — scoped to #atrakcje-main */
#atrakcje-main {
  --atrakcje-gap: 24px;
  --atrakcje-gap-large: 48px;
  --atrakcje-radius: 8px;
  --atrakcje-transition: 0.3s ease;
}

#atrakcje-main .atrakcje-section-line {
  display: block;
  width: 56px;
  height: 2px;
  background-color: var(--color-copper);
  margin-block-end: var(--space-4);
}

#atrakcje-main .atrakcje-section-title {
  margin-block-start: 0;
  margin-block-end: var(--space-5);
}

#atrakcje-main .atrakcje-accent {
  color: var(--color-copper);
}

/* Hero */
.atrakcje-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  background-image: linear-gradient(180deg, rgba(26, 26, 26, 0.45) 0%, rgba(26, 26, 26, 0.82) 100%), url("/public/media/gorskie-aktywnosci.webp");
  background-size: cover;
  background-position: center;
  padding-block: var(--space-9) var(--space-8);
}

.atrakcje-hero__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.atrakcje-hero__content {
  max-width: 600px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.atrakcje-eyebrow {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-copper-light);
  margin-block-end: 0;
}

.atrakcje-hero__title {
  font-size: clamp(2.25rem, 5vw + 1rem, 4rem);
  line-height: var(--leading-display);
  margin-block: 0;
  color: var(--color-white);
}

.atrakcje-hero__subtitle {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-off-white);
  margin-block: 0;
}

.atrakcje-hero__cta {
  margin-block-start: var(--space-2);
}

/* Intro */
.atrakcje-intro {
  background-color: var(--color-obsidian);
}

.atrakcje-intro__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.atrakcje-intro__container .atrakcje-section-line {
  margin-inline: auto;
}

.atrakcje-intro__text {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
  color: var(--color-off-white);
}

/* Kasyno */
.atrakcje-kasyno {
  background-color: var(--color-plum-black);
}

.atrakcje-kasyno__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  grid-template-areas:
    "copy features"
    "media media";
  gap: var(--atrakcje-gap-large);
  align-items: start;
}

.atrakcje-kasyno__copy {
  grid-area: copy;
  min-width: 0;
}

.atrakcje-kasyno__features {
  grid-area: features;
  min-width: 0;
  background-color: var(--surface-card);
  border: 1px solid var(--color-border-copper);
  border-radius: var(--radius-medium);
  padding: var(--space-5);
  box-shadow: var(--shadow-standard);
}

.atrakcje-kasyno__media {
  grid-area: media;
  min-width: 0;
  margin-block: 0;
}

.atrakcje-kasyno__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-medium);
  filter: var(--image-filter);
  transition: transform var(--atrakcje-transition);
}

.atrakcje-kasyno__media img:hover {
  transform: scale(1.02);
}

.atrakcje-kasyno__lead,
.atrakcje-kasyno__note {
  max-width: 600px;
  text-align: left;
  color: var(--color-off-white);
}

.atrakcje-kasyno__note {
  border-inline-start: 3px solid var(--color-felt-green);
  padding-inline-start: var(--space-4);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.atrakcje-features__title {
  margin-block-start: 0;
  margin-block-end: var(--space-4);
  font-size: var(--text-h4);
}

.atrakcje-features__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block: 0;
  padding-inline-start: 0;
}

.atrakcje-features__list li {
  position: relative;
  padding-inline-start: var(--space-5);
  color: var(--color-off-white);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  transition: color var(--atrakcje-transition);
}

.atrakcje-features__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.65em;
  width: 6px;
  height: 6px;
  background-color: var(--color-felt-green);
  border-radius: 50%;
}

.atrakcje-features__list li:hover {
  color: var(--color-copper-light);
}

/* Wellness */
.atrakcje-wellness {
  background-color: var(--color-obsidian);
}

.atrakcje-wellness__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--atrakcje-gap-large);
  align-items: center;
}

.atrakcje-wellness__copy {
  min-width: 0;
}

.atrakcje-wellness__media {
  min-width: 0;
  margin-block: 0;
}

.atrakcje-wellness__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-medium);
  filter: var(--image-filter);
  transition: transform var(--atrakcje-transition);
}

.atrakcje-wellness__media img:hover {
  transform: scale(1.02);
}

.atrakcje-wellness__lead {
  max-width: 600px;
  text-align: left;
  color: var(--color-off-white);
}

.atrakcje-wellness__list-title,
.atrakcje-gory__list-title,
.atrakcje-restauracja__list-title,
.atrakcje-wydarzenia__list-title {
  margin-block-start: var(--space-6);
  margin-block-end: var(--space-3);
  font-size: var(--text-h4);
  color: var(--color-copper);
}

.atrakcje-wellness__list,
.atrakcje-gory__list,
.atrakcje-restauracja__list,
.atrakcje-wydarzenia__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block: 0;
  padding-inline-start: 0;
}

.atrakcje-wellness__list li,
.atrakcje-gory__list li,
.atrakcje-restauracja__list li,
.atrakcje-wydarzenia__list li {
  position: relative;
  padding-inline-start: var(--space-5);
  color: var(--color-off-white);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.atrakcje-wellness__list li::before,
.atrakcje-gory__list li::before,
.atrakcje-restauracja__list li::before,
.atrakcje-wydarzenia__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.65em;
  width: 6px;
  height: 6px;
  background-color: var(--color-copper);
  border-radius: 50%;
}

/* Góry */
.atrakcje-gory {
  background-color: var(--color-plum-black);
}

.atrakcje-gory__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--atrakcje-gap-large);
  align-items: center;
}

.atrakcje-gory__media {
  min-width: 0;
  margin-block: 0;
}

.atrakcje-gory__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-medium);
  filter: var(--image-filter);
  transition: transform var(--atrakcje-transition);
}

.atrakcje-gory__media img:hover {
  transform: scale(1.02);
}

.atrakcje-gory__copy {
  min-width: 0;
}

.atrakcje-gory__lead {
  max-width: 600px;
  text-align: left;
  color: var(--color-off-white);
}

/* Restauracja */
.atrakcje-restauracja {
  background-color: var(--color-obsidian);
}

.atrakcje-restauracja__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.atrakcje-restauracja__container .atrakcje-section-line {
  margin-inline: auto;
}

.atrakcje-restauracja__lead {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
  color: var(--color-off-white);
}

.atrakcje-restauracja__list {
  max-width: 700px;
  margin-inline: auto;
  text-align: left;
}

/* Wydarzenia */
.atrakcje-wydarzenia {
  background-color: var(--color-plum-black);
}

.atrakcje-wydarzenia__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.atrakcje-wydarzenia__container .atrakcje-section-line {
  margin-inline: auto;
}

.atrakcje-wydarzenia__lead {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
  color: var(--color-off-white);
}

.atrakcje-wydarzenia__list {
  max-width: 700px;
  margin-inline: auto;
  text-align: left;
}

/* Opinie */
.atrakcje-opinie {
  background-color: var(--color-obsidian);
}

.atrakcje-opinie__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.atrakcje-opinie__container .atrakcje-section-line {
  margin-inline: auto;
}

.atrakcje-opinie__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--atrakcje-gap-large);
  margin-block-start: var(--space-6);
}

.atrakcje-opinie__card {
  min-width: 0;
  background-color: var(--surface-card);
  border: 1px solid var(--color-border-copper);
  border-radius: var(--radius-medium);
  padding: var(--space-6);
  box-shadow: var(--shadow-standard);
  text-align: left;
  transition: transform var(--atrakcje-transition), box-shadow var(--atrakcje-transition);
}

.atrakcje-opinie__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

.atrakcje-opinie__quote {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  color: var(--color-copper-light);
  border-inline-start: 3px solid var(--color-copper);
  padding-inline-start: var(--space-4);
  margin-block: 0;
}

.atrakcje-opinie__author {
  margin-block-start: var(--space-4);
  margin-block-end: 0;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-copper);
}

/* CTA */
.atrakcje-cta {
  background-color: var(--color-copper);
  padding-block: var(--space-8);
}

.atrakcje-cta__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}

.atrakcje-cta__title {
  max-width: 600px;
  margin-block: 0;
  color: var(--color-obsidian);
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  line-height: var(--leading-h2);
}

.atrakcje-cta__btn {
  background-color: var(--color-obsidian);
  color: var(--color-copper-light);
  border-color: var(--color-obsidian);
}

.atrakcje-cta__btn:hover {
  background-color: var(--color-plum-black);
  color: var(--color-white);
  border-color: var(--color-plum-black);
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .atrakcje-hero {
    min-height: 540px;
  }

  .atrakcje-hero__inner {
    padding-inline: var(--container-padding-desktop);
  }

  .atrakcje-kasyno__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "features"
      "media";
  }

  .atrakcje-wellness__grid,
  .atrakcje-gory__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .atrakcje-wellness__media,
  .atrakcje-gory__media {
    order: -1;
  }

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

/* Mobile */
@media (max-width: 767px) {
  .atrakcje-hero {
    min-height: 680px;
    padding-block: var(--space-7) var(--space-6);
  }

  .atrakcje-hero__inner {
    padding-inline: var(--container-padding-mobile);
  }

  .atrakcje-hero__content {
    max-width: 100%;
    text-align: center;
    align-items: center;
  }

  .atrakcje-hero__title {
    font-size: clamp(2rem, 8vw + 0.5rem, 2.75rem);
  }

  .atrakcje-hero__subtitle {
    font-size: var(--text-body);
  }

  .atrakcje-intro__text,
  .atrakcje-restauracja__lead,
  .atrakcje-wydarzenia__lead {
    max-width: 100%;
  }

  .atrakcje-kasyno__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "features"
      "media";
    gap: var(--atrakcje-gap);
  }

  .atrakcje-kasyno__lead,
  .atrakcje-kasyno__note,
  .atrakcje-wellness__lead,
  .atrakcje-gory__lead {
    max-width: 100%;
  }

  .atrakcje-wellness__grid,
  .atrakcje-gory__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--atrakcje-gap);
  }

  .atrakcje-wellness__media,
  .atrakcje-gory__media {
    order: -1;
  }

  .atrakcje-opinie__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--atrakcje-gap);
  }

  .atrakcje-opinie__card {
    padding: var(--space-5);
  }

  .atrakcje-cta {
    padding-block: var(--space-7);
  }
}

@media (prefers-reduced-motion: reduce) {
  #atrakcje-main *,
  #atrakcje-main *::before,
  #atrakcje-main *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* mobile-photo-center */
@media (max-width: 56.25rem) {
  img,
  video {
    object-position: center !important;
  }

  .image-frame,
  .media-frame,
  .card__media,
  [class*='__media'] {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    justify-self: stretch;
    overflow: hidden;
  }

  .image-frame img,
  .media-frame img,
  .media-frame video,
  .card__media img,
  [class*='__media'] img,
  [class*='hero'] img,
  [class*='hero__image'] {
    width: 100%;
    height: 100%;
    max-width: none;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center !important;
  }
}