/* LocalX — hero 
   Onderdeel van de ForwardX Eleventy-structuur. Alle waarden via var(--naam). */

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background-color: var(--bg-navy);
  overflow: hidden;
}

/* Groot X-watermerk linksboven */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/ForwardX-Icon-wit.webp");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 40%;
  opacity: .04;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding-block: var(--section-y);
}

.hero__text {
  flex: 0 1 auto;
  align-items: flex-start;
  max-width: 678px;
}

.hero h1 { color: var(--bg-surface); }
.hero h1 em { color: var(--accent); font-style: italic; }

.hero__lead {
  color: var(--bg-surface);
  font-size: var(--fs-lead);
  font-weight: 500;
}

.hero__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gutter); }

.hero__visual { flex: 0 0 auto; width: 492px; max-width: 100%; }


/* ---------- SERP-mockup ---------- */

.serp {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  font-family: var(--ff-text);
  /* geen eigen regelhoogte: de kaart erft 28,05px, net als in het origineel */
}

.serp__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid rgba(12, 12, 10, .09);
}

.serp__search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid rgba(12, 12, 10, .09);
  border-radius: 100px;
  font-size: 13px;
  color: var(--text-sub);
}
.serp__glass { color: #4285f4; }

.serp__badge {
  padding: 3px 8px;
  background: #e8f0fe;
  border-radius: 100px;
  color: #1a73e8;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.serp__map {
  position: relative;
  height: 110px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8ead8 0%, #d7e0c4 40%, #c8d4b0 100%);
}

.serp__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px);
  background-size: 20px 20px;
}

.serp__pin {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #9aa0a6;
}
.serp__pin--first {
  top: 28px;
  left: 52%;
  width: 34px;
  height: 34px;
  background: var(--accent);
  box-shadow: 0 2px 8px rgba(232, 120, 32, .5);
}
.serp__pin--first span {
  transform: rotate(45deg);
  font-family: var(--ff-display);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
.serp__pin--a { top: 44px; left: 22%; }
.serp__pin--b { top: 60px; left: 75%; }

.serp__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(12, 12, 10, .09);
}
.serp__row--first { background: linear-gradient(90deg, rgba(232, 120, 32, .04) 0%, transparent 60%); }
.serp__row--last  { border-bottom: 0; }

.serp__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid rgba(12, 12, 10, .09);
  color: var(--text-sub);
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 900;
}
.serp__num--first {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Alleen de eerste rij rekt op; bij de andere breekt de meta-regel af,
   precies zoals in het origineel. */
.serp__row--first .serp__info { flex: 1; }

.serp__name {
  color: var(--text-main);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.serp__name--first { color: var(--accent); }

.serp__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--text-light);
  font-size: 12px;
}
.serp__stars { color: #fbbc04; }
.serp__stars--dim { color: #ccc; }

.serp__tag {
  flex-shrink: 0;
  padding: 3px 8px;
  background: var(--accent);
  border-radius: 100px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
}