/* HELSINKI POOLS — Swiss grid, sidebar kiri */
.hl-page { --color-primary:#0ea5e9; --color-accent:#0f172a; --color-bg:#ffffff; --hl-zebra:#e8eef2; --hl-muted:#8a97a4;
  background:var(--color-bg); color:var(--color-accent); font-family:'Inter',system-ui,sans-serif; margin:-1.5rem -12px 0; padding-bottom:64px;
  display:grid; grid-template-columns:1fr; }
.hl-side { padding:22px 18px; border-bottom:1px solid #e6ebef; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hl-side-code { margin:0; font-size:13px; font-weight:700; letter-spacing:.24em; color:var(--color-primary); }
.hl-side-nav { display:flex; gap:16px; flex-wrap:wrap; }
.hl-side-nav a { font-size:12.5px; font-weight:500; color:var(--hl-muted); text-decoration:none; }
.hl-side-nav a:hover { color:var(--color-accent); }
.hl-side-tz { margin:0 0 0 auto; font-size:11px; color:var(--hl-muted); }
.hl-main { min-width:0; padding:0 18px; }
.hl-hero { padding:56px 0 0; }
.hl-h1 { font-size:clamp(20px,4.6vw,28px); font-weight:600; letter-spacing:-.02em; margin:0 0 6px; }
.hl-date { margin:0 0 46px; font-size:13px; color:var(--hl-muted); }
.hl-digits { display:flex; flex-wrap:wrap; gap:6px 22px; }
.hl-digit { font-size:clamp(64px,20vw,130px); font-weight:600; line-height:.92; letter-spacing:-.04em; color:var(--color-primary);
  opacity:0; transform:translateY(16px); animation:hl-in .5s cubic-bezier(.22,1,.36,1) forwards; font-variant-numeric:tabular-nums; }
.hl-digit-empty { color:#dbe4ea; }
@keyframes hl-in { to{opacity:1;transform:translateY(0);} }
.hl-meta { margin:40px 0 0; font-size:12px; color:var(--hl-muted); }
.hl-desc { margin:14px 0 0; max-width:560px; font-size:14px; line-height:1.75; color:var(--hl-muted); }
.hl-section { padding-top:72px; }
.hl-h2 { font-size:clamp(16px,3.6vw,20px); font-weight:600; margin:0 0 22px; letter-spacing:-.01em; }
.hl-filter { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.hl-filter select { height:40px; padding:0 12px; border:1px solid #dde4ea; border-radius:6px; background:#fff; font-family:inherit; font-size:13px; }
.hl-filter select:focus { outline:3px solid rgba(14,165,233,.18); border-color:var(--color-primary); }
.hl-btn { display:inline-flex; align-items:center; height:40px; padding:0 16px; border:1px solid var(--color-accent); border-radius:6px;
  background:var(--color-accent); color:#fff; font-size:12.5px; font-weight:500; cursor:pointer; }
.hl-btn:hover { background:#1e293b; color:#fff; } .hl-btn-ghost { background:#fff; color:var(--color-accent); border-color:#dde4ea; }
.hl-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.hl-table thead th { padding:0 12px 12px; text-align:left; font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--hl-muted); }
.hl-table tbody td { padding:14px 12px; border:0; }
.hl-table tbody tr:nth-child(even) { background:var(--hl-zebra); }
.hl-right { text-align:right; }
.hl-result { font-size:17px; font-weight:600; letter-spacing:.18em; color:var(--color-primary); font-variant-numeric:tabular-nums; }
.hl-muted { color:var(--hl-muted); } .hl-nowrap { white-space:nowrap; }
.hl-empty { padding:56px 0; } .hl-empty h3 { font-size:16px; font-weight:600; margin:0 0 6px; } .hl-empty p { margin:0; font-size:13px; color:var(--hl-muted); }
.hl-pagination { margin-top:24px; font-size:12.5px; color:var(--hl-muted); }
.hl-pagination .page-link { border-radius:6px; border:1px solid #dde4ea; color:var(--color-accent); }
.hl-pagination .page-item.active .page-link { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.hl-times { display:grid; grid-template-columns:1fr; gap:28px; }
.hl-time { border-top:2px solid var(--color-accent); padding-top:14px; }
.hl-time-label { display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--hl-muted); }
.hl-time-value { display:block; margin:8px 0 4px; font-size:34px; font-weight:600; letter-spacing:-.03em; }
.hl-time-note { display:block; font-size:11.5px; color:var(--hl-muted); }
.hl-note { margin:40px 0 0; font-size:12.5px; } .hl-note a { color:var(--color-primary); font-weight:500; }
@media (min-width:768px) { .hl-times { grid-template-columns:repeat(3,1fr); } }
@media (min-width:992px) { .hl-page { grid-template-columns:212px 1fr; margin-left:-24px; margin-right:-24px; }
  .hl-side { flex-direction:column; align-items:flex-start; gap:34px; border-bottom:0; border-right:1px solid #e6ebef; padding:56px 26px; position:sticky; top:64px; align-self:start; }
  .hl-side-nav { flex-direction:column; gap:12px; } .hl-side-tz { margin:auto 0 0; } .hl-main { padding:0 48px; max-width:1000px; } }
@media (max-width:575.98px) { .hl-hide-sm { display:none; } .hl-hero { padding-top:32px; } .hl-date { margin-bottom:28px; } .hl-section { padding-top:48px; } }
@media (prefers-reduced-motion:reduce) { .hl-digit { animation:none; opacity:1; transform:none; } }
