/* Relaxation page styles */
.relaxation-page {
    --relaxation-measure-hero: 45ch;
    --relaxation-measure-art: 60ch;
    --relaxation-measure-quiet: 55ch;
    --relaxation-measure-social: 65ch;
    --relaxation-measure-experience: 60ch;
    --relaxation-measure-casino: 60ch;
    --relaxation-measure-reflections: 45ch;
    --relaxation-measure-plan: 50ch;
}

/* Hero */
.relaxation-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-warm-sand);
}

.relaxation-hero__media {
    width: 100%;
    max-width: 100%;
}

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

.relaxation-hero__overlay {
    position: relative;
    width: min(600px, calc(100% - 48px));
    margin-inline: auto;
    margin-block-start: -80px;
    background-color: var(--color-white);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
    padding: var(--space-xl);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    z-index: 1;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}

.relaxation-hero__eyebrow {
    color: var(--color-cobalt);
    margin-block-end: 0;
}

.relaxation-hero__title {
    font-size: var(--text-display);
    line-height: var(--leading-display);
    margin-block-end: 0;
}

.relaxation-hero__lead {
    max-width: var(--relaxation-measure-hero);
    margin-inline: auto;
    font-size: var(--text-body);
    line-height: var(--leading-body);
    margin-block-end: 0;
}

.relaxation-hero__support {
    max-width: var(--relaxation-measure-hero);
    margin-inline: auto;
    font-size: var(--text-small);
    line-height: var(--leading-small);
    color: var(--color-ink);
    opacity: 0.8;
    margin-block-end: 0;
}

/* Art of Unwinding */
.relaxation-art__grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-xl);
    align-items: start;
}

.relaxation-art__text {
    min-width: 0;
}

.relaxation-art__heading {
    margin-block-end: var(--space-md);
}

.relaxation-art__lead {
    font-size: var(--text-h3);
    font-family: var(--font-heading);
    line-height: var(--leading-h3);
    max-width: var(--relaxation-measure-art);
    margin-block-end: var(--space-md);
}

.relaxation-art__text p {
    max-width: var(--relaxation-measure-art);
    margin-block-end: var(--space-md);
}

.relaxation-art__accent {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.relaxation-art__tag {
    background-color: var(--color-white);
    border: var(--border-default);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card);
    padding: var(--space-lg);
    max-width: 320px;
    width: 100%;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.relaxation-art__tag-label {
    color: var(--color-coral);
    margin-block-end: 0;
}

.relaxation-art__tag p {
    font-style: italic;
    margin-block-end: 0;
}

/* Quiet Corners */
.relaxation-quiet__heading {
    margin-block-end: var(--space-md);
}

.relaxation-quiet__lead {
    max-width: var(--relaxation-measure-quiet);
    margin-block-end: var(--space-xl);
}

.relaxation-quiet__unit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
    align-items: center;
    margin-block-end: var(--space-xl);
}

.relaxation-quiet__unit:last-child {
    margin-block-end: 0;
}

.relaxation-quiet__unit--reading .relaxation-quiet__media {
    order: 1;
}

.relaxation-quiet__unit--reading .relaxation-quiet__content {
    order: 2;
}

.relaxation-quiet__unit--reflection .relaxation-quiet__media {
    order: 2;
}

.relaxation-quiet__unit--reflection .relaxation-quiet__content {
    order: 1;
}

.relaxation-quiet__media {
    min-width: 0;
    border-radius: var(--radius-medium);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: var(--border-default);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.relaxation-quiet__image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--transition-fast);
}

.relaxation-quiet__media:hover .relaxation-quiet__image {
    transform: scale(1.03);
}

.relaxation-quiet__content {
    min-width: 0;
}

.relaxation-quiet__subheading {
    margin-block-end: var(--space-sm);
}

.relaxation-quiet__content p {
    max-width: var(--relaxation-measure-quiet);
    margin-block-end: 0;
}

/* Social Spaces */
.relaxation-social__heading {
    margin-block-end: var(--space-md);
}

.relaxation-social__lead {
    max-width: var(--relaxation-measure-social);
    margin-block-end: var(--space-xl);
}

.relaxation-social__unit {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-block-end: var(--space-xl);
}

.relaxation-social__unit:last-child {
    margin-block-end: 0;
}

.relaxation-social__content {
    min-width: 0;
}

.relaxation-social__subheading {
    margin-block-end: var(--space-sm);
}

.relaxation-social__content p {
    max-width: var(--relaxation-measure-social);
    margin-block-end: 0;
}

.relaxation-social__media {
    min-width: 0;
    border-radius: var(--radius-medium);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: var(--border-default);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

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

/* Relaxation Experience */
.relaxation-experience__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: var(--space-xl);
    align-items: start;
}

.relaxation-experience__text {
    min-width: 0;
}

.relaxation-experience__heading {
    margin-block-end: var(--space-md);
}

.relaxation-experience__text p {
    max-width: var(--relaxation-measure-experience);
    margin-block-end: 0;
}

.relaxation-experience__accent {
    min-width: 0;
    display: flex;
    justify-content: flex-start;
}

.relaxation-experience__tag {
    background-color: var(--color-white);
    border: var(--border-default);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card);
    padding: var(--space-lg);
    width: 100%;
    max-width: 280px;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.relaxation-experience__tag-label {
    color: var(--color-eucalyptus);
    margin-block-end: 0;
}

.relaxation-experience__list {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.relaxation-experience__list li {
    position: relative;
    padding-inline-start: var(--space-lg);
    line-height: var(--leading-body);
}

.relaxation-experience__list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-eucalyptus);
    font-weight: 700;
}

/* Relaxation and Casino */
.relaxation-casino__content {
    border-inline-start: 4px solid var(--color-coral);
    padding-inline-start: var(--space-lg);
    padding-block: var(--space-md);
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-small);
}

.relaxation-casino__heading {
    margin-block-end: var(--space-md);
}

.relaxation-casino__content p {
    max-width: var(--relaxation-measure-casino);
    margin-block-end: var(--space-md);
}

.relaxation-casino__disclaimer {
    color: var(--color-burgundy);
    margin-block-end: 0;
    font-weight: 700;
}

/* Guest Reflections */
.relaxation-reflections__heading {
    margin-block-end: var(--space-md);
}

.relaxation-reflections__lead {
    max-width: var(--relaxation-measure-reflections);
    margin-inline: auto;
    text-align: center;
    margin-block-end: var(--space-xl);
}

.relaxation-reflections__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
}

.relaxation-reflections__card {
    min-width: 0;
    background-color: var(--color-white);
    border: var(--border-default);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.relaxation-reflections__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.relaxation-reflections__tag {
    display: flex;
    justify-content: center;
}

.relaxation-reflections__tag-label {
    background-color: var(--color-coral);
    color: var(--color-ink);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-small);
    margin-block-end: 0;
}

.relaxation-reflections__quote {
    margin-block-end: 0;
    border-inline-start: none;
    padding-inline-start: 0;
    font-style: italic;
}

.relaxation-reflections__quote p {
    max-width: var(--relaxation-measure-reflections);
    margin-inline: auto;
    margin-block-end: 0;
}

.relaxation-reflections__attribution {
    color: var(--color-ink);
    opacity: 0.7;
    margin-block-end: 0;
}

/* Plan Your Stay */
.relaxation-plan {
    background-color: var(--color-cobalt);
    color: var(--color-white);
    padding-block: var(--space-section);
}

.relaxation-plan__content {
    max-width: 600px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
}

.relaxation-plan__heading {
    color: var(--color-white);
    margin-block-end: 0;
}

.relaxation-plan__lead {
    max-width: var(--relaxation-measure-plan);
    margin-inline: auto;
    margin-block-end: 0;
}

.relaxation-plan__contact {
    margin-block-end: 0;
    font-size: var(--text-small);
    line-height: var(--leading-small);
}

.relaxation-plan__contact a {
    color: var(--color-white);
    text-decoration: underline;
}

.relaxation-plan__contact a:hover {
    color: var(--color-coral);
}

.relaxation-plan__button {
    margin-block-start: var(--space-sm);
}

/* Responsive */
@media (max-width: 1024px) {
    .relaxation-hero__overlay {
        width: min(560px, calc(100% - 40px));
        margin-block-start: -60px;
        padding: var(--space-lg);
    }

    .relaxation-art__grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: var(--space-lg);
    }

    .relaxation-experience__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
        gap: var(--space-lg);
    }
}

@media (max-width: 768px) {
    .relaxation-hero__overlay {
        width: calc(100% - 32px);
        margin-block-start: -40px;
        padding: var(--space-md);
        gap: var(--space-sm);
    }

    .relaxation-hero__title {
        font-size: var(--text-h1);
        line-height: var(--leading-h1);
    }

    .relaxation-hero__lead,
    .relaxation-hero__support {
        max-width: 100%;
    }

    .relaxation-art__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .relaxation-art__accent {
        justify-content: flex-start;
    }

    .relaxation-art__tag {
        max-width: 100%;
    }

    .relaxation-quiet__unit {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .relaxation-quiet__unit--reading .relaxation-quiet__media {
        order: 1;
    }

    .relaxation-quiet__unit--reading .relaxation-quiet__content {
        order: 2;
    }

    .relaxation-quiet__unit--reflection .relaxation-quiet__media {
        order: 1;
    }

    .relaxation-quiet__unit--reflection .relaxation-quiet__content {
        order: 2;
    }

    .relaxation-experience__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .relaxation-experience__accent {
        justify-content: flex-start;
    }

    .relaxation-experience__tag {
        max-width: 100%;
    }

    .relaxation-reflections__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .relaxation-casino__content {
        border-inline-start: none;
        border-block-start: 4px solid var(--color-coral);
        padding-inline-start: 0;
        padding-block-start: var(--space-md);
    }
}

@media (max-width: 480px) {
    .relaxation-hero__overlay {
        width: calc(100% - 24px);
        margin-block-start: -32px;
        padding: var(--space-md);
    }

    .relaxation-hero__title {
        font-size: var(--text-h2);
        line-height: var(--leading-h2);
    }

    .relaxation-art__text p,
    .relaxation-art__lead,
    .relaxation-quiet__lead,
    .relaxation-quiet__content p,
    .relaxation-social__lead,
    .relaxation-social__content p,
    .relaxation-experience__text p,
    .relaxation-casino__content p,
    .relaxation-reflections__lead,
    .relaxation-reflections__quote p,
    .relaxation-plan__lead {
        max-width: 100%;
    }

    .relaxation-plan__content {
        padding-inline: var(--space-md);
    }
}
