.rozrywka-page { overflow: clip; }
.rozrywka-page a { color: var(--color-ocean-jade); }
.rozrywka-page a:hover { color: var(--color-burnished-orange); }
.roz-hero { position: relative; min-height: 45rem; background: var(--color-deep-atlantic); color: var(--color-smoked-white); }
.roz-hero__image { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,25,35,.9) 0%, rgba(7,25,35,.68) 42%, rgba(7,25,35,.15) 76%), url('/public/media/rozrywka-hero-nocny-statek.webp') center/cover no-repeat; }
.roz-hero__image::after { position: absolute; inset: auto 0 18%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-ocean-jade), transparent); content: ''; opacity: .7; animation: roz-route-line 10s linear infinite; }
.roz-hero__content { position: relative; z-index: 1; display: flex; width: min(100% - (var(--page-padding) * 2), var(--container-max)); min-width: 0; min-height: 45rem; align-items: end; margin-inline: auto; padding-block: var(--space-8); }
.roz-hero__panel { display: flex; width: min(100%, 42.5rem); min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-5); padding: var(--space-6); }
.roz-hero__panel h1, .roz-hero__panel p { margin: 0; }
.roz-hero__panel .lead { max-width: 40rem; }
.roz-hero__note { max-width: 37rem; border-top: var(--border-subtle); padding-top: var(--space-3); color: var(--color-polished-steel); font-size: var(--text-sm); line-height: var(--leading-small); }
.roz-route__intro, .roz-tables__intro, .roz-plan__intro, .roz-faq__intro { width: min(100%, 42.5rem); min-width: 0; }
.roz-route__stages { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.roz-route__stages::before { position: absolute; top: .6rem; right: 10%; left: 10%; height: 1px; background: var(--color-burnished-metal); content: ''; opacity: .7; }
.roz-route__stage { position: relative; min-width: 0; padding-top: var(--space-6); }
.roz-route__stage::before { position: absolute; top: .1rem; left: 0; width: 1rem; height: 1rem; border: 2px solid var(--color-ocean-jade); border-radius: 50%; background: var(--color-abyss-blue); content: ''; }
.roz-route__stage--night::before { background: var(--color-burnished-orange); border-color: var(--color-burnished-orange); }
.roz-route__time { display: block; color: var(--color-burnished-metal); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.roz-route__stage p { max-width: 22rem; }
.roz-detail-toggle { min-height: 2.75rem; padding: var(--space-2) 0; color: var(--color-ocean-jade-light); font-size: var(--text-sm); font-weight: 700; text-align: left; }
.roz-detail { color: var(--color-polished-steel); font-size: var(--text-sm); }
.roz-scene__heading, .roz-casino__heading, .roz-detail-section__heading { width: min(100%, 42.5rem); min-width: 0; }
.roz-scene__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.roz-scene__media { grid-column: span 7; min-width: 0; overflow: hidden; }
.roz-scene__media img { width: 100%; height: 100%; min-height: 25rem; object-fit: cover; transition: transform var(--transition-slow); }
.roz-scene__media:hover img { transform: scale(1.02); }
.roz-scene__main { grid-column: span 5; min-width: 0; align-self: center; }
.roz-scene__main p { max-width: 31rem; }
.roz-scene__support { grid-column: span 6; min-width: 0; border-top: var(--border-metal); padding-top: var(--space-5); }
.roz-scene__support p { max-width: 27.5rem; }
.roz-recovery__intro { width: min(100%, 40rem); min-width: 0; }
.roz-recovery__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-7); border-block: 1px solid var(--color-burnished-metal); }
.roz-recovery__facts > article { min-width: 0; padding: var(--space-5); border-inline-end: 1px solid rgba(154,128,104,.55); }
.roz-recovery__facts > article:last-child { border-inline-end: 0; }
.roz-recovery__facts p { max-width: 20.5rem; }
.roz-casino__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-7); margin-top: var(--space-7); }
.roz-casino__copy { grid-column: span 6; min-width: 0; }
.roz-casino__copy > p { max-width: 38rem; }
.roz-casino__media { grid-column: 8 / span 5; min-width: 0; overflow: hidden; }
.roz-casino__media img { width: 100%; height: 100%; min-height: 34rem; object-fit: cover; }
.roz-casino__markers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.roz-casino__markers > article { min-width: 0; border-top: var(--border-metal); padding-top: var(--space-4); }
.roz-casino__markers span, .roz-detail-section__observations span { color: var(--color-ocean-jade-light); font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; }
.roz-casino__markers p { color: var(--color-polished-steel); }
.roz-gallery-controls { display: flex; min-width: 0; justify-content: flex-end; gap: var(--space-2); margin-block: var(--space-5); }
.roz-gallery-controls button { display: inline-flex; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--color-burnished-metal); color: var(--color-abyss-blue); font-size: 1.25rem; }
.roz-gallery-controls button:hover { background: var(--color-ocean-jade); color: var(--color-deep-atlantic); }
.roz-table-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.roz-table-card { min-width: 0; border: var(--border-light); background: rgba(244,240,232,.4); }
.roz-table-card figure { margin: 0; overflow: hidden; }
.roz-table-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--transition-slow); }
.roz-table-card:hover img { transform: scale(1.02); }
.roz-table-card > div { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.roz-table-card h3, .roz-table-card p { margin: 0; }
.roz-table-card p { max-width: 21.25rem; }
.roz-detail-section__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-7); margin-top: var(--space-7); }
.roz-detail-section__grid > figure { grid-column: span 5; min-width: 0; overflow: hidden; }
.roz-detail-section__grid > figure img { width: 100%; height: 100%; min-height: 25rem; object-fit: cover; }
.roz-detail-section__copy { grid-column: span 7; min-width: 0; }
.roz-detail-section__copy > p { max-width: 35rem; }
.roz-detail-section__observations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.roz-detail-section__observations > article { min-width: 0; border-top: var(--border-metal); padding-top: var(--space-4); }
.roz-detail-section__observations p { max-width: 16.25rem; color: var(--color-polished-steel); }
.roz-plan__steps { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-8); margin-top: var(--space-7); }
.roz-plan__steps::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--color-burnished-metal); content: ''; opacity: .7; }
.roz-plan__steps > article { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.roz-plan__steps > article > span { display: flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--color-ocean-jade); border-radius: 50%; color: var(--color-ocean-jade-light); font-weight: 700; }
.roz-plan__steps > article > div { min-width: 0; }
.roz-plan__steps h3 { margin-bottom: var(--space-3); }
.roz-plan__steps p { max-width: 24rem; }
.roz-faq__list { width: min(100%, 47.5rem); min-width: 0; margin-top: var(--space-7); border-top: var(--border-light); }
.roz-faq__list details { min-width: 0; border-bottom: var(--border-light); }
.roz-faq__list summary { display: flex; min-height: 3.25rem; align-items: center; padding: var(--space-4) var(--space-6) var(--space-4) 0; color: var(--color-abyss-blue); font-weight: 700; }
.roz-faq__list summary::marker { color: var(--color-ocean-jade); }
.roz-faq__list details p { max-width: 43rem; padding-right: var(--space-4); }
.roz-next { position: relative; }
.roz-next::before { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-ocean-jade), transparent); content: ''; }
.roz-next__intro { width: min(100%, 35rem); min-width: 0; }
.roz-next__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.roz-next__links a { display: flex; min-width: 0; min-height: 10rem; flex-direction: column; justify-content: center; gap: var(--space-3); border: var(--border-subtle); padding: var(--space-5); color: var(--color-smoked-white); text-decoration: none; }
.roz-next__links a:hover { border-color: var(--color-ocean-jade); background: rgba(47,158,145,.1); color: var(--color-smoked-white); }
.roz-next__links span { color: var(--color-burnished-metal); font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.roz-next__links strong { color: var(--color-ocean-jade-light); font-family: var(--font-heading); font-size: clamp(1.7rem, 3vw, 2.25rem); line-height: 1.05; }
.roz-next__links small { max-width: 20rem; color: var(--color-polished-steel); }
@keyframes roz-route-line { 0%,100% { transform: translateX(-8%); opacity: .35; } 50% { transform: translateX(8%); opacity: .8; } }
@media (max-width: 61.25rem) { .roz-route__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } .roz-route__stage:last-child { grid-column: span 2; } .roz-route__stages::before { display: none; } .roz-scene__media { grid-column: span 12; } .roz-scene__main { grid-column: span 6; } .roz-scene__support { grid-column: span 6; } .roz-casino__copy { grid-column: span 12; order: 2; } .roz-casino__media { grid-column: span 12; order: 1; max-width: 40rem; } .roz-casino__media img { min-height: 28rem; } .roz-table-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .roz-table-card:last-child { grid-column: span 2; max-width: calc(50% - var(--space-3)); } }
@media (max-width: 56.25rem) { .roz-hero, .roz-hero__content { min-height: 0; } .roz-hero { display: flex; flex-direction: column; } .roz-hero__image { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 10; background: url('/public/media/rozrywka-hero-nocny-statek.webp') center/cover no-repeat; } .roz-hero__image::after { display: none; } .roz-hero__content { display: block; width: 100%; padding: 0; } .roz-hero__panel { width: min(100% - (var(--page-padding) * 2), var(--container-max)); gap: var(--space-5); margin-inline: auto; border: 0; background: transparent; box-shadow: none; padding: var(--space-7) 0; backdrop-filter: none; } .roz-hero__panel h1 { font-size: clamp(2.875rem, 12vw, 3.5rem); } .roz-route__stages { grid-template-columns: 1fr; gap: var(--space-6); margin-left: .5rem; border-left: 1px solid var(--color-burnished-metal); padding-left: var(--space-5); } .roz-route__stage, .roz-route__stage:last-child { grid-column: 1; } .roz-route__stage::before { left: calc(-1 * var(--space-5) - .55rem); } .roz-recovery__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .roz-recovery__facts > article:nth-child(2) { border-inline-end: 0; } .roz-recovery__facts > article:last-child { grid-column: span 2; border-top: 1px solid rgba(154,128,104,.55); } .roz-detail-section__grid > figure { grid-column: span 12; } .roz-detail-section__copy { grid-column: span 12; } .roz-plan__steps::before { left: 1.375rem; } .roz-plan__steps { grid-template-columns: 1fr; } .roz-plan__steps > article { grid-column: 1; } }
@media (max-width: 42.5rem) { .roz-scene__grid, .roz-casino__grid, .roz-detail-section__grid { grid-template-columns: 1fr; gap: var(--space-5); } .roz-scene__media, .roz-scene__main, .roz-scene__support, .roz-casino__copy, .roz-casino__media, .roz-detail-section__grid > figure, .roz-detail-section__copy { grid-column: 1; } .roz-scene__main, .roz-scene__support { border-top: var(--border-light); padding-top: var(--space-5); } .roz-scene__media img { min-height: 0; aspect-ratio: 4 / 3; } .roz-casino__markers, .roz-detail-section__observations { grid-template-columns: 1fr; } .roz-casino__media img { min-height: 0; aspect-ratio: 4 / 5; } .roz-recovery__facts { display: block; } .roz-recovery__facts > article, .roz-recovery__facts > article:last-child { border-inline-end: 0; border-block-end: 1px solid rgba(154,128,104,.55); } .roz-recovery__facts > article:last-child { border-block-end: 0; } .roz-gallery-controls { display: none; } .roz-table-gallery { width: calc(100% + var(--page-padding)); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(17.5rem, 82vw); overflow-x: auto; padding-right: var(--page-padding); scroll-snap-type: x mandatory; } .roz-table-card, .roz-table-card:last-child { grid-column: auto; max-width: none; scroll-snap-align: start; } .roz-table-card > div { padding: var(--space-4); } .roz-detail-section__grid > figure img { min-height: 0; aspect-ratio: 3 / 2; } .roz-next__links { grid-template-columns: 1fr; } .roz-faq__list summary { padding-right: var(--space-3); } }
@media (prefers-reduced-motion: reduce) { .roz-hero__image::after { animation: none; } .roz-scene__media img, .roz-table-card img { transition: none; } }