/* ===== Page: Casino ===== */
#casino-main {
    --casino-text-max: 800px;
    --casino-text-narrow: 70ch;
}

/* Introduction */
.casino-intro {
    background-color: var(--color-cream);
    padding-block: var(--space-7);
}

.casino-intro__content {
    max-width: var(--casino-text-max);
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
    text-align: left;
}

.casino-intro__content h1 {
    color: var(--color-petrol);
    margin-block-end: var(--space-3);
    position: relative;
    padding-block-end: var(--space-3);
}

.casino-intro__content h1::after {
    content: "";
    display: block;
    width: 4rem;
    height: 3px;
    background-color: var(--color-coral);
    margin-block-start: var(--space-3);
}

.casino-intro__content p {
    max-width: var(--casino-text-narrow);
    color: var(--color-ink);
    line-height: var(--leading-body);
}

/* Experience section */
.casino-experience {
    background-color: var(--color-white);
    padding-block: var(--space-7);
    display: grid;
    grid-template-columns: 40% 60%;
    gap: var(--space-5);
    align-items: center;
    padding-inline: var(--container-padding-mobile);
    max-width: var(--container-max);
    margin-inline: auto;
}

.casino-experience__text {
    min-width: 0;
    text-align: left;
}

.casino-experience__text h2,
.casino-experience__text h3 {
    color: var(--color-petrol);
    margin-block-end: var(--space-3);
}

.casino-experience__text p {
    max-width: var(--casino-text-narrow);
    margin-block-end: var(--space-3);
}

.casino-experience__text blockquote {
    margin: var(--space-4) 0;
    padding-inline-start: var(--space-4);
    border-inline-start: 3px solid var(--color-coral);
    color: var(--color-petrol);
    font-style: italic;
}

.casino-experience__text ul {
    margin-block-end: 0;
    padding-inline-start: var(--space-4);
}

.casino-experience__image {
    min-width: 0;
    margin: 0;
}

.casino-experience__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.casino-experience__image img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-elevated);
}

/* Poker section */
.casino-poker {
    background-color: var(--color-mint);
    padding-block: var(--space-7);
    display: grid;
    grid-template-columns: 50% 50%;
    gap: var(--space-5);
    align-items: center;
    padding-inline: var(--container-padding-mobile);
    max-width: var(--container-max);
    margin-inline: auto;
}

.casino-poker__text {
    min-width: 0;
    text-align: left;
}

.casino-poker__text h2 {
    color: var(--color-petrol);
    margin-block-end: var(--space-3);
}

.casino-poker__text p {
    max-width: var(--casino-text-narrow);
    margin-block-end: var(--space-3);
}

.casino-poker__text ul {
    margin-block-end: 0;
    padding-inline-start: var(--space-4);
}

.casino-poker__image {
    min-width: 0;
    margin: 0;
}

.casino-poker__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.casino-poker__image img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-elevated);
}

/* Roulette section */
.casino-roulette {
    background-color: var(--color-cream);
    padding-block: var(--space-7);
    display: grid;
    grid-template-columns: 50% 50%;
    gap: var(--space-5);
    align-items: center;
    padding-inline: var(--container-padding-mobile);
    max-width: var(--container-max);
    margin-inline: auto;
}

.casino-roulette__image {
    min-width: 0;
    margin: 0;
}

.casino-roulette__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.casino-roulette__image img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-elevated);
}

.casino-roulette__text {
    min-width: 0;
    text-align: left;
}

.casino-roulette__text h2 {
    color: var(--color-petrol);
    margin-block-end: var(--space-3);
}

.casino-roulette__text p {
    max-width: var(--casino-text-narrow);
    margin-block-end: var(--space-3);
}

.casino-roulette__text ul {
    margin-block-end: 0;
    padding-inline-start: var(--space-4);
}

/* Blackjack section */
.casino-blackjack {
    background-color: var(--color-white);
    padding-block: var(--space-7);
    display: grid;
    grid-template-columns: 50% 50%;
    gap: var(--space-5);
    align-items: center;
    padding-inline: var(--container-padding-mobile);
    max-width: var(--container-max);
    margin-inline: auto;
}

.casino-blackjack__text {
    min-width: 0;
    text-align: left;
}

.casino-blackjack__text h2 {
    color: var(--color-petrol);
    margin-block-end: var(--space-3);
}

.casino-blackjack__text p {
    max-width: var(--casino-text-narrow);
    margin-block-end: var(--space-3);
}

.casino-blackjack__text ul {
    margin-block-end: 0;
    padding-inline-start: var(--space-4);
}

.casino-blackjack__image {
    min-width: 0;
    margin: 0;
}

.casino-blackjack__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.casino-blackjack__image img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-elevated);
}

/* Accessories section */
.casino-accessories {
    background-color: var(--color-mint);
    padding-block: var(--space-7);
    padding-inline: var(--container-padding-mobile);
    max-width: var(--container-max);
    margin-inline: auto;
}

.casino-accessories__text {
    max-width: var(--casino-text-max);
    margin-inline: auto;
    text-align: left;
    margin-block-end: var(--space-5);
}

.casino-accessories__text h2 {
    color: var(--color-petrol);
    margin-block-end: var(--space-3);
}

.casino-accessories__text p {
    max-width: var(--casino-text-narrow);
    margin-block-end: var(--space-3);
}

.casino-accessories__text ul {
    margin-block-end: 0;
    padding-inline-start: var(--space-4);
}

.casino-accessories__image {
    margin: 0;
    width: 100%;
}

.casino-accessories__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.casino-accessories__image img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-elevated);
}

/* Info section */
.casino-info {
    background-color: var(--color-cream);
    padding-block: var(--space-7);
}

.casino-info__content {
    max-width: var(--casino-text-max);
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
    text-align: left;
}

.casino-info__content h2 {
    color: var(--color-petrol);
    margin-block-end: var(--space-3);
}

.casino-info__content p {
    max-width: var(--casino-text-narrow);
    margin-block-end: var(--space-4);
}

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

.casino-info__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-ink);
}

.casino-info__icon {
    display: inline-block;
    min-width: 1.5rem;
    text-align: center;
    color: var(--color-coral);
    font-weight: 700;
}

.casino-info__list a {
    color: var(--color-petrol);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.casino-info__list a:hover,
.casino-info__list a:focus-visible {
    color: var(--color-coral);
}

/* CTA section */
.casino-cta {
    background-color: var(--color-petrol);
    padding-block: var(--space-7);
}

.casino-cta__content {
    max-width: 600px;
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.casino-cta__content h2 {
    color: var(--color-cream);
    margin-block-end: 0;
}

.casino-cta__content p {
    color: var(--color-cream);
    max-width: 50ch;
    margin-block-end: 0;
}

.casino-cta__content .btn {
    margin-block-start: var(--space-2);
}

/* Responsive */
@media (max-width: 991px) {
    .casino-experience,
    .casino-poker,
    .casino-roulette,
    .casino-blackjack {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .casino-experience__image,
    .casino-poker__image,
    .casino-roulette__image,
    .casino-blackjack__image {
        order: 0;
    }

    .casino-experience__text,
    .casino-poker__text,
    .casino-roulette__text,
    .casino-blackjack__text {
        order: 1;
    }

    .casino-roulette__image {
        order: 0;
    }

    .casino-roulette__text {
        order: 1;
    }
}

@media (max-width: 767px) {
    .casino-intro,
    .casino-experience,
    .casino-poker,
    .casino-roulette,
    .casino-blackjack,
    .casino-accessories,
    .casino-info,
    .casino-cta {
        padding-block: var(--space-5);
    }

    .casino-intro__content,
    .casino-info__content,
    .casino-cta__content {
        padding-inline: var(--container-padding-mobile);
    }

    .casino-experience__text p,
    .casino-poker__text p,
    .casino-roulette__text p,
    .casino-blackjack__text p,
    .casino-accessories__text p,
    .casino-info__content p,
    .casino-cta__content p {
        max-width: 100%;
    }

    .casino-cta__content .btn {
        width: 100%;
    }
}

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