/* Grand Bend: the few pieces the shared editorial design does not have.
   The page is set on assets/css/guide-editorial.css (Playfair and Inter, thin
   rules, one accent per guide) and uses its components everywhere one exists.
   This file adds only what the other guides lack: the timed Saturday, the
   contacts list, the shoreline map and a four-across row of text cards, all
   in the shared --ge-* tokens so the accent and the type stay in step.
   Nothing here styles the shared chrome (.lfhx-header, .lfhx-footer,
   #lfhx-menu, .mobile-bottom-nav belong to nav-footer.css; see CLAUDE.md). */

/* Four anchor stops read as two rows of two on a wide screen, not three and
   one; the shared three-across grid strands the strip card alone. */
@media (min-width: 1024px) { .ge-columns--rows.gb-stops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem 3rem; } }

/* A second row of four photo cards, 05 to 08 across on a wide screen, two across
   on a tablet and stacked on a phone like the anchor stops above them. */
.gb-more-head { margin-top: 3rem; }
.gb-more-head .ge-small { max-width: 480px; }
@media (min-width: 1024px) { .ge-columns--rows.gb-more-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 2.25rem; } }

/* The Saturday: the shared timeline, with a column wide enough for "11:45 am". */
.ge-timeline.gb-day { margin-top: 0; }
.ge-timeline.gb-day div { grid-template-columns: 6.75rem 1fr; padding: 1.25rem 0; font-size: 15px; line-height: 1.75; }
@media (max-width: 480px) { .ge-timeline.gb-day div { grid-template-columns: 1fr; gap: .35rem; } }
.ge-timeline.gb-day dt { font-size: 24px; letter-spacing: -.02em; }
.ge-timeline.gb-day dd strong { display: block; margin-bottom: .25rem; font-family: var(--ge-serif); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; }
.gb-why { display: block; margin-top: .5rem; font-family: var(--ge-serif); font-style: italic; font-size: 15px; color: var(--ge-accent); }

/* Contacts and conditions inside a sand box; the rows beside it start at the top
   rather than floating mid-height next to a tall box. */
.ge-find-grid .gb-rows-top { align-self: start; }
.gb-contacts { margin-top: 1.25rem; border-top: 1px solid var(--ge-line); }
.gb-contacts div { padding: .9rem 0; border-bottom: 1px solid var(--ge-line); }
.gb-contacts dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; color: var(--ge-accent); }
.gb-contacts dd { margin-top: .35rem; font-size: .875rem; line-height: 1.75; color: var(--ge-muted); }
.gb-contacts .gb-tel { display: inline-block; margin-right: .5rem; font-family: var(--ge-serif); font-size: 24px; line-height: 1; color: var(--ge-ink); text-decoration: none; }

/* Getting here: the routes read as quiet service lines, the tip as a sand box. */
.gb-route { margin-top: 0; padding: 1.1rem 0; border-top: 1px solid var(--ge-line); }
.gb-route:first-child { padding-top: 0; border-top: 0; }
.gb-route p { max-width: 60ch; }
.gb-route strong { display: block; margin-bottom: .2rem; }
.ge-box.gb-sunday { margin-top: 1.5rem; }
.ge-box.gb-sunday p { margin-top: .5rem; }

/* The schematic map, drawn in the guide's ink and accent. */
.gb-map { margin: 0; align-self: start; }
.gb-map svg { display: block; width: 100%; height: auto; background: var(--ge-sand); }
.gb-m-lake { fill: #dfe6e5; }
.gb-m-shore { fill: none; stroke: var(--ge-ink); stroke-width: 1.5; }
.gb-m-dune { fill: var(--ge-accent); opacity: .55; }
.gb-m-road { fill: none; stroke: var(--ge-ink); stroke-width: 5; stroke-linecap: round; }
.gb-m-road--minor { stroke-width: 3; }
.gb-m-node { fill: var(--ge-sand); stroke: var(--ge-ink); stroke-width: 2; }
.gb-m-node--main { fill: var(--ge-accent); }
.gb-m-lakename { font-family: var(--ge-serif); font-style: italic; font-size: 30px; fill: var(--ge-ink); opacity: .75; }
.gb-m-label { font-family: var(--ge-sans); font-size: 12px; font-weight: 600; fill: var(--ge-ink); }
.gb-m-label--main { font-size: 15px; font-weight: 700; }
.gb-m-sub { font-family: var(--ge-sans); font-size: 10.5px; fill: var(--ge-muted); }
.gb-m-hwy { font-family: var(--ge-sans); font-size: 11px; font-weight: 700; letter-spacing: 1px; fill: var(--ge-accent-dark); }
.gb-m-compass { fill: #fff; stroke: var(--ge-ink); stroke-width: 1.5; }
.gb-m-needle { fill: var(--ge-ink); }