/* Familienmedien — modern, high-contrast, elderly-friendly UI
   Design goals: large readable type, strong contrast (WCAG AA+),
   big touch targets (>=48px), clearly visible keyboard focus. */

:root{
  --accent:#0b5cc0;            /* >=4.5:1 on white */
  --accent-strong:#08458f;
  --accent-contrast:#ffffff;
  --bg:#eef2f8;
  --surface:#ffffff;
  --surface-2:#f6f8fc;
  --text:#13202e;             /* ~15:1 on white */
  --muted:#46566a;            /* ~7:1 on white, passes AA for body text */
  --border:#d4dbe6;
  --shadow:0 6px 20px rgba(13,27,43,0.10);
  --shadow-lg:0 18px 50px rgba(13,27,43,0.28);
  --radius:14px;
  --focus:#ffae1a;            /* high-visibility focus ring */
  --ok:#1d7a44;
  --err:#b42318;
}

@media (prefers-color-scheme: dark){
  :root{
    --accent:#4d9bff;
    --accent-strong:#7ab4ff;
    --accent-contrast:#06203f;
    --bg:#0e1620;
    --surface:#16212e;
    --surface-2:#1c2937;
    --text:#eef3f9;
    --muted:#b3c0cf;
    --border:#2a3a4c;
    --shadow:0 6px 20px rgba(0,0,0,0.45);
    --shadow-lg:0 18px 50px rgba(0,0,0,0.65);
    --focus:#ffc14d;
  }
}

*{box-sizing:border-box}

html{font-size:18px}              /* larger base for readability */

body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  margin:0;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}

/* Accessibility helpers */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--accent-contrast);
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:700;
}
.skip-link:focus{left:0}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Visible focus everywhere, for keyboard users */
:focus-visible{
  outline:4px solid var(--focus);
  outline-offset:3px;
  border-radius:6px;
}

/* Header */
header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;
  padding:20px clamp(16px,4vw,32px);
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.hdr-left{display:flex;flex-direction:column;gap:2px}
header h1{margin:0;font-size:clamp(1.5rem,4vw,2rem);letter-spacing:-0.01em}
header .sub{margin:0;color:var(--muted);font-size:1rem}

/* Buttons */
button{font-family:inherit}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:12px 22px;
  font-size:1.05rem;font-weight:700;
  border-radius:12px;border:2px solid transparent;cursor:pointer;
  transition:background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn-primary{background:var(--accent);color:var(--accent-contrast)}
.btn-primary:hover{background:var(--accent-strong)}
.btn-secondary{
  background:var(--surface);color:var(--text);border-color:var(--border);
}
.btn-secondary:hover{background:var(--surface-2)}
.btn:active{transform:scale(.98)}

/* Main + sections */
main{padding:clamp(16px,4vw,32px);max-width:1180px;margin:0 auto}
section{margin-bottom:40px}
.section-head{display:flex;align-items:baseline;gap:12px;margin:0 0 16px}
h2{font-size:clamp(1.25rem,3vw,1.6rem);margin:0;color:var(--text)}
.count{
  font-size:1rem;font-weight:700;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);
  padding:2px 12px;border-radius:999px;
}
.empty{
  color:var(--muted);font-size:1.05rem;
  background:var(--surface);border:2px dashed var(--border);
  border-radius:var(--radius);padding:28px;text-align:center;
}

/* Grid + cards */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
  gap:20px;
}

/* Swipeable carousel: shows 4 cards per view; the rest appear when you
   swipe/scroll horizontally. Touch, trackpad and the scrollbar all work. */
.carousel{
  display:flex;
  gap:20px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding:4px 2px 16px;          /* room for the scrollbar + focus ring */
  scroll-padding-left:2px;
}
.carousel::-webkit-scrollbar{height:10px}
.carousel::-webkit-scrollbar-track{background:transparent}
.carousel::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
.carousel .card{
  flex:0 0 calc((100% - 3 * 20px) / 4);   /* exactly 4 visible (3 gaps between) */
  scroll-snap-align:start;
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.card:focus-visible{transform:translateY(-4px)}

.thumb{position:relative;aspect-ratio:4/3;background:var(--surface-2)}
.thumb img,.thumb video{
  width:100%;height:100%;object-fit:cover;display:block;background:var(--surface-2);
}
.play-badge{
  position:absolute;inset:0;margin:auto;
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.55);color:#fff;font-size:28px;
  pointer-events:none;
}
.meta{
  padding:12px 14px;font-size:1rem;color:var(--muted);
  display:flex;align-items:center;gap:8px;overflow:hidden;
}
.meta .dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--accent)}
/* keep the date on a single line so every card is the same height */
.meta span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Highlight strip for "new this week" */
#new .card{border-color:var(--accent)}

/* Upload control (fixed, clearly labeled) */
.uploader{
  position:fixed;right:clamp(16px,4vw,28px);bottom:clamp(16px,4vw,28px);z-index:40;
}
.plus{
  display:inline-flex;align-items:center;gap:12px;
  min-height:60px;padding:0 26px 0 22px;
  background:var(--accent);color:var(--accent-contrast);
  border:0;border-radius:999px;cursor:pointer;
  font-size:1.15rem;font-weight:800;
  box-shadow:var(--shadow-lg);
  transition:background .15s ease, transform .1s ease;
}
.plus:hover{background:var(--accent-strong)}
.plus:active{transform:scale(.97)}
.plus .ico{font-size:1.7rem;line-height:1}

/* Upload status toast (aria-live) */
.status{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:50;max-width:92vw;
  background:var(--text);color:var(--bg);
  padding:14px 22px;border-radius:12px;font-size:1.05rem;font-weight:700;
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transition:opacity .2s ease, visibility .2s ease;
}
.status.show{opacity:1;visibility:visible}
.status.ok{background:var(--ok);color:#fff}
.status.err{background:var(--err);color:#fff}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(7,12,18,0.86);z-index:100;padding:clamp(12px,4vw,40px);
}
.lightbox[aria-hidden="false"]{display:flex}
.lb-media{max-width:1200px;max-height:82vh;display:flex;align-items:center;justify-content:center}
.lb-media img,.lb-media video{max-width:100%;max-height:82vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,0.6)}

.lb-btn{
  position:fixed;background:rgba(0,0,0,0.55);color:#fff;border:2px solid rgba(255,255,255,0.25);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.lb-close{top:18px;right:18px;width:60px;height:60px;border-radius:50%;font-size:34px;line-height:1}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:64px;height:64px;border-radius:50%;font-size:38px;line-height:1}
.lb-prev{left:18px}
.lb-next{right:18px}
.lb-btn:hover{background:rgba(0,0,0,0.8)}
.lb-caption{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  color:#fff;background:rgba(0,0,0,0.6);padding:10px 18px;border-radius:10px;
  font-size:1.05rem;font-weight:600;max-width:90vw;text-align:center;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
  .card:hover{transform:none}
}

/* Small screens */
@media (max-width:560px){
  html{font-size:17px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:14px}
  .carousel{gap:10px}
  .carousel .card{flex-basis:calc((100% - 3 * 10px) / 4)}  /* still 4 per view */
  /* clean, uniform image-only tiles on phones (the date is too small to read
     at 4-across anyway; it's still shown in the full-screen view) */
  .carousel .card .meta{display:none}
  .carousel .card{border-radius:10px}
  .plus .label{display:none}      /* icon-only FAB to save space */
  .plus{min-height:64px;padding:0;width:64px;justify-content:center}
}