/* ==========================================================================
   About Sayulita

   Same design language as Where to Eat: Amatic SC headings in brand purple,
   hairline section rules, rounded cards on a sand background. Everything is
   scoped under .about and centred on a shared max-width, which is what the
   old markup lacked - its content ran flush to the left of the viewport.
   ========================================================================== */

.about {
  --ab-purple: #7f3f98;
  --ab-ink:    #2b2530;
  --ab-soft:   #6d6577;
  --ab-line:   #e7e2ec;
  --ab-sand:   #faf7f2;

  background: var(--ab-sand);
  padding-bottom: 80px;
  color: var(--ab-ink);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}

/* One measure for every section, so nothing sits flush left. */
.about > * {
  box-sizing: border-box;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.about p { margin: 0 0 1.1em; }
.about p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- head -- */

.about-head {
  padding-top: 84px;
  padding-bottom: 4px;
  text-align: center;
}

.about-head h1 {
  margin: 0;
  font-family: "Amatic SC", cursive;
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 700;
  line-height: 1.02;
  color: var(--ab-purple);
}

/* The tagline sits under the title. text-indent cancels the trailing
   letter-space, which otherwise pushes centred tracked-out text visibly
   off-centre. No rules either side -- plain text only. */
.about-tagline {
  max-width: 640px;
  margin: 18px auto 0;
  text-align: center;
  color: var(--ab-soft);
  font-family: "Open Sans", sans-serif;
  font-size: clamp(.8125rem, 1.5vw, 1rem);
  font-weight: 600;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  line-height: 1.5;
}
/* ------------------------------------------------------- split sections -- */

.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding-top: 88px;
}

/* Media first on alternating sections, for rhythm down the page. */
.about-split--reverse .about-split-text  { order: 2; }
.about-split--reverse .about-split-media { order: 1; }

/* Column headings are plain: the hairline rules are reserved for full-width
   centred section headings, which is how Where to Eat uses them. */
.about-split-text h3 {
  margin: 0 0 .45em;
  font-family: "Amatic SC", cursive;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ab-purple);
}

.about-split-media { margin: 0; }
.about-split-media img {
  display: block;
  width: 100%;
  /* Pinned to a landscape box rather than left at the file's own proportions.
     One of these two photographs is portrait (778x892) and would otherwise run
     far taller than the column of text beside it, leaving the section lopsided.
     Cropping both to 4:3 keeps the two split sections matched. */
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(43, 37, 48, .04), 0 8px 20px rgba(43, 37, 48, .05);
}

.about-kicker {
  margin: 0 0 10px !important;
  color: var(--ab-purple);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
h2.about-kicker { font-size: .8125rem; }

/* ---------------------------------------------------------------- lede -- */

/* The long welcome passage, set larger and narrower so it stays readable. */
.about-lede {
  max-width: 820px;
  padding-top: 72px;
  text-align: center;
}
.about-lede p {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.75;
  color: var(--ab-soft);
}
.about-lede em { color: var(--ab-ink); font-style: italic; }

/* ---------------------------------------------------------------- band -- */

.about-band { padding-top: 88px; text-align: center; }

/* Section heading. Deliberately no flanking hairlines. */
.about-rule { margin: 0 0 22px; }
.about-rule h3 {
  margin: 0;
  font-family: "Amatic SC", cursive;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .02em;
  color: var(--ab-purple);
}

.about-band-intro {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  color: var(--ab-soft);
}

/* Signpost cards: one route into each section of the site. */
.about-guide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.about-guide a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 22px 20px;
  border: 1px solid var(--ab-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(43, 37, 48, .04), 0 8px 20px rgba(43, 37, 48, .05);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.about-guide a:hover {
  border-color: var(--ab-purple);
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(43, 37, 48, .08), 0 18px 38px rgba(43, 37, 48, .12);
}

.about-guide strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Amatic SC", cursive;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ab-purple);
}
.about-guide span {
  display: block;
  color: var(--ab-soft);
  font-size: .9375rem;
  line-height: 1.6;
}
.about-guide em {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  color: var(--ab-ink);
  font-size: .75rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.about-guide a:hover em { color: var(--ab-purple); }

/* Inline links under the "getting here" copy. */
.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 18px !important;
}
.about-links a {
  color: var(--ab-purple);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* Full-width closing image. */
.about-wide { margin: 88px auto 0; }
.about-wide img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(43, 37, 48, .04), 0 8px 20px rgba(43, 37, 48, .05);
}

/* The map. Replaces a screenshot, so it can now be panned and zoomed. */
.about-map { margin: 88px auto 0; }

.about-map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 1px solid var(--ab-line, #e7e2ec);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(43, 37, 48, .04), 0 8px 20px rgba(43, 37, 48, .05);
}

.about-map figcaption {
  margin-top: 10px;
  color: var(--ab-soft, #6d6577);
  font-size: .875rem;
  text-align: center;
}
.about-map figcaption a { color: var(--ab-purple, #7f3f98); font-weight: 600; }

@media (max-width: 720px) {
  .about-map { margin-top: 56px; }
  .about-map iframe { height: 320px; }
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 860px) {
  .about-split { grid-template-columns: 1fr; }

  /* Image above the copy once stacked, on every section. */
  .about-split--reverse .about-split-text  { order: 2; }
  .about-split--reverse .about-split-media { order: 1; }


  .about-guide { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .about > * { padding-left: 16px; padding-right: 16px; }
  .about-head { padding-top: 48px; }
  .about-split { padding-top: 44px; }
  .about-guide { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .about-guide a { transition: none; }
  .about-guide a:hover { transform: none; }
}