/* ===========================================================================
   INERA Connection — kapcsolodj.css
   Loaded AFTER /css/site.css, only by /kapcsolodj.html:

     <link rel="stylesheet" href="/css/site.css">
     <link rel="stylesheet" href="/css/pages/kapcsolodj.css">

   Adds one photograph to each of the four station rows (the four
   kapcsolódási forms). Reuses the shared `.ground` opacity mechanic
   (site.css) and the `#shape-*` clipPath defs already inlined at the top of
   this page — nothing new is defined, only referenced. No new colour,
   typeface or stroke width, layout only.

   `.station__link` becomes a wrapping flex row: the words keep their own
   grid-inherited measure and the photograph fills what is left, dropping
   under the text on narrow viewports by wrapping rather than by a dedicated
   breakpoint (the same idiom `.offer__head` + `.ground--hero` already use on
   the four form pages this page links out to).
   =========================================================================== */

.station__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-l) clamp(1.5rem, 4vw, 3rem);
}

.station__text {
  flex: 1 1 26rem;
  min-inline-size: 0;
}

/* The photograph. Each form gets a different one of the site's organic
   #shape-* outlines — never the same cut twice, and never circle/oval, per
   the client's own instruction ("ne kör vagy ovális legyen"). Client
   feedback round two: the previous set (lobe / arch / drop / boulder) read
   as symmetric — the lobe's wave repeats almost exactly top-to-bottom, the
   arch is a mirrored dome, the drop is a mirrored teardrop. `#shape-seed`
   was tried as a replacement and rejected at render time — on this page's
   photo proportions it reads as a near-perfect oval, the exact thing being
   fixed. Final four, checked as solid silhouettes before being trusted on a
   photo: sweep (an off-centre S-curve eating only a sliver off one edge),
   boulder (already irregular, kept), and two page-local additions (see the
   SVG defs) — notch (a concave bite, can't read as an oval, it isn't even
   convex) and shard (an angular tapering wedge, reads as pointed not
   round). Bigger too: flex-basis and max-width both raised, and the forced
   3:2 box is gone — `.ground img` (site.css) already sets `height: auto`,
   so each photo now renders at its own true aspect ratio and the clip is
   the only cut; nothing is additionally cropped by object-fit. */
.station__photo {
  flex: 1 1 18rem;
  max-width: 24rem;
  margin: 0;
  --lit-floor: 90;
  --lit-gain: 0.10;
}

.station__photo img {
  object-fit: cover;
}

.station__photo--kiseres img { clip-path: url(#shape-sweep); object-position: 50% 48%; }
.station__photo--noi img { clip-path: url(#shape-boulder); object-position: 50% 38%; }
.station__photo--szuloi img { clip-path: url(#shape-shard); object-position: 50% 52%; }
.station__photo--talalkozasok img { clip-path: url(#shape-notch); object-position: 50% 45%; }
/* shard/notch were drawn and iterated directly against these two photos'
   own aspect ratios (~7:4) — do not repoint them at kiseres/noi without
   re-checking the render, the path only reads correctly at the ratio it was
   drawn for. */

/* Phones: give the photograph the full width of the wrapped row instead of
   the leftover sliver a plain wrap would leave it — the same call
   `.ground--hero` makes at 40rem on the four form pages themselves. The cap
   is raised alongside the desktop one; on most phones the row itself is
   narrower than this anyway, so it only matters on wider handsets/small
   tablets still inside the 40rem stacked layout. */
@media (max-width: 40rem) {
  .station__photo {
    flex-basis: 100%;
    max-width: 27rem;
  }
}