/* Public-site-specific layout: map hero, spotlight grid, feature grid,
   contact form, legal-doc content. Primitives (info-cell, bordered-box,
   type scale, nav, buttons) live in base.css. */

/* Map hero */
.map-hero {
  position: relative;
  overflow: hidden; /* contain the mockup image to this section only */
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: var(--space-8) 0;
}

.map-hero__content {
  position: relative;
  z-index: 2;
  max-width: min(620px, 74%);
}

.map-hero__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

/* App screenshot mockup — sits behind/right of .map-hero__content. Faded on
   its left, right, and bottom edges (two gradients intersected, so a pixel
   only stays opaque where both agree) so the photo eases into the section's
   backdrop on every side except the top, which stays solid against the nav.
   Left edge specifically blends into --screen-background instead of showing
   a hard rectangle edge over the section's dark backdrop. */
.map-hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  mask-image: linear-gradient(to right, transparent, black 32%, black 78%, transparent),
    linear-gradient(to bottom, black 72%, transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to right, transparent, black 32%, black 78%, transparent),
    linear-gradient(to bottom, black 72%, transparent);
  -webkit-mask-composite: source-in;
}

/* Below ~720px there's no room to overlay text on the phone without either
   clipping the mockup or making the copy illegible — stack the image as a
   banner above the content instead of behind it. */
@media (max-width: 720px) {
  .map-hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 0 0 var(--space-7);
  }

  .map-hero__content {
    max-width: 100%;
    padding: 0 var(--space-5);
  }

  .map-hero__image {
    position: static;
    width: calc(100% + var(--space-5) * 2);
    margin: 0 calc(var(--space-5) * -1) var(--space-6);
    height: 60vw;
    max-height: 340px;
    object-position: 65% center;
    mask-image: linear-gradient(to bottom, black 75%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent);
  }
}

/* Section headers */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

/* Spotlight */
.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.spotlight-card {
  border: 0.5px solid var(--grid-border);
  background: var(--info-cell-bg);
  overflow: hidden;
}

.spotlight-card__media {
  aspect-ratio: 4 / 5;
  background: linear-gradient(
    160deg,
    rgba(255, 107, 53, 0.12),
    rgba(255, 255, 255, 0.03)
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.spotlight-card__media span {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--label-color);
}

.spotlight-card__body {
  padding: var(--space-3);
}

.spotlight-card__description {
  font-size: 13px;
  margin: 0 0 4px;
  color: var(--text-white);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.spotlight-card__meta {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}

/* Street art detail page (streetgallery.app/streetart/{id}) — a single
   centered "playing card" (photo + details as one bordered object), same
   visual language as .spotlight-card scaled up to be the page's hero
   rather than a grid item. */
.streetart-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.streetart-card {
  width: 100%;
  max-width: 400px;
  border: 0.5px solid var(--grid-border);
  background: var(--info-cell-bg);
  overflow: hidden;
}

.streetart-card__media {
  aspect-ratio: 4 / 3;
  background: #0e0e0c;
}

.streetart-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.streetart-card__media span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--label-color);
}

/* Extra photos (beyond the hero) as a thumbnail strip between the media
   and the text body — keeps "one card" the whole way down rather than
   spreading into a separate gallery grid. */
.streetart-card__thumbs {
  display: flex;
  gap: 1px;
  background: var(--grid-border);
}

.streetart-card__thumbs img {
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  min-width: 0;
}

.streetart-card__body {
  padding: var(--space-4) var(--space-4) var(--space-5);
  text-align: center;
}

.streetart-card__body .display-md {
  margin: 6px 0 0;
}

.streetart-card__meta {
  font-size: 12px;
  color: var(--text-muted);
  margin: 6px 0 0;
}

.streetart-card__description {
  font-size: 13px;
  color: var(--text-white);
  margin: var(--space-3) 0 0;
}

.streetart-actions {
  margin-top: var(--space-6);
  text-align: center;
}

/* Feature / content blocks */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}

.feature-card {
  padding: var(--space-5);
}

.feature-card .display-md {
  margin: var(--space-2) 0 var(--space-2);
}

/* Contact */
.contact-block {
  max-width: 480px;
}

.contact-email {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 36px);
  color: var(--event-orange);
  text-decoration: none;
  letter-spacing: 0.5px;
}

.contact-email:hover {
  text-decoration: underline;
}

/* Legal documents (Terms / Privacy) */
.legal-notice {
  border: 0.5px solid var(--event-orange);
  background: rgba(255, 107, 53, 0.06);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  font-size: 13px;
  color: var(--text-white);
}

.legal-content {
  max-width: 720px;
}

.legal-content h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 0.5px;
  margin: var(--space-6) 0 var(--space-2);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.7;
}

.legal-content ul {
  padding-left: var(--space-4);
}

.updated-date {
  color: var(--label-color);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}