/* Home page scoped styles */

.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-ink-navy);
}

.hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-gradient);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  color: var(--color-text-on-blue);
}

.hero__stamp {
  background-color: var(--color-sunset-peach);
  color: var(--color-text-on-peach);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--surface-badge-radius);
  box-shadow: var(--surface-card-shadow);
  transform: rotate(-2deg);
}

.hero__content h1 {
  color: var(--color-text-on-blue);
  font-size: var(--text-display-size);
  line-height: var(--text-display-line-height);
  max-width: 40ch;
  margin-block-end: 0;
}

.hero__lead {
  max-width: 40ch;
  font-size: 1.125rem;
  line-height: 1.6;
  margin-block-end: 0;
}

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

.hero__actions > * {
  min-width: 0;
}

.section {
  padding-block: var(--space-xl);
}

.section-heading {
  margin-block-end: var(--space-lg);
}

.section-heading h2 {
  margin-block-end: var(--space-sm);
}

.section-intro {
  max-width: 60ch;
  margin-block-end: 0;
}

.cruise-stories__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.story-card {
  background-color: var(--surface-card-bg);
  border: var(--surface-card-border);
  border-radius: var(--surface-card-radius);
  box-shadow: var(--surface-card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
}

.story-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--surface-card-shadow-hover);
}

.story-card--rotate-left {
  transform: rotate(-1deg);
}

.story-card--rotate-left:hover {
  transform: rotate(-1deg) translateY(-4px);
}

.story-card--rotate-right {
  transform: rotate(1deg);
}

.story-card--rotate-right:hover {
  transform: rotate(1deg) translateY(-4px);
}

.story-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.story-card__content {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.story-card__content h3 {
  margin-block-end: 0;
}

.story-card__content p {
  max-width: 30ch;
  margin-block-end: 0;
  flex: 1;
}

.story-card__content a {
  align-self: flex-start;
  font-weight: 700;
}

.cabins__layout,
.dining__layout,
.entertainment__layout,
.onboard-life__layout,
.casino__layout,
.poker__layout,
.roulette__layout,
.blackjack__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: center;
}

.cabins__text,
.dining__text,
.entertainment__text,
.onboard-life__text,
.casino__text,
.poker__text,
.roulette__text,
.blackjack__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.cabins__text h2,
.dining__text h2,
.entertainment__text h2,
.onboard-life__text h2,
.casino__text h2,
.poker__text h2,
.roulette__text h2,
.blackjack__text h2 {
  margin-block-end: 0;
}

.cabins__text h3,
.dining__text h3,
.entertainment__text h3,
.onboard-life__text h3,
.casino__text h3,
.poker__text h3,
.roulette__text h3,
.blackjack__text h3 {
  margin-block-end: 0;
}

.cabins__text p,
.dining__text p,
.entertainment__text p,
.onboard-life__text p,
.casino__text p,
.poker__text p,
.roulette__text p,
.blackjack__text p {
  max-width: 45ch;
  margin-block-end: 0;
}

.cabins__text .btn,
.dining__text .btn,
.entertainment__text .btn,
.onboard-life__text .btn,
.casino__text .btn,
.poker__text .btn,
.roulette__text .btn,
.blackjack__text .btn {
  align-self: flex-start;
  margin-block-start: var(--space-sm);
}

.cabins__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.cabins__badges > * {
  min-width: 0;
}

.cabins__image-card,
.dining__image-card,
.entertainment__image-card,
.onboard-life__image-card,
.casino__image-card,
.poker__image-card,
.roulette__image-card,
.blackjack__image-card {
  margin: 0;
  background-color: var(--surface-card-bg);
  border: var(--surface-card-border);
  border-radius: var(--surface-card-radius);
  box-shadow: var(--surface-card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
}

.cabins__image-card:hover,
.dining__image-card:hover,
.entertainment__image-card:hover,
.onboard-life__image-card:hover,
.casino__image-card:hover,
.poker__image-card:hover,
.roulette__image-card:hover,
.blackjack__image-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--surface-card-shadow-hover);
}

.cabins__image-card {
  transform: rotate(1deg);
}

.cabins__image-card:hover {
  transform: rotate(1deg) translateY(-4px);
}

.dining__image-card {
  transform: rotate(-1deg);
}

.dining__image-card:hover {
  transform: rotate(-1deg) translateY(-4px);
}

.entertainment__image-card {
  transform: rotate(1deg);
}

.entertainment__image-card:hover {
  transform: rotate(1deg) translateY(-4px);
}

.onboard-life__image-card {
  transform: rotate(-1deg);
}

.onboard-life__image-card:hover {
  transform: rotate(-1deg) translateY(-4px);
}

.casino__image-card {
  transform: rotate(1deg);
}

.casino__image-card:hover {
  transform: rotate(1deg) translateY(-4px);
}

.poker__image-card {
  transform: rotate(-1deg);
}

.poker__image-card:hover {
  transform: rotate(-1deg) translateY(-4px);
}

.roulette__image-card {
  transform: rotate(1deg);
}

.roulette__image-card:hover {
  transform: rotate(1deg) translateY(-4px);
}

.blackjack__image-card {
  transform: rotate(-1deg);
}

.blackjack__image-card:hover {
  transform: rotate(-1deg) translateY(-4px);
}

.cabins__image-card img,
.dining__image-card img,
.entertainment__image-card img,
.onboard-life__image-card img,
.casino__image-card img,
.poker__image-card img,
.roulette__image-card img,
.blackjack__image-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cabins__image-card figcaption,
.dining__image-card figcaption,
.entertainment__image-card figcaption,
.onboard-life__image-card figcaption,
.casino__image-card figcaption,
.poker__image-card figcaption,
.roulette__image-card figcaption,
.blackjack__image-card figcaption {
  padding: var(--space-sm) var(--space-md);
  margin-block-start: 0;
  text-align: center;
}

.plan {
  padding-block: var(--space-xl);
  background-color: var(--color-warm-white);
  position: relative;
}

.plan::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(30, 144, 255, 0.05) 0%, transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(255, 179, 71, 0.05) 0%, transparent 30%);
  pointer-events: none;
}

.plan__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
}

.plan__content h2,
.plan__content h3 {
  margin-block-end: 0;
}

.plan__content p {
  max-width: 60ch;
  margin-block-end: 0;
}

.plan__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  width: 100%;
  margin-block-start: var(--space-sm);
}

.plan-card {
  background-color: var(--surface-card-bg);
  border: var(--surface-card-border);
  border-radius: var(--surface-card-radius);
  box-shadow: var(--surface-card-shadow);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  text-align: center;
  min-width: 0;
  color: var(--color-ink-navy);
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), color var(--transition-interactive);
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--surface-card-shadow-hover);
  color: var(--color-ocean-blue);
}

.plan-card__icon {
  font-size: 2rem;
  line-height: 1;
}

.plan-card h3 {
  margin-block-end: 0;
}

.plan-card p {
  margin-block-end: 0;
  max-width: 30ch;
}

@media (max-width: 992px) {
  .hero {
    min-height: 70vh;
  }

  .hero__content h1 {
    font-size: clamp(2rem, 5vw, 2.75rem);
  }

  .cruise-stories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-card--rotate-left,
  .story-card--rotate-right {
    transform: none;
  }

  .story-card--rotate-left:hover,
  .story-card--rotate-right:hover {
    transform: translateY(-4px);
  }

  .cabins__layout,
  .dining__layout,
  .entertainment__layout,
  .onboard-life__layout,
  .casino__layout,
  .poker__layout,
  .roulette__layout,
  .blackjack__layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .cabins__image-card,
  .dining__image-card,
  .entertainment__image-card,
  .onboard-life__image-card,
  .casino__image-card,
  .poker__image-card,
  .roulette__image-card,
  .blackjack__image-card {
    transform: none;
  }

  .cabins__image-card:hover,
  .dining__image-card:hover,
  .entertainment__image-card:hover,
  .onboard-life__image-card:hover,
  .casino__image-card:hover,
  .poker__image-card:hover,
  .roulette__image-card:hover,
  .blackjack__image-card:hover {
    transform: translateY(-4px);
  }

  .plan__cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .hero {
    min-height: 60vh;
  }

  .hero__content {
    align-items: center;
    text-align: center;
    padding-block: var(--space-lg);
  }

  .hero__content h1,
  .hero__lead {
    max-width: 100%;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .cruise-stories__grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding-block: var(--space-lg);
  }

  .cabins__text,
  .dining__text,
  .entertainment__text,
  .onboard-life__text,
  .casino__text,
  .poker__text,
  .roulette__text,
  .blackjack__text {
    align-items: stretch;
  }

  .cabins__text .btn,
  .dining__text .btn,
  .entertainment__text .btn,
  .onboard-life__text .btn,
  .casino__text .btn,
  .poker__text .btn,
  .roulette__text .btn,
  .blackjack__text .btn {
    align-self: stretch;
    text-align: center;
  }

  .plan__content {
    text-align: center;
  }
}