/* Reading pages in the "/" design: the blog, and the SEO directory pages.
 *
 * Loaded by places/v3/page.html on top of chrome-v3.css (the tokens, the type
 * stack, the header and footer) and discovery-v3.css (.chip, and the palette
 * the map shell shares). This file adds only what a document needs and the map
 * shell does not: a measure column, article typography, and cards for posts,
 * directory links and place rows.
 *
 * Why a third file: discovery-v3.css is the app shell and is what "/" is
 * judged on -- article typography has no business being parsed on the screen
 * that has to paint a map fast.
 *
 * NOTE for the service worker: /static/* is cached cache-first with no
 * revalidation, so bump `version` in places/static/js/places/serviceworker.js
 * whenever this file changes. See README-styling.md.
 */

/* ==========================================================================
   The document shell.

   discovery-v3.css pins the body to the viewport below 900px -- overflow
   hidden, height 100dvh -- because down there "/" is an app with a map under
   a bottom sheet. A blog post is not that, so body.v3-doc undoes exactly those
   two decisions. The class is set by places/v3/page.html, and chrome-v3.css
   keys the two-row mobile header off the same class.
   ========================================================================== */
.v3-doc { background: var(--surface); }

/* Pushes the footer to the bottom on a short page (body is a flex column). */
.docmain { flex: 1 0 auto; }

.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--margin-desktop);
}
/* Location and query names arrive from the database in whatever case the
   editor typed; the SEO pages title-case them for display. */
.capitalize { text-transform: capitalize; }

/* The measure for running text: 792px less .wrap's 2x40px padding is a 712px
   column, about 65 characters at 19px. That is the usual 60-75 target, and it
   is the width the article head, the body and the CTA all share so the page
   reads as one column rather than three stacked blocks. */
.wrap--narrow { max-width: 792px; }

@media (max-width: 900px) {
  /* A document scrolls. */
  body.v3-doc {
    overflow: visible;
    height: auto;
    min-height: 100%;
  }
  .wrap { padding: 0 var(--margin-mobile); }
}

/* ==========================================================================
   Page furniture: breadcrumbs and the heading band.
   ========================================================================== */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-label);
  font-size: 13px;
  line-height: 18px;
  color: var(--on-surface-variant);
}
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before {
  content: "/";
  color: var(--outline-variant);
}
.crumbs a { color: var(--on-surface-variant); text-decoration: none; }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--on-surface); font-weight: 700; }

/* The band every reading page opens with. Tinted rather than white so the
   cards below it read as sitting on the page, the same relationship the rail
   has with the map on "/". */
.pagehead {
  background:
    radial-gradient(1200px 320px at 12% -40%, rgba(13, 110, 253, 0.10), transparent 70%),
    var(--surface-container-low);
  border-bottom: 1px solid rgba(194, 198, 216, 0.5);
  padding: 20px 0 40px;
}
.pagehead__crumbs { margin-bottom: 24px; }
.pagehead__eyebrow {
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 10px;
}
.pagehead h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--on-surface);
  margin: 0;
  max-width: 20ch;
}
.pagehead__lede {
  font-size: 18px;
  line-height: 28px;
  color: var(--on-surface-variant);
  margin: 14px 0 0;
  max-width: 62ch;
}
.pagehead .chips { margin: 24px 0 0; padding-bottom: 0; }

/* Section between the head and the footer. */
.docsection { padding: 40px 0 64px; }
.docsection__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}

.docempty {
  padding: 48px 24px;
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--on-surface-variant);
  background: var(--surface-container-lowest);
}

/* ==========================================================================
   Post cards -- the blog index, and "more to read" at the end of a post.
   ========================================================================== */
/* min() on the track minimum, not a bare 340px: `minmax(340px, 1fr)` is a hard
   floor, so on a 360px phone (328px of content once .wrap has padded) every
   track was 340px and the whole list hung over the right edge. min(_, 100%)
   lets the track collapse to the container on the screens that cannot afford
   it, and changes nothing above that width. */
.postgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--gutter);
}

.postcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-container-lowest);
  border: 1px solid rgba(194, 198, 216, 0.5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.postcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(13, 110, 253, 0.35);
}
.postcard__media {
  aspect-ratio: 16 / 9;
  background: var(--surface-container);
  overflow: hidden;
}
.postcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.postcard:hover .postcard__media img { transform: scale(1.03); }
.postcard__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  flex: 1;
}
.postcard__title {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 27px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
/* The whole card is the target, without nesting interactive elements -- same
   trick .card__link uses on the feed. */
.postcard__link { color: inherit; text-decoration: none; }
.postcard__link::after { content: ""; position: absolute; inset: 0; }
.postcard__excerpt {
  margin: 0;
  color: var(--on-surface-variant);
  font-size: 15px;
  line-height: 23px;
}
.postcard__meta {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 13px;
  line-height: 18px;
  color: var(--outline);
}
.postcard__meta .dot { color: var(--outline-variant); }

/* Tag pills. Not .chip: those are links to a filtered feed and are 32px tall,
   which is too much weight repeated on every card in a grid. */
.taglist { display: flex; flex-wrap: wrap; gap: 6px; }
.tagpill {
  font-family: var(--font-label);
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(13, 110, 253, 0.10);
  color: var(--primary);
  text-decoration: none;
  /* Stays above .postcard__link's overlay. On a card these are spans, so it
     changes nothing there -- it is here so that turning one into a link (at
     the end of an article they already are) does not need this rule found
     again. */
  position: relative;
  z-index: 1;
}
a.tagpill:hover { background: rgba(13, 110, 253, 0.18); }

/* The newest post, at full width above the grid. Two columns from 720px:
   below that it is simply a post card with a slightly larger title. */
.postcard--feature { margin-bottom: var(--gutter); }
@media (min-width: 720px) {
  .postcard--feature { flex-direction: row; }
  .postcard--feature .postcard__media {
    flex: 0 0 46%;
    aspect-ratio: auto;
    min-height: 300px;
  }
  .postcard--feature .postcard__body {
    padding: 32px;
    justify-content: center;
    gap: 14px;
  }
  .postcard--feature .postcard__title {
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.2;
  }
  .postcard--feature .postcard__excerpt { font-size: 16px; line-height: 26px; }
}

/* ==========================================================================
   A blog post.
   ========================================================================== */
.article__hero {
  width: 100%;
  height: clamp(200px, 34vw, 420px);
  object-fit: cover;
  display: block;
  background: var(--surface-container);
}

.article__head { padding: 32px 0 8px; }
.article__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
}
.article__subtitle {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.3;
  font-weight: 600;
  color: var(--on-surface-variant);
  margin: 12px 0 0;
}
.article__intro {
  font-size: 20px;
  line-height: 32px;
  color: var(--on-surface-variant);
  margin: 20px 0 0;
}

/* Byline: avatars, names, date, reading time. */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 28px 0 0;
  padding: 16px 0;
  border-top: 1px solid rgba(194, 198, 216, 0.6);
  border-bottom: 1px solid rgba(194, 198, 216, 0.6);
  font-family: var(--font-label);
  font-size: 14px;
  line-height: 20px;
  color: var(--on-surface-variant);
}
.byline__authors { display: flex; align-items: center; gap: 10px; }
.byline__faces { display: flex; }
/* Overlapped, so two or three authors cost one avatar's width plus a sliver. */
.byline__faces img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--surface-container-lowest);
  box-shadow: var(--shadow-sm);
}
.byline__faces img + img { margin-left: -10px; }
.byline__names { font-weight: 700; color: var(--on-surface); }
.byline__facts { display: flex; align-items: center; gap: 8px; }
.byline .dot { color: var(--outline-variant); }

/* ------------------------------------------------------- the body copy --- */
/* The StreamField renders blocks/*.html, which were written for Bootstrap and
   are shared with the CMS pages that still load it -- so the handful of
   Bootstrap class names they carry (.text-center, .img-fluid, .blockquote)
   are honoured here rather than changed there. */
.article__body {
  font-size: 19px;
  line-height: 32px;
  color: var(--on-surface);
  padding: 8px 0 16px;
}
.article__body > * { margin: 0 0 24px; }
.article__body > *:last-child { margin-bottom: 0; }
.article__body h2,
.article__body h3,
.article__body h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--on-surface);
  margin: 44px 0 14px;
}
.article__body h2 { font-size: 30px; line-height: 38px; }
.article__body h3 { font-size: 24px; line-height: 32px; }
.article__body h4 { font-size: 20px; line-height: 28px; }
.article__body a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.article__body a:hover { text-decoration-thickness: 2px; }
.article__body ul,
.article__body ol { padding-left: 26px; }
.article__body li { margin-bottom: 8px; }
.article__body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.article__body figure { margin: 32px 0; }
.article__body figcaption {
  font-family: var(--font-label);
  font-size: 13px;
  line-height: 20px;
  color: var(--outline);
  margin-top: 10px;
}
.article__body blockquote,
.article__body .blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--primary);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 34px;
  font-weight: 600;
  color: var(--on-surface);
}
/* blocks/blockquote.html wraps the quote in a .text-center div, which is a
   Bootstrap page's idea of a pull quote and fights the rule on the left. The
   rule is the treatment here, so the text goes back to the left margin. */
.article__body .blockquote,
.article__body .blockquote-footer { text-align: left; }
.article__body .blockquote p { margin: 0; }
.article__body .blockquote-footer {
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 400;
  color: var(--outline);
  margin-top: 10px;
  /* Lines up under the quote: the rule plus the quote's own indent. */
  padding-left: 27px;
}
.article__body .text-center { text-align: center; }
.article__body .img-fluid { max-width: 100%; height: auto; }
.article__body iframe { max-width: 100%; border-radius: var(--radius-md); }
.article__body hr {
  border: 0;
  border-top: 1px solid var(--outline-variant);
  margin: 40px 0;
}

.article__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(194, 198, 216, 0.6);
}
.article__tags-label {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 700;
  color: var(--on-surface-variant);
  margin: 0;
}

/* ==========================================================================
   The one CTA on a reading page.

   A post is the top of the funnel: somebody who read to the end is as warm as
   this audience gets, and the next step is the feed, not another article. Blue
   rather than Action Orange -- orange means "buy a ticket" here, and this is
   browsing.
   ========================================================================== */
.doccta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 48px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.10), rgba(46, 196, 182, 0.12));
  border: 1px solid rgba(13, 110, 253, 0.20);
}
.doccta__icon {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
}
.doccta__icon .material-symbols-outlined { font-size: 28px; }
.doccta__text { flex: 1 1 240px; }
.doccta__text h2 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  margin: 0;
}
.doccta__text p {
  margin: 4px 0 0;
  color: var(--on-surface-variant);
  font-size: 15px;
  line-height: 22px;
}

/* ==========================================================================
   SEO directory pages (/<query>/in/<city>/<state>/<country>/).
   ========================================================================== */
.dirgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}
.dirlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(194, 198, 216, 0.7);
  border-radius: var(--radius-md);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  text-decoration: none;
  font-family: var(--font-label);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  transition: border-color .2s, box-shadow .2s, color .2s, transform .2s;
}
.dirlink:hover {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.dirlink .material-symbols-outlined { font-size: 20px; color: var(--outline); flex: none; }
.dirlink:hover .material-symbols-outlined { color: var(--primary); }

/* Place results. A row, not the feed's card: these lists run to 20+ entries
   on one page and the photo is the weakest signal here -- the address and the
   rating are what a visitor scanning a city page is comparing. */
.placelist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The <li> is the grid item; stretching the row inside it keeps every card in
   a line the same height whatever its address wraps to.

   min-width:0 on BOTH, and it is load-bearing. A grid or flex item defaults to
   min-width:auto, which is its min-content size -- and a min-content size is
   computed from `white-space: nowrap` text as if it could never wrap, so the
   long names on the family-restrooms and changing-tables pages made each row
   demand ~700px inside a 365px track. The track stayed 365px; the row simply
   drew over the card beside it. `overflow: hidden` on the title does not save
   you here: it clips the paint, not the intrinsic size, and .placerow__body
   having min-width:0 only lets the BODY shrink, not its flex parent. */
.placelist > li { display: flex; min-width: 0; }
.placelist > li > .placerow { flex: 1; min-width: 0; }
.placerow {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 12px;
  background: var(--surface-container-lowest);
  border: 1px solid rgba(194, 198, 216, 0.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.placerow:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(13, 110, 253, 0.35);
  transform: translateY(-1px);
}
.placerow__media {
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-container);
  display: grid;
  place-items: center;
}
.placerow__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.placerow__media .material-symbols-outlined { font-size: 30px; color: var(--outline); }
.placerow__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.placerow__title {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.placerow__link { color: inherit; text-decoration: none; }
.placerow__link::after { content: ""; position: absolute; inset: 0; }
.placerow__meta,
.placerow__address {
  font-size: 13px;
  line-height: 19px;
  color: var(--on-surface-variant);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.placerow__address { display: flex; align-items: center; gap: 4px; color: var(--outline); }
.placerow__address .material-symbols-outlined { font-size: 15px; flex: none; }
/* The ellipsis lives on the text, not on the flex row around it. */
.placerow__addresstext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placerow__rating { color: var(--on-surface); font-weight: 700; }
.placerow__star { color: var(--sun-yellow); }
.placerow__facilities {
  font-size: 12px;
  line-height: 18px;
  color: var(--soft-teal);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .pagehead { padding: 16px 0 28px; }
  .pagehead h1 { max-width: none; }
  .docsection { padding: 28px 0 44px; }
  .article__head { padding: 24px 0 4px; }
  .article__body { font-size: 17px; line-height: 29px; }
  .article__body h2 { font-size: 25px; line-height: 33px; }
  .article__body h3 { font-size: 21px; line-height: 29px; }
  .doccta { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .postcard,
  .postcard__media img,
  .dirlink,
  .placerow { transition: none; }
  .postcard:hover,
  .dirlink:hover,
  .placerow:hover { transform: none; }
  .postcard:hover .postcard__media img { transform: none; }
}