/* /fernbedienung.html (+ /en/remote-control.html) — the T2 remote controller.
   Loaded only on that page. Uses the shared tokens + the .features list from
   main.css; this file adds the page hero + the photo masonry. */
@layer reset, base, components, utilities;

@layer components{

  /* Page hero — a clean heading line on a token surface. */
  .remote-hero{padding-block:clamp(20px,3vw,32px) clamp(32px,5vw,52px);background:var(--c-bg);color:var(--c-text)}
  .remote-hero__inner{max-width:760px}
  .remote-hero__eyebrow{margin:0 0 14px;color:var(--c-accent);font-size:13px;letter-spacing:.04em}
  .remote-hero h1{margin:0 0 14px;font-size:clamp(1.9rem,4.5vw,2.8rem);font-weight:700;letter-spacing:-.01em;line-height:1.1;color:var(--c-text)}
  .remote-hero__intro{margin:0;color:var(--c-text-muted);font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6}

  /* Photo masonry — keeps each photo's natural aspect ratio (mixed portrait/landscape). */
  .remote-shots{padding-block:0 var(--section-pad);background:var(--c-bg)}
  .remote-shots__grid{column-count:3;column-gap:clamp(16px,2.5vw,26px)}
  .remote-shot{break-inside:avoid;margin:0 0 clamp(16px,2.5vw,26px);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
  .remote-shot:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
  .remote-shot img{display:block;width:100%;height:auto;background:#0d0d0f}
  .remote-shot figcaption{padding:12px 16px;font-size:14px;color:var(--c-text-muted);line-height:1.45}
  @media (max-width:900px){.remote-shots__grid{column-count:2}}
  @media (max-width:560px){.remote-shots__grid{column-count:1}}

  /* The readout list reuses .features from main.css; sit it on the surface tone here. */
  .remote-features{background:var(--c-surface)}

  /* Back-links row. */
  .remote-back{padding-block:clamp(36px,5vw,56px) clamp(52px,8vw,88px);background:var(--c-bg)}
  .remote-back__inner{max-width:760px}
  .remote-back p{margin:0;color:var(--c-text-muted);font-size:15.5px;line-height:1.7}
  .remote-back a{color:var(--c-accent);font-weight:600;text-decoration:none}
  .remote-back a:hover{text-decoration:underline}

}