/* Kasyno w kinie — page-owned styles */
.page-kasyno-w-kinie {
    --page-section-gap: var(--space-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--page-section-gap);
}

.page-kasyno-w-kinie .section-kasyno {
    padding-block: var(--space-xl) var(--space-2xl);
}

.page-kasyno-w-kinie .section-kasyno--alt {
    background-color: var(--color-krem-cien);
}

.page-kasyno-w-kinie .section-kasyno--summary {
    background-color: var(--color-krem-cien);
    border-block: var(--border-hairline);
}

.page-kasyno-w-kinie .section-kasyno--cta {
    padding-block-end: var(--space-4xl);
}

/* Hero */
.hero-kasyno {
    background-color: var(--color-krem-filmowy);
    padding-block: var(--space-2xl) var(--space-3xl);
}

.hero-kasyno__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-xl);
    align-items: center;
}

.hero-kasyno__content {
    grid-column: 1 / span 7;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
}

.hero-kasyno__title {
    font-size: var(--text-display-l);
    line-height: var(--leading-display-l);
    letter-spacing: var(--tracking-display-l);
    margin: 0;
    max-width: 12ch;
}

.hero-kasyno__lead {
    font-size: var(--text-body-l);
    line-height: var(--leading-body-l);
    max-width: 45rem;
    margin: 0;
}

.hero-kasyno__meta {
    margin: 0;
    padding-block: var(--space-sm);
    border-top: var(--border-hairline);
    border-bottom: var(--border-hairline);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    width: 100%;
}

.hero-kasyno__media {
    grid-column: 8 / span 5;
    min-width: 0;
    border: var(--border-hairline);
    border-radius: var(--radius-medium);
    overflow: hidden;
    background-color: var(--color-krem-cien);
    transition: filter var(--transition-color);
}

.hero-kasyno__media img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
}

.hero-kasyno__media:hover {
    filter: brightness(0.92);
}

/* Section headers */
.section-kasyno__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-block-end: var(--space-xl);
    max-width: 45rem;
}

.section-kasyno__header--center {
    margin-inline: auto;
    align-items: center;
    text-align: center;
}

.section-kasyno__header h2 {
    margin: 0;
    font-size: var(--text-heading-2);
    line-height: var(--leading-heading-2);
    letter-spacing: var(--tracking-heading-2);
}

.section-kasyno__header .frame-number {
    margin: 0;
}

/* Shared section grids */
.section-kasyno__grid {
    display: grid;
    gap: var(--space-lg);
}

.section-kasyno__grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.section-kasyno__grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section-kasyno__grid > * {
    min-width: 0;
}

/* Feature blocks (Dlaczego kino wraca) */
.feature-block {
    background-color: var(--color-krem-filmowy);
    border: var(--border-hairline);
    border-radius: var(--radius-medium);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
}

.feature-block__number {
    margin: 0;
}

.feature-block h3 {
    margin: 0;
    font-size: var(--text-heading-3);
    line-height: var(--leading-heading-3);
}

.feature-block p {
    margin: 0;
    font-size: var(--text-body-m);
    line-height: var(--leading-body-m);
}

/* Scene cards */
.scene-card {
    background-color: var(--color-biel-projekcji);
    border: var(--border-hairline);
    border-radius: var(--radius-default);
    padding: var(--space-lg);
    box-shadow: var(--shadow-raised);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
    transition: border-color var(--transition-color), box-shadow var(--transition-transform), transform var(--transition-transform);
}

.scene-card:hover {
    border-color: var(--color-turkus-projekcyjny);
    box-shadow: var(--shadow-overlay);
    transform: translateY(-1px);
}

.scene-card__tag {
    margin: 0;
}

.scene-card h3 {
    margin: 0;
    font-size: var(--text-heading-3);
    line-height: var(--leading-heading-3);
}

.scene-card p {
    margin: 0;
    font-size: var(--text-body-m);
    line-height: var(--leading-body-m);
}

/* Technique list */
.technique-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    border-inline-start: 2px solid var(--color-turkus-projekcyjny);
    padding-inline-start: var(--space-lg);
}

.technique-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.technique-item h3 {
    margin: 0;
    font-size: var(--text-heading-3);
    line-height: var(--leading-heading-3);
}

.technique-item p {
    margin: 0;
    font-size: var(--text-body-m);
    line-height: var(--leading-body-m);
}

/* Interior layout */
.interior-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-xl);
    align-items: center;
    margin-block-end: var(--space-2xl);
}

.interior-layout:last-child {
    margin-block-end: 0;
}

.interior-layout__text {
    grid-column: 1 / span 6;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
}

.interior-layout__text h3 {
    margin: 0;
    font-size: var(--text-heading-3);
    line-height: var(--leading-heading-3);
}

.interior-layout__text p {
    margin: 0;
    font-size: var(--text-body-m);
    line-height: var(--leading-body-m);
}

.interior-layout__media {
    grid-column: 7 / span 6;
    min-width: 0;
    margin: 0;
    border: var(--border-hairline);
    border-radius: var(--radius-medium);
    overflow: hidden;
    background-color: var(--color-krem-cien);
    transition: transform var(--transition-transform);
}

.interior-layout__media:hover {
    transform: scale(1.01);
}

.interior-layout__media img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
}

.interior-layout__media figcaption {
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--color-krem-filmowy);
    border-top: var(--border-hairline);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.interior-layout--reverse .interior-layout__text {
    grid-column: 7 / span 6;
    grid-row: 1;
}

.interior-layout--reverse .interior-layout__media {
    grid-column: 1 / span 6;
    grid-row: 1;
}

.interior-layout__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 18rem;
    background-color: var(--color-pomarancz-jasny);
    border: var(--border-hairline);
    border-radius: var(--radius-medium);
    padding: var(--space-lg);
}

.interior-layout__media-note {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 24rem;
    text-align: center;
    align-items: center;
}

.interior-layout__media-note .frame-number {
    margin: 0;
}

.interior-layout__media-note .annotation {
    margin: 0;
    font-size: var(--text-annotation);
    line-height: var(--leading-annotation);
    color: var(--color-granat-miekki);
}

/* Meeting blocks */
.meeting-block {
    background-color: var(--color-krem-filmowy);
    border: var(--border-hairline);
    border-radius: var(--radius-medium);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
}

.meeting-block__tag {
    margin: 0;
}

.meeting-block h3 {
    margin: 0;
    font-size: var(--text-heading-3);
    line-height: var(--leading-heading-3);
}

.meeting-block p {
    margin: 0;
    font-size: var(--text-body-m);
    line-height: var(--leading-body-m);
}

/* Costume blocks */
.costume-block {
    background-color: var(--color-krem-filmowy);
    border: var(--border-hairline);
    border-radius: var(--radius-medium);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
    border-inline-start: 2px solid var(--color-pomarancz-kadru);
}

.costume-block h3 {
    margin: 0;
    font-size: var(--text-heading-3);
    line-height: var(--leading-heading-3);
}

.costume-block p {
    margin: 0;
    font-size: var(--text-body-m);
    line-height: var(--leading-body-m);
}

/* Summary */
.summary-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: center;
    text-align: center;
    max-width: 45rem;
    margin-inline: auto;
}

.summary-block__quote {
    margin: 0;
    background-color: var(--color-pomarancz-jasny);
    border: var(--border-hairline);
    border-radius: var(--radius-medium);
    padding: var(--space-lg);
    width: 100%;
}

.summary-block__quote .quote-mark {
    margin: 0;
}

.summary-block__quote p {
    margin: 0;
    font-size: clamp(1.5rem, 1.5vw + 0.75rem, 1.75rem);
    line-height: 1.3;
    font-style: italic;
    color: var(--color-granat-gleboki);
}

.summary-block__text {
    margin: 0;
    font-size: var(--text-body-l);
    line-height: var(--leading-body-l);
    max-width: 45rem;
}

/* CTA */
.cta-lead {
    margin: 0 0 var(--space-xl) 0;
    font-size: var(--text-body-l);
    line-height: var(--leading-body-l);
    max-width: 45rem;
}

.cta-grid {
    margin: 0;
}

.cta-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    background-color: var(--color-turkus-projekcyjny);
    color: var(--color-biel-projekcji);
    text-decoration: none;
    border: 1px solid var(--color-turkus-projekcyjny);
    border-radius: var(--radius-default);
    padding: var(--space-lg);
    min-height: 8rem;
    justify-content: center;
    transition: background-color var(--transition-color), border-color var(--transition-color), transform var(--transition-transform), box-shadow var(--transition-transform);
}

.cta-card:hover {
    background-color: var(--color-turkus-jasny);
    border-color: var(--color-turkus-projekcyjny);
    color: var(--color-granat-gleboki);
    transform: translateY(-1px);
    box-shadow: var(--shadow-overlay);
}

.cta-card:visited {
    color: var(--color-biel-projekcji);
}

.cta-card:hover:visited {
    color: var(--color-granat-gleboki);
}

.cta-card__label {
    font-size: var(--text-label);
    line-height: var(--leading-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    font-weight: 600;
}

.cta-card__text {
    font-size: var(--text-body-m);
    line-height: var(--leading-body-m);
}

/* Responsive */
@media (min-width: 64rem) {
    .page-kasyno-w-kinie {
        --page-section-gap: var(--space-4xl);
    }

    .page-kasyno-w-kinie .section-kasyno {
        padding-block: var(--space-2xl) var(--space-3xl);
    }

    .hero-kasyno {
        padding-block: var(--space-3xl) var(--space-4xl);
    }
}

@media (max-width: 63.99rem) {
    .hero-kasyno__inner {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .hero-kasyno__content,
    .hero-kasyno__media {
        grid-column: 1 / -1;
    }

    .hero-kasyno__media {
        order: -1;
    }

    .section-kasyno__grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .interior-layout__text,
    .interior-layout__media,
    .interior-layout--reverse .interior-layout__text,
    .interior-layout--reverse .interior-layout__media {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .interior-layout--reverse .interior-layout__media {
        order: -1;
    }
}

@media (max-width: 47.99rem) {
    .page-kasyno-w-kinie .section-kasyno {
        padding-block: var(--space-xl) var(--space-2xl);
    }

    .hero-kasyno {
        padding-block: var(--space-xl) var(--space-2xl);
    }

    .hero-kasyno__title {
        font-size: clamp(2rem, 8vw, 2.5rem);
    }

    .section-kasyno__grid--three,
    .section-kasyno__grid--two {
        grid-template-columns: 1fr;
    }

    .technique-list {
        padding-inline-start: var(--space-md);
    }

    .interior-layout__media--empty {
        min-height: 12rem;
    }

    .summary-block__quote p {
        font-size: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-kasyno__media,
    .scene-card,
    .interior-layout__media,
    .cta-card {
        transition: none;
    }

    .scene-card:hover,
    .cta-card:hover,
    .interior-layout__media:hover {
        transform: none;
    }
}