/* ===== Texas Hold'em Page Styles ===== */

/* Section 1: Introduction */
.th-intro {
    padding-block: var(--space-3xl);
    background-color: var(--surface-ivoire);
}

.th-intro__inner {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    text-align: left;
}

.th-intro__inner h1 {
    margin-block-end: var(--space-lg);
}

.th-intro__inner p {
    max-width: 65ch;
    font-size: var(--text-body-large);
    line-height: var(--leading-body-large);
}

/* Section 2: Rules */
.th-rules {
    padding-block: var(--space-3xl);
    background-color: var(--surface-travertin);
}

.th-rules__grid {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-xl);
    align-items: start;
}

.th-rules__text {
    min-width: 0;
}

.th-rules__text h2 {
    margin-block-end: var(--space-lg);
}

.th-rules__text h3 {
    margin-block-start: var(--space-lg);
    margin-block-end: var(--space-md);
}

.th-rules__text p {
    max-width: 70ch;
    margin-block-end: var(--space-md);
}

.th-rules__card {
    background-color: var(--surface-blanc-casse);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-soft);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.th-rules__card:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

.th-rules__card h3 {
    margin-block-end: var(--space-md);
}

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

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

.th-rules__list li::before {
    content: "♣";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-vert-sauge);
    font-size: var(--text-body);
}

/* Section 3: Ambiance */
.th-ambiance {
    padding-block: var(--space-3xl);
    background-color: var(--surface-ivoire);
}

.th-ambiance__grid {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
}

.th-ambiance__text {
    min-width: 0;
}

.th-ambiance__text h2 {
    margin-block-end: var(--space-lg);
}

.th-ambiance__text h3 {
    margin-block-start: var(--space-lg);
    margin-block-end: var(--space-md);
}

.th-ambiance__text p {
    max-width: 60ch;
    margin-block-end: var(--space-md);
}

.th-ambiance__media {
    margin-block-end: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

.th-ambiance__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    transition: transform var(--transition-slow);
}

.th-ambiance__media:hover img {
    transform: scale(1.02);
}

/* Section 4: Evening */
.th-evening {
    padding-block: var(--space-3xl);
    background-color: var(--surface-travertin);
}

.th-evening__inner {
    max-width: 900px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    text-align: left;
}

.th-evening__inner h2 {
    margin-block-end: var(--space-lg);
}

.th-evening__inner h3 {
    margin-block-start: var(--space-lg);
    margin-block-end: var(--space-md);
}

.th-evening__inner p {
    max-width: 70ch;
    margin-block-end: var(--space-md);
}

/* Section 5: Levels */
.th-levels {
    padding-block: var(--space-3xl);
    background-color: var(--surface-ivoire);
}

.th-levels h2 {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    margin-block-end: var(--space-xl);
}

.th-levels__grid {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
}

.th-levels__card {
    background-color: var(--surface-blanc-casse);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-soft);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    min-width: 0;
}

.th-levels__card:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

.th-levels__card h3 {
    margin-block-end: var(--space-md);
}

.th-levels__card p {
    max-width: 65ch;
    margin-block-end: 0;
}

/* Section 6: Poker Lounge */
.th-lounge {
    padding-block: var(--space-3xl);
    background-color: var(--surface-travertin);
}

.th-lounge__grid {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
}

.th-lounge__text {
    min-width: 0;
}

.th-lounge__text h2 {
    margin-block-end: var(--space-lg);
}

.th-lounge__text p {
    max-width: 60ch;
    margin-block-end: var(--space-lg);
}

.th-lounge__link {
    display: inline-block;
    color: var(--color-bleu-ceruleen);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition-base);
}

.th-lounge__link:hover,
.th-lounge__link:focus-visible {
    color: var(--color-vert-sauge);
    text-decoration: underline;
}

.th-lounge__media {
    margin-block-end: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

.th-lounge__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    transition: transform var(--transition-slow);
}

.th-lounge__media:hover img {
    transform: scale(1.02);
}

/* Section 7: Card Room */
.th-cardroom {
    padding-block: var(--space-3xl);
    background-color: var(--surface-ivoire);
}

.th-cardroom__grid {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
}

.th-cardroom__media {
    margin-block-end: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

.th-cardroom__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    transition: transform var(--transition-slow);
}

.th-cardroom__media:hover img {
    transform: scale(1.02);
}

.th-cardroom__text {
    min-width: 0;
}

.th-cardroom__text h2 {
    margin-block-end: var(--space-lg);
}

.th-cardroom__text p {
    max-width: 60ch;
    margin-block-end: var(--space-lg);
}

.th-cardroom__link {
    display: inline-block;
    color: var(--color-bleu-ceruleen);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition-base);
}

.th-cardroom__link:hover,
.th-cardroom__link:focus-visible {
    color: var(--color-vert-sauge);
    text-decoration: underline;
}

/* Section 8: Reservation */
.th-reservation {
    padding-block: var(--space-4xl);
    background-color: var(--surface-brun);
    color: var(--color-blanc-casse);
}

.th-reservation__inner {
    max-width: 700px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

.th-reservation__inner h2 {
    color: var(--color-blanc-casse);
    margin-block-end: 0;
}

.th-reservation__inner p {
    max-width: 70ch;
    margin-block-end: 0;
}

.th-reservation__contact {
    font-style: normal;
    margin-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.th-reservation__contact p {
    margin-block-end: 0;
}

.th-reservation__contact a {
    color: var(--color-blanc-casse);
    text-decoration: underline;
}

.th-reservation__contact a:hover,
.th-reservation__contact a:focus-visible {
    color: var(--color-vert-sauge);
}

.th-reservation__btn {
    margin-block-start: var(--space-md);
}

/* Section 9: FAQ */
.th-faq {
    padding-block: var(--space-3xl);
    background-color: var(--surface-travertin);
}

.th-faq__inner {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.th-faq__inner h2 {
    margin-block-end: var(--space-xl);
}

.th-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.th-faq__item {
    background-color: var(--surface-blanc-casse);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.th-faq__question {
    margin-block-end: 0;
    padding: var(--space-lg);
    cursor: pointer;
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
    color: var(--color-brun-chataigne-fonce);
    transition: background-color var(--transition-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
}

.th-faq__question::after {
    content: "+";
    font-size: var(--text-h3);
    font-weight: 400;
    color: var(--color-vert-sauge);
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.th-faq__item.active .th-faq__question::after {
    transform: rotate(45deg);
}

.th-faq__question:hover,
.th-faq__question:focus-visible {
    background-color: var(--surface-travertin);
    outline: none;
}

.th-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow), padding var(--transition-slow);
    padding-inline: var(--space-lg);
}

.th-faq__item.active .th-faq__answer {
    max-height: 300px;
    padding-block: var(--space-md);
}

.th-faq__answer p {
    max-width: 70ch;
    margin-block-end: 0;
}

/* Responsive: Tablet */
@media (max-width: 900px) {
    .th-rules__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .th-ambiance__grid,
    .th-lounge__grid,
    .th-cardroom__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .th-ambiance__media,
    .th-lounge__media,
    .th-cardroom__media {
        order: -1;
    }

    .th-ambiance__media img,
    .th-lounge__media img,
    .th-cardroom__media img {
        aspect-ratio: 16 / 9;
    }

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

/* Responsive: Mobile */
@media (max-width: 600px) {
    .th-intro,
    .th-rules,
    .th-ambiance,
    .th-evening,
    .th-levels,
    .th-lounge,
    .th-cardroom,
    .th-faq {
        padding-block: var(--space-2xl);
    }

    .th-reservation {
        padding-block: var(--space-3xl);
    }

    .th-intro__inner p,
    .th-rules__text p,
    .th-ambiance__text p,
    .th-evening__inner p,
    .th-levels__card p,
    .th-lounge__text p,
    .th-cardroom__text p,
    .th-reservation__inner p,
    .th-faq__answer p {
        max-width: 100%;
    }

    .th-faq__question {
        padding: var(--space-md);
        font-size: var(--text-body-large);
        line-height: var(--leading-body-large);
    }

    .th-faq__answer {
        padding-inline: var(--space-md);
    }

    .th-faq__item.active .th-faq__answer {
        padding-block: var(--space-sm);
    }
}