/* Hakeren 8 property page - additions on top of the shared homepage stylesheet
   (../../homepage-static-20260914-v6/styles.css, unchanged). The base block below is the
   same split hero / specs / form layout as the other project pages (kinor-3.css).
   Photos: every image is shown WHOLE - the boxes take the photos' own 1305:871 ratio
   or their natural height, and anything that could still differ uses object-fit:
   contain. The agency and photographer watermarks in the bottom corners are therefore
   never cropped, covered or zoomed out of frame. */
.phero { background: var(--white); padding: 40px var(--gut) 50px; }
.phero-inner { max-width: 1280px; margin: 0 auto; }
.crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.crumbs a { color: var(--blue); }
.crumbs a:hover { color: var(--blue-dark); }
.crumbs-sep { color: var(--muted); font-weight: 400; }
.crumbs-here { color: var(--navy); }
.phero-grid {
  display: grid; grid-template-columns: 50fr 50fr; column-gap: 48px; row-gap: 0;
  grid-template-areas: "head media" "body media"; align-items: center;
}
.phero-head  { grid-area: head; align-self: end; }
.phero-body  { grid-area: body; align-self: start; margin-top: 24px; }
.phero-media { grid-area: media; align-self: center; margin: 0; }
.phero-media a { display: block; }
.phero-media img { display: block; width: 100%; height: auto; aspect-ratio: 1305 / 871; object-fit: contain; }
.phero-head .section-title { text-align: right; }
.phero-sub { margin-top: 8px; }
.phero-body { text-align: right; }
.phero-body p { font-size: 16px; line-height: 1.7; font-weight: 400; color: var(--ink); }
.phero-body p + p { margin-top: 1.2em; }
/* hero call to action: a link to the form (#contact), styled as a button; white on --blue is 4.8:1 */
.phero-body .hk-cta-row { margin-top: 28px; }
.hk-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 32px;
  background: var(--blue); color: var(--white); font-size: 16px; font-weight: 700; letter-spacing: .3px; text-decoration: none;
  transition: background-color .18s ease; }
.hk-cta:hover { background: var(--blue-dark); color: var(--white); }
.hk-cta:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* key facts: two columns on desktop, one on phones */
.specs-list {
  list-style: none; padding: 0; margin: 50px auto 0; max-width: 1080px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 48px;
}
.specs-list li {
  position: relative; padding-inline-start: 22px;
  font-size: 20px; line-height: 1.5; color: var(--navy); text-align: right;
}
.specs-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .6em; width: 10px; height: 10px; background: var(--blue); }

/* contact form: three inputs + button on one row (desktop), consent on the line below */
.lead-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 20px; align-items: center; }
.lead-row .submit-row { justify-content: stretch; }
.lead-row .submit { width: auto; }

/* ---- photo grid: 3 columns, 2 on phones; each tile keeps the photo's own ratio ---- */
.hk-gallery-note { max-width: 1280px; margin: -8px auto 28px; text-align: right; color: var(--muted); font-size: 15px; line-height: 1.6; }
.hk-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1280px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hk-thumb { position: relative; display: block; background: var(--tint); outline-offset: 3px; }
.hk-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1305 / 871; object-fit: contain; }
.hk-thumb::after {                         /* hover/focus veil only - never a permanent overlay */
  content: ""; position: absolute; inset: 0; background: rgba(18, 33, 63, .18);
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.hk-thumb:hover::after { opacity: 1; }
.hk-thumb:focus-visible { outline: 3px solid var(--blue); }

/* ---- viewer (native <dialog>) ---- */
.hk-viewer { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0;
  background: rgba(8, 14, 28, .96); color: #fff; overflow: hidden; }
.hk-viewer::backdrop { background: rgba(8, 14, 28, .96); }
.hk-viewer-stage { position: absolute; inset: 56px 72px 88px; display: flex; align-items: center; justify-content: center;
  touch-action: pan-y; user-select: none; }
.hk-viewer-stage picture { display: contents; }
.hk-viewer-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  -webkit-user-drag: none; pointer-events: none; }                 /* the stage, not the image, receives the gesture */
.hk-viewer-bar { position: absolute; inset-inline: 72px; bottom: 16px; min-height: 56px; display: flex; gap: 16px;
  align-items: center; justify-content: space-between; direction: rtl; }
.hk-viewer-caption { margin: 0; font-size: 15px; line-height: 1.5; text-align: right; }
.hk-viewer-count { flex: none; font-size: 14px; letter-spacing: .5px; color: #cfd6ea; direction: ltr; }
.hk-viewer button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%; background: rgba(8, 14, 28, .55); color: #fff; cursor: pointer; }
.hk-viewer button:hover { background: rgba(58, 97, 244, .85); border-color: transparent; }
.hk-viewer button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hk-viewer svg { width: 22px; height: 22px; }
.hk-viewer-close { position: absolute; top: 4px; inset-inline-end: 16px; }      /* RTL: top-left corner */
.hk-viewer-prev, .hk-viewer-next { position: absolute; top: 50%; transform: translateY(-50%); }
.hk-viewer-prev { inset-inline-start: 12px; }                                   /* RTL: right edge = previous */
.hk-viewer-next { inset-inline-end: 12px; }                                     /* RTL: left edge = next */

@media (min-width: 1101px) {
  .phero-sub { font-size: 18px; }
  .contact { padding-bottom: 50px; }
  /* "more projects": this page has four siblings (the others list three), so the
     track shows all four side by side instead of hiding one outside the viewport. */
  .projects .cards > .card { flex-basis: calc((100% - 90px) / 4); height: 430px; }
}
@media (max-width: 1100px) {
  .hk-grid { gap: 18px; }
}
@media (max-width: 768px) {
  .lead-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lead-row .submit { width: 100%; }
  .phero { padding: 24px var(--gut) 40px; }
  .crumbs { margin-bottom: 20px; }
  .phero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "body"; row-gap: 24px; }
  .phero-body { margin-top: 0; }
  .phero-body p { font-size: 15px; }
  .specs-list { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .specs-list li { font-size: 16px; }
  .hk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* phones: caption (up to 3 lines) + counter at the bottom, the two buttons on their own row above it, the photo above
     both, so no control ever covers the caption or the photo */
  .hk-viewer-stage { inset: 56px 8px 220px; }
  .hk-viewer-bar { inset-inline: 12px; bottom: 12px; flex-direction: column; align-items: stretch; gap: 6px; }
  .hk-viewer-prev, .hk-viewer-next { top: auto; bottom: 156px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hk-thumb::after { transition: none; }
}