/* ==========================================================================
   ALBI HOME — UNSER EINSATZGEBIET
   Copy left, reach map right, the regions written out underneath both.
   Same bones as the Über-uns section: two columns, the same backdrop-scrim
   technique, .eyebrow / .prose / .section-head__title reused unchanged.
   ========================================================================== */

.area-section {
  background-color: var(--bg-page);
  background-image: var(--area-scrim), url("../img/area-bg-v2-1440.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* Two layers keep the architectural photo visible while giving the whole
     section a deliberately darker, calmer ground behind its white content.

     The horizontal pass does the legibility work: heaviest under the copy on
     the left, easing off to the right where the map panel sits on top of it
     anyway.

     The vertical pass is a vignette that starts and ends ON --bg-page, so the
     photograph fades in below the section above and out above the footer
     rather than butting against them. Without it the top edge lands mid-sky
     and draws a hard bright line across the page. Both ends are the same
     rgb(23,26,31) as --bg-page, so the interpolation stays in one hue.

     The horizontal layer is now weighted more heavily across the full width,
     including behind the map, so the background reads as atmosphere rather
     than competing with the section content.

     The one place that needed guarding is the bottom band, where the region
    list runs the full width and its right end sits under the lightest part
     of the horizontal pass with the sunlit terrace behind it. The dark stop
     is weighted for that row specifically, which costs nothing — the villa
     is in the middle third. */
  --area-scrim:
    linear-gradient(96deg,
      rgba(9, 8, 6, .84) 0%,
      rgba(9, 8, 6, .78) 34%,
      rgba(9, 8, 6, .66) 62%,
      rgba(9, 8, 6, .60) 100%),
    linear-gradient(180deg,
      var(--bg-page) 0%,
      rgba(23, 26, 31, .42) 16%,
      rgba(23, 26, 31, .20) 48%,
      rgba(23, 26, 31, .58) 84%,
      var(--bg-page) 100%);
}
@supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
  .area-section {
    background-image: var(--area-scrim), image-set(
      url("../img/area-bg-v2-1440.webp") type("image/webp") 1x,
      url("../img/area-bg-v2-1440.jpg")  type("image/jpeg") 1x);
  }
}
@media (max-width: 1023.98px) {
  .area-section { background-image: var(--area-scrim), url("../img/area-bg-v2-1024.jpg"); }
  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .area-section {
      background-image: var(--area-scrim), image-set(
        url("../img/area-bg-v2-1024.webp") type("image/webp") 1x,
        url("../img/area-bg-v2-1024.jpg")  type("image/jpeg") 1x);
    }
  }
}
@media (max-width: 719.98px) {
  .area-section { background-image: var(--area-scrim), url("../img/area-bg-v2-720.jpg"); }
  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .area-section {
      background-image: var(--area-scrim), image-set(
        url("../img/area-bg-v2-720.webp") type("image/webp") 1x,
        url("../img/area-bg-v2-720.jpg")  type("image/jpeg") 1x);
    }
  }
}

/* --------------------------------------------------------------------------
   LAYOUT
   Copy and map share the row; the region list spans both columns beneath.
   The map panel stays inside the container now — it is a framed object with
   its own border and legend, and bleeding a framed thing off the screen edge
   just cuts the frame in half.
   -------------------------------------------------------------------------- */
.area {
  display: grid;
  grid-template-columns: minmax(0, 600fr) minmax(0, 632fr);
  gap: var(--section-stack) var(--space-8);
  align-items: center;
}

.area__title { margin-top: var(--space-5); max-width: 16ch; text-wrap: balance; }
.area__text  { margin-top: var(--space-5); max-width: 52ch; line-height: var(--lh-normal); }

/* Every piece of secondary copy in this section sits directly on a
   photograph, so it takes --text-on-media (84% white) rather than
   --text-secondary (68%). That is what the token is for, and it is what buys
   the scrim above the room to stay light enough to show the building: at 84%
   the supporting lines clear AA over the brightest point the photo reaches
   under this column, where at 68% they would not. */
.area__text,
.area-point__text,
.area__note,
.area__regions { color: var(--text-on-media); }

/* --------------------------------------------------------------------------
   THE TWO PROMISES
   -------------------------------------------------------------------------- */
.area__points {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.area-point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.area-point__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--a-gold-40);
  background-color: var(--a-gold-12);
  color: var(--text-accent);
}
.area-point__icon .icon { width: 22px; height: 22px; }

.area-point__body { display: grid; gap: var(--space-1); }

.area-point__title {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.area-point__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* --------------------------------------------------------------------------
   CTA ROW
   -------------------------------------------------------------------------- */
.area__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-7);
}
.area__note { font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   THE MAP PANEL
   A flex column — badge, canvas, legend — rather than chrome floated on top
   of the drawing. The map scales with the panel and the labels inside it
   scale with the map; the badge and legend are real text at a real size, and
   keeping them in the flow is what stops the two from colliding as the panel
   narrows.
   -------------------------------------------------------------------------- */
.area__map {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-xl);
  /* Not opaque: at 88% the villa behind still moves through the panel as a
     shift in luminance, which ties the card to the photograph instead of
     stamping a black box onto it. The map keeps a dark enough ground for the
     gold routes either way — 88% of #090806 leaves nothing bright enough to
     compete with them. */
  background-color: var(--a-black-88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-image:
    radial-gradient(80% 62% at 50% 42%, var(--a-gold-12), transparent 70%),
    repeating-linear-gradient(0deg,  var(--a-white-04) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--a-white-04) 0 1px, transparent 1px 34px);
  box-shadow: var(--shadow-md);
}

/* Small caps label, same treatment as the legend below it. */
.area-map__badge,
.area-map__key {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-primary);
}

.area-map__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-pill);
  background-color: var(--a-black-40);
}
.area-map__badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--accent);
  flex: none;
}

/* --- the drawing ---------------------------------------------------------
   Base and overlay are stacked on the same grid cell rather than positioned,
   so the aspect ratio comes from the <img> itself: nothing to keep in sync,
   and no reserved-height guess to get wrong (CLS stays at zero). */
.area-map__canvas {
  display: grid;
  aspect-ratio: var(--area-map-crop, var(--area-map-ratio));
  overflow: hidden;
}
.area-map__canvas > * { grid-area: 1 / 1; width: 100%; height: 100%; }

/* cover on one layer, preserveAspectRatio="slice" on the other: the same
   rule, spelled the two different ways an <img> and an <svg> spell it. */
.area-map__base { object-fit: cover; }

/* --- routes --------------------------------------------------------------
   Each lane is drawn twice: a faint resting line so the network is legible
   the instant the section appears, and a short bright dash that runs along
   the same curve. pathLength="200" on the dashed copy normalises every lane
   to the same 200 units, so the Iberien haul and the Benelux hop take the
   same time to travel — the pulse reads as dispatch, not as speed. */
.area-map__route {
  fill: none;
  stroke: var(--a-gold-40);
  stroke-width: 1.2;
}

.area-map__pulse {
  fill: none;
  stroke: var(--gold-400);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 4 196;
  animation: area-route 3.2s linear infinite;
}
@keyframes area-route {
  from { stroke-dashoffset: 200; }
  to   { stroke-dashoffset: 0; }
}

/* --- pins ---------------------------------------------------------------- */
.area-map__dot  { fill: var(--gold-400); }
.area-map__halo { fill: none; stroke: var(--a-gold-40); stroke-width: 1; }

.area-map__label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-medium);
  fill: var(--a-white-84);
  /* A dark rim, painted under the glyphs, so a label crossing a coastline
     stays readable without a plate behind it. */
  stroke: var(--ink-900);
  stroke-width: 3;
  paint-order: stroke fill;
}

/* --- Duisburg ------------------------------------------------------------ */
.area-map__hub-dot {
  fill: var(--gold-400);
  stroke: var(--white);
  stroke-width: 1.6;
}

.area-map__hub-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-bold);
  fill: var(--white);
  stroke: var(--ink-900);
  stroke-width: 3.5;
  paint-order: stroke fill;
}

/* transform-box keeps the origin on the circle rather than the whole SVG,
   which is the difference between a halo breathing in place and one sliding
   off toward the top-left corner. */
.area-map__ping {
  fill: var(--a-gold-40);
  transform-box: fill-box;
  transform-origin: center;
  animation: area-ping 2.6s var(--ease-out) infinite;
}
@keyframes area-ping {
  0%       { transform: scale(.55); opacity: .85; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* Hover is enrichment only — every label is already drawn, and the region
   list below repeats all of them as text. */
.area-map__pin:hover .area-map__dot { fill: var(--white); }
.area-map__pin:hover .area-map__label { fill: var(--white); }
.area-map__pin:hover .area-map__halo { stroke: var(--gold-400); }

/* --- legend -------------------------------------------------------------- */
.area-map__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--a-black-40);
}

.area-map__key { display: inline-flex; align-items: center; gap: var(--space-2); }
.area-map__key::before { content: ""; flex: none; }

/* Two different marks, not two colours: the swatch is the area served, the
   disc is the one place we work from, and telling them apart must not depend
   on seeing a difference in hue. */
.area-map__key--zone::before {
  width: 13px;
  height: 13px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--gold-500);
  background-color: var(--a-gold-24);
}
.area-map__key--hub::before {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background-color: var(--gold-400);
  box-shadow: 0 0 0 4px var(--a-gold-24);
}

/* --------------------------------------------------------------------------
   REGION LIST
   The written version of the map, under both columns. Dot-separated with the
   separator in ::before rather than in the markup, so a screen reader reads
   eleven region names and not eleven interpunct characters.
   -------------------------------------------------------------------------- */
.area__regions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) 0;
  grid-column: 1 / -1;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
}
.area__regions li { display: inline-flex; align-items: center; }
.area__regions li + li::before {
  content: "·";
  padding-inline: var(--space-3);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */
/* Two columns only from 1200. At 1024 the map column is ~450px wide, which
   renders the 12-unit labels inside the SVG at under 9px — the map is still
   drawn correctly and has stopped being readable, which is the worst of the
   two failures. Stacked, the panel caps at 620px and they hold their size. */
@media (max-width: 1199.98px) {
  .area { grid-template-columns: minmax(0, 1fr); }
  /* Order in CSS, not markup, so the reading order stays copy -> map ->
     regions. All three are set: an item left at the default order:0 sorts
     BEFORE anything given a positive one, which is how the region list ended
     up above the heading the first time. */
  .area__copy    { order: 1; }
  .area__map     { order: 2; }
  .area__regions { order: 3; }
  /* Not `none`: stacked at 1024 the copy column is 944px wide and the
     heading runs out to a single 90-character line. */
  .area__title { max-width: 26ch; }
  /* Below the copy the panel would run to 800px tall at full width, which is
     a screen and a half of map. Capping it keeps the whole section scannable
     in one scroll. */
  .area__map { max-width: 620px; margin-inline: auto; width: 100%; }
}

@media (max-width: 767.98px) {
  .area__text { font-size: var(--fs-body); }
  .area__map { padding: var(--space-4); }
  .area__actions .btn { width: 100%; }
  .area__note { width: 100%; }

  /* Under ~400px of panel the 12px labels render at about 7px. They stop
     being readable long before they stop being drawn, and ten unreadable
     smudges make the map look broken rather than dense — so the pins carry
     the geography and the region list underneath carries the names. */
  .area-map__label { display: none; }
  .area-map__hub-label { font-size: 17px; }

  /* With the labels gone the gutters they sat in are dead space, and on a
     phone that is the difference between a map and a postage stamp. A
     narrower frame crops them off and the geography grows to fill it —
     roughly 60px of gutter each side, out of the 91 that are there. */
  .area-map__canvas { --area-map-crop: 5 / 7; }
}

@media (max-width: 479.98px) {
  .area__regions { justify-content: flex-start; font-size: var(--fs-xs); }
  .area__regions li + li::before { padding-inline: var(--space-2); }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   The routes stop travelling and settle at full strength — the network is
   information, so it has to survive the animation being switched off.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .area-map__pulse {
    animation: none;
    stroke-dasharray: none;
    stroke-width: 1;
    opacity: .55;
  }
  .area-map__ping { animation: none; opacity: .25; }
}