/**
 * The two location pages — All Locations (`93:11088`) and the state drill-down
 * (`97:10923`). They share a breadcrumb hero, a 4-up tile grid and the closing contact
 * CTA and FAQ; only the tile differs, so both pages load this one stylesheet.
 *
 * The design's "4 cities · 120+ apartments" and "32+ apartments" count lines are not
 * here: no service supplies either figure. Named on RE-1632.
 */

/* ============================================================
   Page hero — breadcrumb, title, intro
   ============================================================ */

/* Figma `96:11427`: a 256px band on #F6FBFC, 40px of padding and 16px between rows. */
.page-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: 40px var(--gutter);
  background: #f6fbfc;
  text-align: center;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: 20px;
  color: #808a8c;
}

.breadcrumb a {
  color: inherit;
}

.breadcrumb [aria-current] {
  font-weight: var(--weight-medium);
  color: var(--color-green-primary);
}

.page-hero h1 {
  font-size: var(--text-h2);
  line-height: normal;
  font-weight: var(--weight-medium);
  letter-spacing: -0.5px;
  color: var(--color-grey-dark);
}

.page-hero__intro {
  width: 900px;
  max-width: 100%;
  font-size: var(--text-lead);
  line-height: var(--text-lead-lh);
  letter-spacing: -0.2px;
  color: var(--color-grey-dark);
}

/* ============================================================
   State grid
   ============================================================ */

/* Figma `96:11446`: 80px above the grid, 4 columns of 370 on a 24px gutter, and 132px
   of air below it before the CTA band. */
.states {
  padding-block: 80px 132px;
}

.states__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.states__empty {
  font-size: var(--text-lead);
  line-height: var(--text-lead-lh);
  color: var(--color-grey-secondary);
  text-align: center;
}

/* Only the popular locations are photographed, so the rest are links rather than tiles.
   The design draws a grid alone; without this a location with no picture would either
   show an empty frame or be dropped from the page. */
.location-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2) var(--space-6);
}

/* Only needed when a grid sits above it. On a page that is all list, the rule would draw
   a line under the hero for no reason. */
.location-list--after-grid {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-grey-light);
}

.location-list a {
  font-size: var(--text-sm);
  line-height: 28px;
  color: var(--color-grey-dark);
}

.location-list a:hover {
  color: var(--color-green-primary);
}

/* Figma `330:21097`: 370x300 at a 14px radius, badge top-left, name and count at the
   foot over a scrim that only starts biting at 35% down. */
/* The stand-in gradient sits behind the photograph rather than instead of it. A location
   with no picture, and one whose file has gone missing, both land on color instead of a
   broken frame — and neither case needs the view to know which happened. */
.state-card {
  position: relative;
  display: block;
  height: 300px;
  border-radius: var(--radius-control-lg);
  overflow: hidden;
  background: var(--placeholder-art);
  color: var(--text-inverse);
  isolation: isolate;
}

.state-card:hover {
  text-decoration: none;
}


.state-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--duration-slow) var(--ease-out);
}

.state-card:hover .state-card__photo {
  scale: 1.05;
}

.state-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 35%,
    rgba(5, 33, 38, 0.85) 100%
  );
}

.state-card__code {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  font-size: var(--text-xs);
  line-height: 15px;
  font-weight: var(--weight-semibold);
  color: var(--color-green-secondary);
}

/* Figma puts this block at y=224 of a 300px tile, which is 20px of air under its last
   line. The count line is not ported (no data — see RE-1632), so the block is anchored
   to that 20px instead and keeps its place with one line fewer. */
.state-card__meta {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 330px;
  max-width: calc(100% - var(--space-10));
}

.state-card__name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-h3);
  line-height: 30px;
  font-weight: var(--weight-semibold);
}

/* ============================================================
   City grid — the state drill-down
   ============================================================ */

/* Figma `97:11010`: same 4-up rhythm as the state grid, but the tile is 8px taller
   and the copy sits on white below the photo instead of over it. */
.cities {
  padding-block: 80px 132px;
}

/* Figma fixes this at 308px, but that height assumed the apartment count line this port
   has no data for, and a two-line tagline instead of the design's one. The card fills its
   grid cell instead, so every card in a row matches and the body keeps its bottom padding
   whatever the copy does. */
.city-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-control-lg);
  overflow: hidden;
  background: var(--color-white);
  color: inherit;
  transition: box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.city-card:hover {
  text-decoration: none;
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.city-card__photo {
  display: block;
  height: 190px;
  flex: none;
  overflow: hidden;
  background: var(--placeholder-art);
}

.city-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.city-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px var(--space-5) var(--space-5);
}

.city-card__name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 22px;
  line-height: 28px;
  font-weight: var(--weight-medium);
  color: var(--color-grey-dark);
}

/* The design draws a one-line tagline; the data holds a full article about the city. The
   view cuts the text on a word boundary, and this clamp is only a guard against a line
   that still will not fit — it cuts mid-word, so the view's limit is set low enough that
   it should never have to. */
.city-card__tagline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--color-grey-secondary);
}

/* ============================================================
   FAQ
   ============================================================ */

/* Figma `98:11041`: 90px above the header, 82px down to the rows, 120px below them. */
.locations-faq {
  padding-block: 90px 120px;
}

.locations-faq .section-head {
  margin-bottom: 82px;
}

.locations-faq .section-head h2 {
  line-height: 64px;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1180px) {
  .states__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .location-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .page-hero {
    padding-block: var(--space-22);
  }

  .page-hero__intro {
    width: auto;
  }

  .states,
  .cities {
    padding-block: var(--space-10) var(--space-16);
  }

  .city-card {
    height: auto;
  }

  .city-card__photo {
    height: 0;
    padding-top: 51.35%; /* 190/370 */
    position: relative;
  }

  .city-card__photo img {
    position: absolute;
    inset: 0;
  }

  .states__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  /* The list stays two-up at 390: these are short place names, not cards. */
  .location-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .location-list--after-grid {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
  }

  /* The tile keeps its proportions rather than a fixed 300px height once it narrows. */
  .state-card {
    height: auto;
    aspect-ratio: 370 / 300;
  }

  .state-card__meta {
    bottom: var(--space-4);
    width: auto;
  }

  .locations-faq {
    padding-block: var(--space-22);
  }

  .locations-faq .section-head {
    margin-bottom: var(--space-8);
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 560px) {
  .states__grid {
    grid-template-columns: 1fr;
  }
}