.offline-poker-page { background: var(--surface-page); }
.offline-poker-page .section { position: relative; }
.offline-poker-page .op-rule::before { content: ""; display: block; width: 3rem; height: 2px; margin-bottom: var(--space-3); background: var(--color-subtle-copper); }
.offline-poker-page .op-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: start; }
.offline-poker-page .op-hero__copy { min-width: 0; max-width: 32.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.offline-poker-page .op-hero__copy > * { min-width: 0; margin: 0; }
.offline-poker-page .op-hero h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); }
.offline-poker-page .op-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); width: 100%; }
.offline-poker-page .op-hero__actions > * { min-width: 0; }
.offline-poker-page .op-hero__availability { max-width: 28rem; }
.offline-poker-page .op-offline-note { width: 100%; max-width: 24.5rem; padding: var(--space-4); border-top: 3px solid var(--color-muted-teal); background: var(--color-deep-navy); color: var(--color-warm-white); }
.offline-poker-page .op-offline-note p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-compact); }
.offline-poker-page .op-hero__media { width: 100%; min-width: 0; margin: 2rem 0 0; aspect-ratio: 16 / 9; }
.offline-poker-page .op-hero__media img { height: 100%; object-position: right center; }
.offline-poker-page .op-atmosphere__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8.333%; align-items: start; }
.offline-poker-page .op-atmosphere__media { width: 100%; min-width: 0; aspect-ratio: 4 / 5; }
.offline-poker-page .op-atmosphere__media img { height: 100%; }
.offline-poker-page .op-atmosphere__story { min-width: 0; display: flex; flex-direction: column; gap: var(--space-7); }
.offline-poker-page .op-atmosphere__intro { max-width: 35rem; }
.offline-poker-page .op-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.offline-poker-page .op-pillar { min-width: 0; padding-top: var(--space-4); border-top: var(--border-subtle); }
.offline-poker-page .op-pillar--wide { grid-column: 1 / -1; }
.offline-poker-page .op-pillar h3::before { content: ""; display: block; width: 2rem; height: 2px; margin-bottom: var(--space-3); background: var(--color-subtle-copper); }
.offline-poker-page .op-moods::before { content: ""; position: absolute; inset: 20% 0 auto; height: 40%; opacity: .16; background-image: linear-gradient(rgb(63 119 114 / 22%) 1px, transparent 1px), linear-gradient(90deg, rgb(63 119 114 / 22%) 1px, transparent 1px); background-size: 3rem 3rem; pointer-events: none; }
.offline-poker-page .op-moods > .container { position: relative; }
.offline-poker-page .op-moods__intro { max-width: 38.75rem; }
.offline-poker-page .op-moods__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-8); margin-top: var(--space-7); }
.offline-poker-page .op-mood-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-raised); transition: border-color var(--transition-fast), transform var(--transition-fast); }
.offline-poker-page .op-mood-card > * { min-width: 0; margin: 0; }
.offline-poker-page .op-mood-card:nth-child(2) { margin-top: var(--space-5); }
.offline-poker-page .op-mood-card::before { content: ""; width: .85rem; height: .85rem; border: 2px solid var(--color-muted-teal); transform: rotate(45deg); }
.offline-poker-page .op-moods__note { max-width: 42.5rem; margin: var(--space-5) 0 0; }
.offline-poker-page .op-select-link { color: var(--color-teal-deep); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.offline-poker-page .op-welcome__panel { min-width: 0; padding: clamp(1.5rem, 4vw, 4rem); border-radius: var(--radius-md); background-image: linear-gradient(90deg, rgb(247 244 236 / 3%) 1px, transparent 1px), linear-gradient(rgb(247 244 236 / 3%) 1px, transparent 1px); background-size: 2.5rem 2.5rem; }
.offline-poker-page .op-welcome__heading { max-width: 38.75rem; }
.offline-poker-page .op-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.offline-poker-page .op-step { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid rgb(247 244 236 / 25%); }
.offline-poker-page .op-step__number { color: #8fcbc4; font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: .12em; }
.offline-poker-page .op-step h3 { margin-bottom: var(--space-3); }
.offline-poker-page .op-step .button { margin-top: var(--space-3); }
.offline-poker-page .op-etiquette__intro { max-width: 36.25rem; }
.offline-poker-page .op-etiquette__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-7); }
.offline-poker-page .op-etiquette-item { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-5); border-left: var(--border-subtle); }
.offline-poker-page .op-etiquette-item:first-child { padding-left: 0; border-left: 0; }
.offline-poker-page .op-etiquette-item > span { color: var(--color-subtle-copper); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.offline-poker-page .op-etiquette-item h3 { margin-bottom: var(--space-3); }
.offline-poker-page .op-dining__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; align-items: start; }
.offline-poker-page .op-dining__media { width: 100%; min-width: 0; aspect-ratio: 3 / 2; }
.offline-poker-page .op-dining__media img { height: 100%; }
.offline-poker-page .op-dining__media figcaption { position: absolute; }
.offline-poker-page .op-dining__copy { min-width: 0; max-width: 32.5rem; display: flex; flex-direction: column; gap: var(--space-5); }
.offline-poker-page .op-dining__copy > * { min-width: 0; margin: 0; }
.offline-poker-page .op-dining__main { max-width: 32.5rem; }
.offline-poker-page .op-dining__inset { max-width: 24.5rem; padding: var(--space-5); background: var(--color-pale-sand); }
.offline-poker-page .op-groups__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: start; }
.offline-poker-page .op-groups__rail { min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.offline-poker-page .op-groups__rail > * { min-width: 0; margin: 0; }
.offline-poker-page .op-groups__rail article { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.offline-poker-page .op-groups__rail article > * { margin: 0; }
.offline-poker-page .op-groups__checklist { min-width: 0; max-width: 26.25rem; padding: var(--space-6); }
.offline-poker-page .op-groups__checklist ul { margin-bottom: 0; }
.offline-poker-page .op-enquiry__intro { max-width: 37.5rem; }
.offline-poker-page .op-enquiry__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: start; margin-top: var(--space-7); }
.offline-poker-page .op-enquiry-form { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.offline-poker-page .op-enquiry-form > * { min-width: 0; margin: 0; }
.offline-poker-page .op-form-grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.offline-poker-page .op-field { min-width: 0; }
.offline-poker-page .op-field--full { grid-column: 1 / -1; }
.offline-poker-page .op-radio-group { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.offline-poker-page .op-radio-group > * { min-width: 0; }
.offline-poker-page .op-consent { display: flex; gap: var(--space-2); align-items: flex-start; }
.offline-poker-page .op-consent input { width: 1.125rem; flex: 0 0 1.125rem; margin-top: .2rem; }
.offline-poker-page .op-consent label { margin: 0; font-weight: var(--weight-regular); }
.offline-poker-page .op-consent .form-error { grid-column: 1 / -1; }
.offline-poker-page .op-form-summary { width: 100%; padding: var(--space-3); border-left: 3px solid var(--color-error); background: #fff4f2; color: var(--color-error); font-weight: var(--weight-semibold); }
.offline-poker-page .op-enquiry__reassurance { min-width: 0; padding: var(--space-6); border-top: 3px solid var(--color-muted-teal); border-radius: var(--radius-md); }
.offline-poker-page .op-enquiry__reassurance p:last-child { max-width: 33.75rem; }
.offline-poker-page .op-faq__module { width: min(100%, 55rem); margin-inline: auto; }
.offline-poker-page .op-faq__intro { max-width: 38.75rem; }
.offline-poker-page .op-accordion { margin: var(--space-6) 0 var(--space-5); border: var(--border-strong); background: var(--surface-raised); }
.offline-poker-page .op-accordion__item { min-width: 0; border-bottom: var(--border-subtle); }
.offline-poker-page .op-accordion__item:last-child { border-bottom: 0; }
.offline-poker-page .op-accordion__item h3 { margin: 0; font-family: var(--font-body); font-size: var(--text-base); }
.offline-poker-page .op-accordion__item button { width: 100%; min-width: 0; min-height: 2.75rem; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 0; border-radius: 0; background: transparent; color: var(--color-charcoal-ink); text-align: left; }
.offline-poker-page .op-accordion__item button:hover { background: var(--color-pale-sand); color: var(--color-charcoal-ink); }
.offline-poker-page .op-accordion__item button[aria-expanded="true"] { border-left: 3px solid var(--color-muted-teal); }
.offline-poker-page .op-accordion__answer { max-width: 38.75rem; padding: 0 var(--space-4) var(--space-4); }
.offline-poker-page .op-closing { padding-bottom: calc(var(--section-space) + 5rem + env(safe-area-inset-bottom)); }
.offline-poker-page .op-closing__content { max-width: 42.5rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.offline-poker-page .op-closing__content > * { min-width: 0; margin: 0; }
.offline-poker-page .op-closing__clarification { max-width: 31.25rem; font-size: var(--text-sm); }
.offline-poker-page .op-closing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.offline-poker-page .op-closing__actions > * { min-width: 0; }
@media (hover: hover) and (pointer: fine) { .offline-poker-page .op-mood-card:hover { border-color: rgb(32 37 34 / 45%); transform: translateY(-2px); } .offline-poker-page .frame:hover img { transform: scale(1.015); } .offline-poker-page .frame img { transition: transform var(--transition-slow); } }
@media (max-width: 63.9375rem) { .offline-poker-page .op-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } .offline-poker-page .op-hero__media { margin-top: 0; } .offline-poker-page .op-atmosphere__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); } .offline-poker-page .op-etiquette__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) 0; } .offline-poker-page .op-etiquette-item:nth-child(3) { padding-left: 0; border-left: 0; } .offline-poker-page .op-dining__grid, .offline-poker-page .op-groups__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
@media (max-width: 56.1875rem) { .offline-poker-page .op-hero__grid, .offline-poker-page .op-atmosphere__grid, .offline-poker-page .op-dining__grid, .offline-poker-page .op-groups__grid, .offline-poker-page .op-enquiry__grid { grid-template-columns: minmax(0, 1fr); } .offline-poker-page .op-hero__copy, .offline-poker-page .op-dining__copy { max-width: 32.5rem; } .offline-poker-page .op-atmosphere__media, .offline-poker-page .op-dining__media { max-width: 40rem; } .offline-poker-page .op-pillars { grid-template-columns: minmax(0, 1fr); } .offline-poker-page .op-pillar--wide { grid-column: auto; } .offline-poker-page .op-steps { grid-template-columns: minmax(0, 1fr); } .offline-poker-page .op-step { flex-direction: row; } .offline-poker-page .op-step__number { flex: 0 0 2.5rem; } .offline-poker-page .op-mood-card:nth-child(2) { margin-top: 0; } .offline-poker-page .op-enquiry__reassurance { max-width: 42.5rem; } }
@media (max-width: 44.9375rem) { .offline-poker-page .section { padding-block: clamp(2.5rem, 10vw, 3.5rem); } .offline-poker-page .op-hero__grid { gap: var(--space-5); } .offline-poker-page .op-hero__copy { max-width: none; } .offline-poker-page .op-hero h1 { font-size: clamp(2.375rem, 11vw, 2.75rem); } .offline-poker-page .op-hero__actions, .offline-poker-page .op-closing__actions { flex-direction: column; width: 100%; } .offline-poker-page .op-hero__actions .button, .offline-poker-page .op-closing__actions .button { width: 100%; } .offline-poker-page .op-hero__media { width: calc(100% + (var(--container-gutter) * 2)); max-width: none; margin-left: calc(var(--container-gutter) * -1); border-inline: 0; border-radius: 0; } .offline-poker-page .op-atmosphere__story { gap: var(--space-5); } .offline-poker-page .op-moods__grid, .offline-poker-page .op-etiquette__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } .offline-poker-page .op-mood-card { padding: var(--space-4); } .offline-poker-page .op-etiquette-item, .offline-poker-page .op-etiquette-item:nth-child(3) { flex-direction: row; padding: 0 0 var(--space-5); border-left: 0; border-bottom: var(--border-subtle); } .offline-poker-page .op-etiquette-item > span { flex: 0 0 2rem; } .offline-poker-page .op-etiquette-item:last-child { border-bottom: 0; } .offline-poker-page .op-dining__media { width: calc(100% + (var(--container-gutter) * 2)); max-width: none; margin-left: calc(var(--container-gutter) * -1); border-inline: 0; border-radius: 0; } .offline-poker-page .op-dining__copy { max-width: none; } .offline-poker-page .op-groups__checklist { max-width: none; padding: var(--space-4); } .offline-poker-page .op-form-grid { grid-template-columns: minmax(0, 1fr); } .offline-poker-page .op-field--full { grid-column: auto; } .offline-poker-page .op-enquiry-form { padding: var(--space-4); } .offline-poker-page .op-enquiry-form > button { width: 100%; } .offline-poker-page .op-closing { padding-bottom: calc(4.5rem + 5rem + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .offline-poker-page .op-mood-card, .offline-poker-page .frame img { transition: none; } .offline-poker-page .op-mood-card:hover, .offline-poker-page .frame:hover img { transform: none; } }