.restaurant-guide { overflow: hidden; }
.restaurant-guide__hero { position: relative; min-height: 38.75rem; background: var(--color-navy); color: var(--color-limestone); }
.restaurant-guide__hero-media, .restaurant-guide__hero-media::after { position: absolute; inset: 0; }
.restaurant-guide__hero-media::after { background: rgba(17,22,26,.42); content: ""; }
.restaurant-guide__hero-media img { width: 100%; height: 100%; object-fit: cover; }
.restaurant-guide__hero-shell { position: relative; z-index: 1; min-height: 38.75rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); align-content: end; padding-block: var(--space-9) var(--space-6); }
.restaurant-guide__hero-copy { grid-column: 1 / span 5; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.restaurant-guide__hero-copy > * { margin: 0; }
.restaurant-guide__location { color: var(--color-limestone-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.restaurant-guide__hero-copy h1 { max-width: 18ch; font-size: clamp(3.5rem, 6vw, 4.5rem); }
.restaurant-guide__hero-copy .lead { max-width: 56ch; }
.restaurant-guide__hero-actions, .restaurant-guide__closing-actions { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; gap: var(--space-4); }
.restaurant-guide__text-link { font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em; line-height: 1.5; text-underline-offset: .25em; }
.restaurant-guide__hero-route { grid-column: 1 / span 10; min-width: 0; margin-top: var(--space-6); }
.restaurant-guide__section-intro { width: 41.666%; min-width: 0; }
.restaurant-guide__principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.restaurant-guide__principles > article { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-map-line); }
.restaurant-guide__principles span { color: var(--color-copper); font-size: var(--text-sm); font-weight: 700; letter-spacing: .08em; }
.restaurant-guide__principles h3 { font-size: var(--text-lead); }
.restaurant-guide__principles p { max-width: 34ch; }
.restaurant-guide__atlas-intro { width: 50%; min-width: 0; }
.restaurant-guide__atlas-intro .lead { max-width: 62ch; }
.restaurant-guide__city-line { position: relative; display: flex; flex-direction: column; min-width: 0; gap: var(--space-6); margin: var(--space-7) 0 0; padding: 0; list-style: none; }
.restaurant-guide__city-line::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--color-map-line); content: ""; }
.restaurant-guide__city-line > li { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); min-width: 0; }
.restaurant-guide__city-line > li::before { position: absolute; top: var(--space-4); left: calc(50% - .375rem); width: .75rem; height: .75rem; border: 2px solid var(--color-copper); border-radius: 50%; background: var(--color-surface); content: ""; }
.restaurant-guide__city-line > li:nth-child(odd) article { grid-column: 1 / span 4; }
.restaurant-guide__city-line > li:nth-child(even) article { grid-column: 9 / span 4; }
.restaurant-guide__city-line article { min-width: 0; }
.restaurant-guide__city-line p:not(.coordinates) { max-width: 52ch; }
.restaurant-guide__city-line--active::before { background: var(--color-copper) !important; }
.restaurant-guide__table-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.restaurant-guide__table-copy { grid-column: 1 / span 5; min-width: 0; }
.restaurant-guide__table-copy p { max-width: 68ch; }
.restaurant-guide__table-copy article { padding-top: var(--space-4); border-top: 1px solid rgba(17,22,26,.16); }
.restaurant-guide__table-image { grid-column: 7 / span 6; min-width: 0; }
.restaurant-guide__table-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.restaurant-guide__table-conclusion { grid-column: 1 / span 7; min-width: 0; }
.restaurant-guide__table-conclusion p { max-width: 68ch; }
.restaurant-guide__regions-intro { width: 50%; min-width: 0; }
.restaurant-guide__region-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.restaurant-guide__region-grid > article { display: flex; flex-direction: column; min-width: 0; min-height: 16rem; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); }
.restaurant-guide__region-grid > article > * { margin: 0; }
.restaurant-guide__region-grid p:not(.coordinates) { max-width: 38ch; }
.restaurant-guide__region-grid a { margin-top: auto; }
.restaurant-guide__formats-intro { width: 50%; min-width: 0; }
.restaurant-guide__formats-intro .lead { max-width: 60ch; }
.restaurant-guide__format-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.restaurant-guide__format-grid > article { min-width: 0; padding: var(--space-4) 0; border-top: 1px solid rgba(17,22,26,.2); }
.restaurant-guide__format-grid > article:nth-child(1), .restaurant-guide__format-grid > article:nth-child(2) { grid-column: span 3; }
.restaurant-guide__format-grid > article:nth-child(3) { grid-column: span 6; }
.restaurant-guide__format-grid > article:nth-child(4), .restaurant-guide__format-grid > article:nth-child(5) { grid-column: span 6; }
.restaurant-guide__format-grid p { max-width: 34ch; }
.restaurant-guide__format-grid--wide p:not(.coordinates) { max-width: 48ch; }
.restaurant-guide__district-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.restaurant-guide__district-copy { grid-column: 1 / span 5; min-width: 0; }
.restaurant-guide__district-copy ol { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.restaurant-guide__district-copy li { position: relative; min-width: 0; padding-left: var(--space-5); border-left: 1px solid var(--color-map-line); }
.restaurant-guide__district-copy li::before { position: absolute; top: .5rem; left: -.28rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-copper); content: ""; }
.restaurant-guide__district-copy p { max-width: 46ch; }
.restaurant-guide__district-image { grid-column: 6 / span 7; min-width: 0; margin-top: var(--space-8); }
.restaurant-guide__district-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.restaurant-guide__days-intro, .restaurant-guide__evening-intro { width: 50%; min-width: 0; }
.restaurant-guide__day-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.restaurant-guide__day-grid > article { display: flex; flex-direction: column; min-width: 0; gap: var(--space-4); padding: var(--space-5); background: var(--color-surface); color: var(--color-ink); }
.restaurant-guide__day-grid > article > * { margin: 0; }
.restaurant-guide__day-grid p { max-width: 36ch; }
.restaurant-guide__day-grid ol { display: flex; flex-direction: column; gap: var(--space-2); padding: 0; list-style: none; color: var(--color-copper); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; }
.restaurant-guide__day-grid a { margin-top: auto; }
.restaurant-guide__checks-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.restaurant-guide__checks-grid > div { grid-column: 1 / span 4; min-width: 0; }
.restaurant-guide__checks-grid dl { grid-column: 5 / span 8; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.restaurant-guide__checks-grid dl > div { display: grid; grid-template-columns: 25% minmax(0, 1fr); gap: var(--space-4); min-width: 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-map-line); }
.restaurant-guide__checks-grid dd { min-width: 0; margin: 0; }
.restaurant-guide__checks-grid dd > *:last-child { margin-bottom: 0; }
.restaurant-guide__checks-grid dd p { max-width: 58ch; }
.restaurant-guide__evening-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.restaurant-guide__evening-grid > article { min-width: 0; }
.restaurant-guide__evening-grid .panel__content { display: flex; flex-direction: column; min-height: 100%; gap: var(--space-4); }
.restaurant-guide__evening-grid .panel__content > * { margin: 0; }
.restaurant-guide__evening-grid p:not(.eyebrow) { max-width: 50ch; }
.restaurant-guide__evening-links { display: flex; flex-direction: column; gap: var(--space-3); }
.restaurant-guide__closing { position: relative; }
.restaurant-guide__closing::after { position: absolute; top: 50%; left: 70%; width: 40%; border-top: 1px solid var(--color-map-line); content: ""; }
.restaurant-guide__closing-block { position: relative; z-index: 1; width: 50%; min-width: 0; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.restaurant-guide__closing-block > * { margin: 0; }
.restaurant-guide__closing-block .lead { max-width: 60ch; }
@media (max-width: 1024px) { .restaurant-guide__city-line::before { left: 1rem; } .restaurant-guide__city-line > li { grid-template-columns: 2.5rem minmax(0, 1fr); } .restaurant-guide__city-line > li::before { left: .625rem; } .restaurant-guide__city-line > li:nth-child(odd) article, .restaurant-guide__city-line > li:nth-child(even) article { grid-column: 2; } }
@media (max-width: 960px) { .restaurant-guide__hero { min-height: 43rem; } .restaurant-guide__hero-shell { min-height: 43rem; grid-template-columns: repeat(8, minmax(0, 1fr)); } .restaurant-guide__hero-copy { grid-column: 1 / span 5; } .restaurant-guide__hero-route { grid-column: 1 / span 8; } .restaurant-guide__principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .restaurant-guide__principles > article:nth-child(3) { grid-column: 1 / span 2; width: calc(50% - var(--space-3)); } .restaurant-guide__table-grid, .restaurant-guide__district-grid, .restaurant-guide__checks-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .restaurant-guide__table-copy, .restaurant-guide__table-image, .restaurant-guide__table-conclusion { grid-column: 1 / span 8; } .restaurant-guide__table-image { order: -1; } .restaurant-guide__region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .restaurant-guide__format-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .restaurant-guide__format-grid > article:nth-child(1), .restaurant-guide__format-grid > article:nth-child(2), .restaurant-guide__format-grid > article:nth-child(4), .restaurant-guide__format-grid > article:nth-child(5) { grid-column: span 4; } .restaurant-guide__format-grid > article:nth-child(3) { grid-column: 1 / span 8; } .restaurant-guide__district-copy, .restaurant-guide__district-image { grid-column: 1 / span 8; } .restaurant-guide__district-image { order: -1; margin-top: 0; } .restaurant-guide__district-copy ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .restaurant-guide__day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .restaurant-guide__day-grid > article:nth-child(3) { grid-column: 1 / span 2; } .restaurant-guide__checks-grid > div, .restaurant-guide__checks-grid dl { grid-column: 1 / span 8; } }
@media (max-width: 760px) { .restaurant-guide__evening-grid { grid-template-columns: 1fr; } .restaurant-guide__closing-block { width: 75%; } }
@media (max-width: 720px) { .restaurant-guide__hero { min-height: 0; display: flex; flex-direction: column; } .restaurant-guide__hero-media { position: relative; inset: auto; height: auto; } .restaurant-guide__hero-media::after { background: rgba(17,22,26,.24); } .restaurant-guide__hero-media img { aspect-ratio: 4 / 3; } .restaurant-guide__hero-shell { min-height: 0; display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-6); } .restaurant-guide__hero-copy { width: 100%; } .restaurant-guide__hero-copy h1 { font-size: 2.5rem; line-height: 1.1; } .restaurant-guide__hero-copy .lead { max-width: none; } .restaurant-guide__hero-route { width: 100%; margin-top: 0; } .restaurant-guide__section-intro, .restaurant-guide__atlas-intro, .restaurant-guide__regions-intro, .restaurant-guide__formats-intro, .restaurant-guide__days-intro, .restaurant-guide__evening-intro { width: 100%; } .restaurant-guide__principles, .restaurant-guide__region-grid, .restaurant-guide__day-grid { grid-template-columns: 1fr; } .restaurant-guide__principles > article:nth-child(3), .restaurant-guide__day-grid > article:nth-child(3) { grid-column: auto; width: auto; } .restaurant-guide__city-line { gap: var(--space-5); } .restaurant-guide__table-grid, .restaurant-guide__district-grid, .restaurant-guide__checks-grid { gap: var(--space-5); } .restaurant-guide__region-grid > article { min-height: 11.25rem; padding: var(--space-5); } .restaurant-guide__format-grid { grid-template-columns: 1fr; gap: 0; } .restaurant-guide__format-grid > article:nth-child(n) { grid-column: auto; } .restaurant-guide__format-grid p, .restaurant-guide__format-grid--wide p:not(.coordinates) { max-width: none; } .restaurant-guide__district-copy ol { grid-template-columns: 1fr; } .restaurant-guide__checks-grid dl > div { grid-template-columns: 1fr; gap: var(--space-2); } .restaurant-guide__closing::after { display: none; } .restaurant-guide__closing-block { width: 100%; } .restaurant-guide__closing-actions { align-items: stretch; flex-direction: column; } .restaurant-guide__closing-actions .button { width: 100%; } }
@media (prefers-reduced-motion: no-preference) { .restaurant-guide__table-image img, .restaurant-guide__district-image img { transition: transform var(--transition-base); } .restaurant-guide__table-image:hover img, .restaurant-guide__district-image:hover img { transform: scale(1.02); } }