/* Shared components for the ten "3 Perfect Days" pages at
   /guide/3-perfect-days-*. The page content is generated into
   guide/*.html by scripts/gen-guide-pages.mjs from the reviewed mockups
   in docs/prototypes/lightsage/. Palette tokens come from styles.css. */

.ag-hero {
  background: var(--ink); color: var(--paper);
  padding: 96px 44px 84px; text-align: center;
}
.ag-hero .eyebrow { color: var(--gold); }
.ag-hero h1 {
  font-family: 'Fraunces', serif; font-weight: 300;
  font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: -.035em;
  margin: 14px auto 0; max-width: 15ch;
}
.ag-hero h1 em { font-style: italic; color: var(--gold); }

.ag-lede { background: var(--paper); padding: 72px 44px 0; }
.ag-lede-inner { max-width: 760px; margin: 0 auto; }
.ag-lede p {
  font-family: 'Fraunces', serif; font-weight: 300;
  font-size: clamp(20px, 2.3vw, 27px); line-height: 1.45;
  color: var(--ink); margin: 0;
}

.ag-wrap { background: var(--paper); padding: 64px 44px 110px; }
.ag-inner { max-width: 880px; margin: 0 auto; }

.ag-day { border-top: 1px solid var(--line); padding: 44px 0 8px; }
.ag-day:first-of-type { border-top: none; }
.ag-day-head { display: flex; align-items: baseline; gap: 16px; margin: 0 0 26px; flex-wrap: wrap; }
.ag-day-num {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper); background: var(--accent);
  padding: 5px 12px; border-radius: 999px; font-weight: 600;
}
.ag-day-head h2 {
  font-family: 'Fraunces', serif; font-weight: 300;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05;
  letter-spacing: -.03em; margin: 0; color: var(--ink);
}
.ag-day-head h2 em { font-style: italic; color: var(--accent); }

.ag-stop { display: grid; grid-template-columns: 128px 1fr; gap: 24px; padding: 0 0 26px; }
.ag-when {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding-top: 5px;
}
.ag-stop h3 {
  font-family: 'Fraunces', serif; font-weight: 400; font-size: 21px;
  margin: 0 0 6px; letter-spacing: -.01em; color: var(--ink);
}
.ag-stop p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.ag-stop .ag-facts {
  margin: 9px 0 0; display: flex; gap: 8px; flex-wrap: wrap;
}
.ag-stop .ag-facts span {
  font-size: 11.5px; letter-spacing: .04em; color: var(--muted);
  background: var(--cream); border: 1px solid var(--line);
  padding: 3px 10px; border-radius: 999px;
}

.ag-basecamp {
  background: var(--cream); border-radius: 16px;
  padding: 34px 36px; margin: 54px 0 0;
}
.ag-basecamp h2 {
  font-family: 'Fraunces', serif; font-weight: 300; font-size: 30px;
  letter-spacing: -.02em; margin: 0 0 8px; color: var(--ink);
}
.ag-basecamp h2 em { font-style: italic; color: var(--accent); }
.ag-basecamp p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 18px; }
.ag-basecamp ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ag-basecamp li { font-size: 14.5px; color: var(--ink-soft); padding-left: 20px; position: relative; }
.ag-basecamp li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}

.ag-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 44px 0 0; }
.ag-next a {
  display: block; background: var(--cream); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px 22px; text-decoration: none;
  transition: transform .25s, background .25s;
}
.ag-next a:hover { transform: translateY(-3px); background: var(--cream-2); }
.ag-next .k { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ag-next .t { font-family: 'Fraunces', serif; font-size: 20px; color: var(--ink); margin-top: 5px; display: block; }

@media (max-width: 700px) {
  .ag-stop { grid-template-columns: 1fr; gap: 4px; }
  .ag-when { padding-top: 0; }
}

/* Inline summary card, linking back to the matching card in the Local Guide.
   Content is generated from the guide seed, so a name, drive time, or dog
   flag can never drift from the entry it points at. */
.gmini {
  display: grid; gap: 2px; margin: 12px 0 0; padding: 14px 16px;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: 12px; text-decoration: none; max-width: 420px;
  transition: transform .22s, background .22s, border-color .22s;
}
a.gmini:hover { transform: translateY(-2px); background: var(--cream-2); border-color: var(--accent); }
.gm-kind { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.gm-name { font-family: 'Fraunces', serif; font-size: 19px; color: var(--ink); line-height: 1.15; }
.gm-meta { font-size: 13px; color: var(--muted); }
.gm-go { font-size: 12px; color: var(--accent); font-weight: 500; margin-top: 5px; }

/* Local knowledge that is not a stop on any one day. */
.ag-tips { background: var(--cream-2, var(--cream)); border-radius: 16px; padding: 32px 36px; margin: 44px 0 0; }
.ag-tips h2 {
  font-family: 'Fraunces', serif; font-weight: 300; font-size: 28px;
  letter-spacing: -.02em; margin: 0 0 16px; color: var(--ink);
}
.ag-tips h2 em { font-style: italic; color: var(--accent); }
.ag-tips ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ag-tips li { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); padding-left: 20px; position: relative; }
.ag-tips li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.ag-tips li b { color: var(--ink); font-weight: 600; }
/* ---- Booking bar, lifted from index.html so the two cannot drift ---- */
:root {
  --ldg-psb-background: #ffffff;
  --ldg-psb-border-radius: 0.42em;
  --ldg-psb-box-shadow: 0px 24px 54px 0px rgba(0, 0, 0, 0.1);
  --ldg-psb-padding: 14px;
  --ldg-psb-input-background: #ffffff;
  --ldg-psb-button-border-radius: 3.58em;
  --ldg-psb-color-primary: #b89647;
  --ldg-psb-color-primary-lighter:#dccba3;
  --ldg-psb-color-primary-darker: #5c4b24;
  --ldg-psb-color-primary-contrast: #333333;
  --ldg-semantic-color-primary:  #b89647;
  --ldg-semantic-color-primary-lighter: #dccba3;
  --ldg-semantic-color-primary-darker: #5c4b24;
  --ldg-semantic-color-primary-contrast: #333333;
  --ldg-component-modal-z-index: 999;
}
#lodgify-search-bar { width: 100%; color: #333333; }
#lodgify-search-bar [data-testid="guests-breakdown-trigger-value"] { color: #333333 !important; }
/* The bar's wide layout wants about 830px. The itinerary column gives it 808
   (.ag-inner 880, less .ag-book's 36px side padding), which is just under, so
   the Search button sat 5px past the white bar's right edge: padding on the
   left, none on the right. The home page hero gives it 827 and is fine, which
   is why this lives here and not in styles.css.

   Trimmed at the button rather than by widening the column to a magic number,
   so it also holds if the copy or the column ever changes. Below 900px the
   widget swaps to its own narrow layout and this does not apply. */
#lodgify-search-bar a.primary { padding-left: 34px; padding-right: 34px; }

.ag-book { margin: 44px 0 0; padding: 38px 36px 42px; background: var(--ink); border-radius: 16px; }
.ag-book .eyebrow { color: var(--gold); }
.ag-book h2 {
  font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -.025em; margin: 10px 0 8px; color: var(--paper);
}
.ag-book h2 em { font-style: italic; color: var(--gold); }
.ag-book p { font-size: 15px; line-height: 1.6; color: var(--paper); opacity: .78; margin: 0 0 26px; max-width: 56ch; }
@media (max-width: 700px) { .ag-book { padding: 30px 22px 34px; } }