/* Blad 'De woning' */

/* Woningtype in twee kolommen zodra er ruimte is */
.property-types .choices__options { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }

/*
 * Energielabels als vakjes zonder rondje; de rand toont de keuze. Elf labels: smal in rijen van zes,
 * breed in één rij. 'Geen label' en 'Weet ik niet' staan altijd samen op een eigen rij.
 */
.property-labels .choices__options { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-1); }
.property-labels .choice { position: relative; grid-column: span 2; justify-content: center; min-height: 2.75rem; padding: var(--s-2) var(--s-1); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.property-labels .choice input { position: absolute; opacity: 0; pointer-events: none; }
.property-labels .choice:nth-last-child(-n + 2) { grid-column: span 6; }

@media (min-width: 48rem) {
  .property-labels .choices__options { grid-template-columns: repeat(22, minmax(0, 1fr)); }
  .property-labels .choice:nth-last-child(-n + 2) { grid-column: span 11; }
}

/* Vervolgvragen bij VvE en erfpacht: ingesprongen onder de vraag waar ze bij horen */
.property-sub { margin: calc(var(--s-2) * -1) 0 var(--s-6); padding: var(--s-4) 0 0 var(--s-4); border-left: var(--hair) solid var(--line-strong); }
.property-sub .notice { margin-bottom: var(--s-4); }
.property-sub > .field:last-child, .property-sub > .choices:last-child { margin-bottom: 0; }

.property-intro { margin-bottom: var(--s-5); }
.property-note { margin-bottom: var(--s-5); }
.property-vbo { color: var(--muted); font-size: var(--step--1); }

/* Energielabel als pijl, zoals op het label zelf */
.energy {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.85rem 0 0.45rem;
  background: var(--energy);
  color: var(--energy-text);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.02em;
  clip-path: polygon(0 0, calc(100% - 0.55rem) 0, 100% 50%, calc(100% - 0.55rem) 100%, 0 100%);
}
.energy--apppp, .energy--appp, .energy--app, .energy--ap, .energy--a { --energy: var(--label-a); --energy-text: var(--label-text-light); }
.energy--b { --energy: var(--label-b); --energy-text: var(--label-text-dark); }
.energy--c { --energy: var(--label-c); --energy-text: var(--label-text-dark); }
.energy--d { --energy: var(--label-d); --energy-text: var(--label-text-dark); }
.energy--e { --energy: var(--label-e); --energy-text: var(--label-text-dark); }
.energy--f { --energy: var(--label-f); --energy-text: var(--label-text-dark); }
.energy--g { --energy: var(--label-g); --energy-text: var(--label-text-light); }

/* Beelden van de woning: straatbeeld groot, luchtfoto en kaart ernaast */
.media { display: grid; gap: var(--s-2); margin: 0; }
.media figure { position: relative; min-width: 0; margin: 0; overflow: hidden; border: var(--hair) solid var(--line); background: var(--sheet-2); }
.media img, .media svg { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.media figcaption, .home__credit {
  position: absolute;
  left: var(--s-2);
  bottom: var(--s-2);
  padding: 0.125rem 0.4rem;
  background: color-mix(in srgb, var(--sheet) 88%, transparent);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.02em;
}
.here circle { fill: var(--accent); stroke: var(--sheet); stroke-width: 4; }
.here .here__core { fill: var(--sheet); stroke: none; }

@media (min-width: 48rem) {
  .media { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .media__main { grid-row: span 2; }
  .media__main img { aspect-ratio: auto; }
}

/* Kenmerken als losse vakjes onder de beelden */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.chips > li { padding: 0.2rem 0.55rem; border: var(--hair) solid var(--line); background: var(--sheet); }
.chips > li.chips__energy { padding: 0; border: 0; background: none; }

/* De woning van de klant op het overzicht */
.home { position: relative; display: grid; overflow: hidden; border: var(--hair) solid var(--ink); background: var(--sheet); }
.home img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.home__body { display: grid; gap: 0.125rem; padding: var(--s-3) var(--s-4); }
.home__title { font-weight: 500; }
.home__meta { color: var(--muted); font-size: var(--step--1); }
.home .energy { position: absolute; top: var(--s-2); left: var(--s-2); }
.home__credit { bottom: auto; top: var(--s-2); right: var(--s-2); left: auto; }

/* Een kaart blijft licht van zichzelf; in de donkere weergave wordt hij omgekeerd en gedempt */
:root[data-theme="dark"] .map-image { filter: invert(1) hue-rotate(180deg) brightness(0.92) saturate(0.55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .map-image { filter: invert(1) hue-rotate(180deg) brightness(0.92) saturate(0.55); }
}