/* Location pages: airport guides + delivery zone pages.
   Loaded per-page via {% block head_extra %} so site.css stays untouched.
   Everything rides on the existing .article pattern (paper background, ink text,
   760px wrap) that the blog already uses.

   SPECIFICITY NOTE: site.css styles the article body with two-class selectors,
   e.g. `.article .content h2 {color:var(--ink); margin:34px 0 12px}` (0-2-1).
   Any rule here that targets a bare element inside .content must therefore be
   at least as specific, hence the `.loc .content ...` prefixes below. Without
   them site.css silently wins and headings render ink-on-blue. */

/* ---- Article shell ---- */
/* The blog gets its top padding from .crumbs, which these pages do not have. */
.article.loc .wrap { padding-top: 44px; }
.article.loc h1 { margin-top: 0; }
.article.loc .lede { font-size: 19px; line-height: 1.6; color: var(--muted); margin: 0 0 6px; }

/* site.css sets a global section{padding:78px 0}. Far too much inside an
   article, so neutralise it and use margins instead. */
.loc .content section { padding: 0; margin: 0 0 34px; }

/* ---- Photos ---- */
.loc-fig { margin: 24px 0 26px; }
.loc-fig img {
  display: block; width: 100%; border-radius: 14px;
  border: 1.5px solid #d9def0; background: #fff;
}

/* ---- Zone grid (Across Lisbon) ---- */
.loc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 26px 0 8px; }
.loc-card {
  background: #fff; border: 1.5px solid #d4d9ea; border-radius: 16px;
  padding: 22px 24px; transition: transform .18s ease, box-shadow .18s ease;
}
.loc-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(14, 28, 94, .16); }
.loc .content .loc-card h2 { font-size: 21px; margin: 0 0 8px; color: var(--ink); }
.loc .content .loc-card h2 a { color: var(--blue); text-decoration: none; }
.loc .content .loc-card h2 a:hover { text-decoration: underline; }
.loc .content .loc-card p { margin: 0; font-size: 15px; color: var(--muted); }

/* ---- Areas we cover ---- */
.loc .content .loc-areas ul { columns: 2; column-gap: 28px; }
.loc .content .loc-areas li { break-inside: avoid; margin-bottom: 6px; }

/* ---- How it works ---- */
.loc .content .loc-how ol { padding-left: 22px; margin: 0 0 18px; }
.loc .content .loc-how li { margin-bottom: 10px; }

/* ---- FAQ ---- */
.loc-faq { margin: 34px 0; }
.loc .content .loc-faq h2 { margin: 0 0 4px; }
.loc-faq details { border-top: 1.5px solid #d9def0; padding: 16px 0; }
.loc-faq details:last-of-type { border-bottom: 1.5px solid #d9def0; }
.loc-faq summary {
  cursor: pointer; font-weight: 600; font-size: 16px; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.loc-faq summary::-webkit-details-marker { display: none; }
.loc-faq summary::after { content: "+"; color: var(--blue); font-weight: 700; }
.loc-faq details[open] summary::after { content: "\2212"; }
.loc .content .loc-faq details p { margin: 12px 0 0; color: #2a2e3e; }

/* ---- CTA panel (blue island on the paper background) ----
   These need the .loc .content prefix or site.css paints the heading ink-on-blue. */
.loc-cta {
  background: var(--blue); color: #fff; border-radius: 18px;
  padding: 32px 34px; margin: 40px 0;
}
.loc .content .loc-cta h2 { color: #fff; margin: 0 0 10px; font-size: 27px; }
.loc .content .loc-cta p { color: #dfe3f4; margin: 0 0 22px; max-width: 46ch; }

/* ---- Related links ---- */
.loc-related { border-top: 1.5px solid #d9def0; padding: 26px 0 0; margin-bottom: 10px; }
.loc .content .loc-related h2 { font-size: 20px; margin: 0 0 12px; }
.loc .content .loc-related ul { list-style: none; padding-left: 0; margin: 0; }
.loc .content .loc-related li { margin-bottom: 8px; }
.loc .content .loc-related a { color: var(--blue); font-weight: 600; text-decoration: none; }
.loc .content .loc-related a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .loc-grid { grid-template-columns: 1fr; }
  .loc .content .loc-areas ul { columns: 1; }
  .loc-cta { padding: 26px 22px; }
}