/* Page-owned styles for /poker/ */
.poker-page {
    min-width: 0;
}

/* Hero */
.poker-hero {
    background-color: var(--color-krem);
    position: relative;
    overflow: hidden;
    padding-block: var(--space-8) var(--space-7);
}

.poker-hero::after {
    content: "";
    position: absolute;
    inset-block-start: -10%;
    inset-inline-end: -15%;
    width: 70%;
    aspect-ratio: 1;
    background-color: rgba(196, 106, 74, 0.08);
    border-radius: var(--radius-circle);
    pointer-events: none;
}

.poker-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: center;
}

.poker-hero__content {
    min-width: 0;
    max-width: 560px;
}

.poker-hero__title {
    margin-block-end: var(--space-4);
}

.poker-hero__lead {
    max-width: 52ch;
    margin-block-end: var(--space-4);
    font-size: 1.125rem;
    line-height: 1.65;
}

.poker-hero__support {
    max-width: 52ch;
    margin-block-end: var(--space-6);
    color: var(--color-ciemna-oliwka);
}

.poker-hero__cta {
    min-width: 0;
}

.poker-hero__media {
    min-width: 0;
    display: flex;
    justify-content: center;
}

.poker-hero__image {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-circle);
    box-shadow: var(--shadow-subtle);
}

/* Fizyczny stół */
.poker-table-section {
    background-color: var(--color-grafit);
    color: var(--color-grafit-jasny);
    padding-block: var(--section-gap-desktop);
}

.poker-table-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: center;
}

.poker-table-section__content {
    min-width: 0;
}

.poker-table-section__title {
    color: var(--color-grafit-jasny);
    margin-block-end: var(--space-4);
}

.poker-table-section__text {
    max-width: 54ch;
    margin-block-end: var(--space-4);
    color: var(--color-grafit-jasny);
}

.poker-table-section__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.poker-table-section__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-grafit-jasny);
    font-size: var(--text-small-size);
    line-height: var(--leading-small);
}

.poker-table-section__feature-icon {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-block-start: 0.35em;
    border-radius: var(--radius-circle);
    background-color: var(--color-terakota);
}

.poker-table-section__media {
    min-width: 0;
    display: flex;
    justify-content: center;
}

.poker-table-section__image {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-subtle);
}

/* Warianty gry */
.poker-variants {
    background-color: var(--color-cieply-bez);
    padding-block: var(--section-gap-desktop);
}

.poker-variants__title {
    margin-block-end: var(--space-6);
    text-align: left;
}

.poker-variants__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.poker-variant-card {
    min-width: 0;
    background-color: var(--color-cieply-bez);
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-subtle);
    padding: var(--space-5);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

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

.poker-variant-card__title {
    margin-block-end: var(--space-3);
}

.poker-variant-card__text {
    max-width: 42ch;
    margin-block-end: 0;
    color: var(--color-grafit);
}

/* Atmosfera */
.poker-atmosphere {
    background-color: var(--color-burgund);
    color: var(--color-grafit-jasny);
    padding-block: var(--section-gap-desktop);
    position: relative;
    overflow: hidden;
}

.poker-atmosphere::before {
    content: "";
    position: absolute;
    inset-block-start: -20%;
    inset-inline-start: -10%;
    width: 50%;
    aspect-ratio: 1;
    background-color: rgba(196, 106, 74, 0.12);
    border-radius: var(--radius-circle);
    pointer-events: none;
}

.poker-atmosphere__inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.poker-atmosphere__content {
    width: 60%;
    max-width: 720px;
    min-width: 0;
    text-align: center;
}

.poker-atmosphere__title {
    color: var(--color-grafit-jasny);
    margin-block-end: var(--space-4);
}

.poker-atmosphere__text {
    max-width: 54ch;
    margin-inline: auto;
    margin-block-end: var(--space-4);
    color: var(--color-grafit-jasny);
}

.poker-atmosphere__quote {
    max-width: 48ch;
    margin-inline: auto;
    margin-block-start: var(--space-5);
    margin-block-end: 0;
    padding-inline-start: var(--space-5);
    border-inline-start: 3px solid var(--color-terakota-jasna);
    color: var(--color-terakota-jasna);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.5;
    font-style: italic;
}

/* Zasady */
.poker-rules {
    background-color: var(--color-krem);
    padding-block: var(--section-gap-desktop);
}

.poker-rules__inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-7);
    align-items: start;
}

.poker-rules__intro {
    min-width: 0;
}

.poker-rules__title {
    margin-block-end: var(--space-4);
}

.poker-rules__intro-text {
    max-width: 48ch;
    margin-block-end: 0;
}

.poker-rules__list-wrapper {
    min-width: 0;
}

.poker-rules__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.poker-rules__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-grafit);
    padding-block: var(--space-2);
    border-block-end: var(--border-subtle);
}

.poker-rules__item::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-block-start: 0.5em;
    border-radius: var(--radius-circle);
    background-color: var(--color-terakota);
}

.poker-rules__responsible {
    grid-column: 1 / -1;
    min-width: 0;
    background-color: var(--color-terakota-jasna);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    margin-block-start: var(--space-4);
}

.poker-rules__responsible-title {
    margin-block-end: var(--space-3);
}

.poker-rules__responsible-text {
    max-width: 70ch;
    margin-block-end: 0;
}

/* Doświadczenie Kręgu Stołu */
.poker-experience {
    background-color: var(--color-cieply-bez);
    padding-block: var(--section-gap-desktop);
}

.poker-experience__inner {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-7);
    align-items: start;
}

.poker-experience__content {
    min-width: 0;
}

.poker-experience__title {
    margin-block-end: var(--space-4);
}

.poker-experience__text {
    max-width: 54ch;
    margin-block-end: var(--space-4);
}

.poker-experience__points {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.poker-experience__point {
    min-width: 0;
    background-color: var(--color-krem);
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    padding: var(--space-4);
}

.poker-experience__point-icon {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-circle);
    background-color: var(--color-terakota);
    margin-block-end: var(--space-3);
}

.poker-experience__point-title {
    margin-block-end: var(--space-2);
}

.poker-experience__point-text {
    margin-block-end: 0;
    font-size: var(--text-small-size);
    line-height: var(--leading-small);
    color: var(--color-ciemna-oliwka);
}

/* Galeria */
.poker-gallery {
    background-color: var(--color-krem);
    padding-block: var(--section-gap-desktop);
}

.poker-gallery__title {
    margin-block-end: var(--space-3);
}

.poker-gallery__intro {
    max-width: 60ch;
    margin-block-end: var(--space-6);
    color: var(--color-ciemna-oliwka);
}

.poker-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.poker-gallery__item {
    min-width: 0;
    margin: 0;
}

.poker-gallery__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-subtle);
}

.poker-gallery__caption {
    margin-block-start: var(--space-2);
    font-size: var(--text-small-size);
    line-height: var(--leading-small);
    color: var(--color-ciemna-oliwka);
    max-width: 36ch;
}

/* Rezerwacja i kontakt */
.poker-reservation {
    background-color: var(--color-grafit);
    color: var(--color-grafit-jasny);
    padding-block: var(--section-gap-desktop);
}

.poker-reservation__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 60%;
    max-width: 720px;
    margin-inline: auto;
}

.poker-reservation__title {
    color: var(--color-grafit-jasny);
    margin-block-end: var(--space-4);
}

.poker-reservation__text {
    max-width: 54ch;
    margin-inline: auto;
    margin-block-end: var(--space-5);
    color: var(--color-grafit-jasny);
}

.poker-reservation__details {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.poker-reservation__detail {
    color: var(--color-grafit-jasny);
}

.poker-reservation__detail a {
    color: var(--color-terakota-jasna);
}

.poker-reservation__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
}

.poker-reservation__btn {
    min-width: 0;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .poker-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-5);
    }

    .poker-hero__content {
        max-width: none;
    }

    .poker-hero__lead,
    .poker-hero__support {
        max-width: 48ch;
    }

    .poker-hero__image {
        max-width: 100%;
    }

    .poker-table-section__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-5);
    }

    .poker-table-section__text {
        max-width: 48ch;
    }

    .poker-table-section__image {
        max-width: 100%;
    }

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

    .poker-variant-card:last-child {
        grid-column: 1 / -1;
    }

    .poker-atmosphere__content {
        width: 80%;
    }

    .poker-rules__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-5);
    }

    .poker-experience__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-5);
    }

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

    .poker-gallery__item:last-child {
        grid-column: 1 / -1;
    }

    .poker-reservation__inner {
        width: 80%;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .poker-hero {
        padding-block: var(--space-6) var(--space-6);
    }

    .poker-hero::after {
        inset-block-start: -20%;
        inset-inline-end: -40%;
        width: 90%;
    }

    .poker-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .poker-hero__content {
        max-width: none;
        text-align: center;
    }

    .poker-hero__lead,
    .poker-hero__support {
        max-width: 100%;
        margin-inline: auto;
    }

    .poker-hero__cta {
        width: 100%;
    }

    .poker-hero__media {
        order: 2;
    }

    .poker-hero__image {
        max-width: 100%;
        aspect-ratio: 4 / 3;
        border-radius: var(--radius-card);
    }

    .poker-table-section {
        padding-block: var(--section-gap-mobile);
    }

    .poker-table-section__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .poker-table-section__media {
        order: -1;
    }

    .poker-table-section__text {
        max-width: 100%;
    }

    .poker-table-section__image {
        max-width: 100%;
        aspect-ratio: 16 / 9;
    }

    .poker-variants {
        padding-block: var(--section-gap-mobile);
    }

    .poker-variants__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .poker-variant-card__text {
        max-width: 100%;
    }

    .poker-atmosphere {
        padding-block: var(--section-gap-mobile);
    }

    .poker-atmosphere__content {
        width: 100%;
        max-width: none;
    }

    .poker-atmosphere__text {
        max-width: 100%;
    }

    .poker-atmosphere__quote {
        max-width: 100%;
    }

    .poker-rules {
        padding-block: var(--section-gap-mobile);
    }

    .poker-rules__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .poker-rules__intro-text {
        max-width: 100%;
    }

    .poker-rules__responsible {
        grid-column: auto;
    }

    .poker-rules__responsible-text {
        max-width: 100%;
    }

    .poker-experience {
        padding-block: var(--section-gap-mobile);
    }

    .poker-experience__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .poker-experience__text {
        max-width: 100%;
    }

    .poker-gallery {
        padding-block: var(--section-gap-mobile);
    }

    .poker-gallery__intro {
        max-width: 100%;
    }

    .poker-gallery__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .poker-gallery__item:last-child {
        grid-column: auto;
    }

    .poker-reservation {
        padding-block: var(--section-gap-mobile);
    }

    .poker-reservation__inner {
        width: 100%;
        max-width: none;
    }

    .poker-reservation__text {
        max-width: 100%;
    }

    .poker-reservation__actions {
        flex-direction: column;
        width: 100%;
    }

    .poker-reservation__btn {
        width: 100%;
    }
}