/* ============================================================
   PLAN YOUR VISIT — page styles.
   Editorial trip-planning page: drive-time cards, roads primer,
   season grid, town rows, sample itineraries, closing CTA.
   No map on this page — the itineraries link into the two
   map pages (things-to-do, stay) instead.
   ============================================================ */

/* ---------------- DRIVE-TIME CARDS ---------------- */
.routes { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.route { background:var(--paper); padding:1.5rem 1.3rem; position:relative; transition:background 0.16s; }
.route::before { content:""; position:absolute; left:0; top:0; right:0; height:3px; background:var(--goldenrod); transform:scaleX(0); transform-origin:left; transition:transform 0.35s var(--ease); }
.route:hover { background:#fff; }
.route:hover::before { transform:scaleX(1); }
.route__city { display:block; font-size:0.8125rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--clay); }
.route__time { display:block; font-family:'Fraunces',serif; font-size:1.9rem; font-weight:600; color:var(--spruce); line-height:1.1; margin-top:0.5rem; }
.route__meta { display:block; font-size:0.8125rem; color:#5a5b52; margin-top:0.45rem; }
.routes-note { font-size:0.8125rem; color:#6a6b62; margin-top:0.8rem; }

/* ---------------- ROADS PRIMER ---------------- */
.roads { margin-top:3rem; display:grid; grid-template-columns:minmax(0,38ch) 1fr; gap:2.5rem 3.5rem; align-items:start; }
.roads__lede { font-size:var(--body-l); color:#33342d; }
.roadlist { list-style:none; display:grid; gap:1.1rem; }
.roadlist li { display:flex; gap:0.9rem; align-items:baseline; }
.roadlist p { font-size:0.9375rem; color:var(--body-muted); }
.roadbadge { flex:none; font-size:0.75rem; font-weight:700; letter-spacing:0.05em; color:var(--limestone); background:var(--spruce); padding:0.25rem 0.6rem; border-radius:3px; min-width:3.4rem; text-align:center; }

/* honest practicality note — same voice as the stay-page note */
.plan-note { margin-top:2.5rem; padding:1rem 1.25rem; border-left:3px solid var(--goldenrod); background:var(--limestone-soft); border-radius:0 var(--radius) var(--radius) 0; font-size:0.875rem; color:#4a4b44; line-height:1.6; max-width:72ch; }

/* ---------------- SEASONS ---------------- */
.seasons { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.season { background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:1.5rem 1.4rem; box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:0.55rem; }
.season__months { font-size:0.75rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--goldenrod); }
.season h3 { font-size:1.35rem; }
.season p { font-size:0.9375rem; color:var(--body-muted); }
.season p a { font-weight:600; color:var(--ridge); border-bottom:1px solid var(--goldenrod); }
.season p a:hover { color:var(--spruce); }

/* ---------------- TOWN ROWS ---------------- */
.towns { display:grid; gap:1.1rem; max-width:860px; }
.town { display:flex; gap:1.4rem; align-items:flex-start; background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:1.3rem; box-shadow:var(--shadow-card); }
.town .duo { width:86px; height:86px; flex:none; border-radius:var(--radius); }
.town h3 { font-size:1.3rem; }
.town__tag { font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--clay); display:block; margin-bottom:0.15rem; }
.town p { font-size:0.9375rem; color:var(--body-muted); margin-top:0.35rem; }
.town__link { margin-top:0.5rem; font-size:0.8rem; font-weight:700; color:var(--ridge); display:inline-flex; align-items:center; gap:0.3rem; }
.town__link:hover,.town__link:focus-visible { color:var(--spruce); }
.town__link .arr { transition:transform 0.2s var(--ease); }
.town__link:hover .arr { transform:translateX(4px); }

/* ---------------- ITINERARIES ---------------- */
.itins { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; }
.itin { background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:1.75rem 1.6rem; box-shadow:var(--shadow-card); }
.itin h3 { font-size:1.45rem; }
.itin__sub { font-size:0.875rem; color:#6a6b62; margin-top:0.35rem; }
.itin__steps { list-style:none; counter-reset:step; margin-top:1.4rem; display:grid; gap:1.15rem; }
.itin__steps li { counter-increment:step; display:flex; gap:0.95rem; align-items:flex-start; }
.itin__steps li::before { content:counter(step); flex:none; width:26px; height:26px; border-radius:50%; background:var(--goldenrod); color:var(--spruce); font-weight:700; font-size:0.8125rem; display:grid; place-items:center; margin-top:0.1rem; }
.itin__when { display:block; font-size:0.6875rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--clay); }
.itin__steps p { font-size:0.9375rem; color:var(--body-muted); margin-top:0.15rem; }
.itin__steps a { font-weight:600; color:var(--ridge); border-bottom:1px solid var(--goldenrod); }
.itin__steps a:hover { color:var(--spruce); }

/* ---------------- CLOSING CTA ---------------- */
.plan-cta { position:relative; background:var(--spruce); color:var(--limestone); border-radius:var(--radius-lg); padding:clamp(2.5rem,5vw,3.75rem); overflow:hidden; isolation:isolate; }
.plan-cta__contours { position:absolute; inset:0; z-index:0; opacity:0.16; mix-blend-mode:soft-light; }
.plan-cta__inner { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; }
.plan-cta h2 { color:var(--limestone); font-size:clamp(1.6rem,2.6vw,2.1rem); max-width:22ch; }
.plan-cta h2 em { font-style:italic; color:var(--gold-soft); font-weight:500; }
.plan-cta p { color:rgba(239,235,227,0.85); margin-top:0.6rem; max-width:48ch; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:960px) {
  .routes { grid-template-columns:1fr 1fr; }
  .roads { grid-template-columns:1fr; gap:1.75rem; }
  .itins { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .seasons { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .routes { grid-template-columns:1fr; }
  .seasons { grid-template-columns:1fr; }
  .town { gap:1rem; }
  .town .duo { width:64px; height:64px; }
}