@import url('/assets/design-system/tokens.css');
@layer components{
  .container{width:min(1200px,100%);margin-inline:auto;padding:1rem}
  .btn{padding:.65rem 1rem;border-radius:var(--radius-2xl);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,213,74,.12),rgba(255,213,74,.05));color:var(--text-0);box-shadow:var(--glow-amber);transition:transform .2s ease, box-shadow .2s ease}
  .btn--primary:hover{transform:translateY(-1px);box-shadow:var(--glow-cyan)}

  .navbar{position:sticky;top:0;z-index:50;background:var(--bg-0);border-bottom:1px solid var(--line)}
  .navbar__inner{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:.75rem 1rem}
  .nav{display:flex;gap:.5rem;flex-wrap:wrap}
  .nav a{padding:.5rem .75rem;border-radius:8px;color:var(--text-1)}
  .nav a[aria-current="page"],.nav a:hover{color:var(--text-0);background:rgba(0,229,255,.08)}
  .brand{display:flex;gap:.5rem;align-items:center;color:var(--text-0)}
  .brand__logo{display:block}

  .ticker{position:relative;overflow:hidden;border-block:1px solid var(--line);background:rgba(16,22,38,.65)}
  .ticker__track{display:flex;gap:2rem;white-space:nowrap;animation:scroll 30s linear infinite;padding:.5rem 1rem}
  .ticker:hover .ticker__track{animation-play-state:paused}
  @keyframes scroll{to{transform:translateX(-50%)}}

  .grid{display:grid;gap:1rem}
  @media(min-width:768px){.grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}

  .card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(16,22,38,.85);backdrop-filter:blur(8px);box-shadow:var(--shadow-soft)}
  .card__media{position:relative;display:block}
  .card__media img{width:100%;height:180px;object-fit:cover}
  .badge{position:absolute;left:.75rem;top:.75rem;background:rgba(0,229,255,.15);color:var(--text-0);padding:.25rem .5rem;border:1px solid var(--line);border-radius:999px;font-size:.75rem;letter-spacing:.06em}
  .card__body{padding:1rem}
  .card__title{font-size:var(--fs-500);line-height:var(--lh-tight)}
  .card__excerpt{color:var(--text-1);margin-top:.5rem}
  .card__meta{margin-top:.75rem;font-size:.85em;color:var(--text-1)}
  .card--promo .card__media img{height:120px}

  .layout{display:grid;gap:1rem;grid-template-columns:1fr}
  @media(min-width:1024px){.layout{grid-template-columns:1fr 320px}}
  aside .widget{padding:1rem} 
  .widget{border:1px solid var(--line);border-radius:16px;background:rgba(16,22,38,.85);box-shadow:var(--shadow-soft)}
  .widget__title{padding:.75rem 1rem;border-bottom:1px solid var(--line);font-weight:600;color:var(--text-0)}
  .table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;font-size:clamp(11px,1.2vw,13px);line-height:1.25}
  .table th,.table td{padding:.25rem .4rem;border-bottom:1px solid var(--line);text-align:right;vertical-align:middle}
  .table th:first-child,.table td:first-child{text-align:left}
  .up{color:var(--ok)}
  .down{color:var(--err)}

  /* Clamp card text to avoid very long excerpts and titles */
  .card__title{display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card__excerpt{display:-webkit-box;line-clamp:6;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
  @media (max-width: 640px){
  .card__excerpt{line-clamp:5;-webkit-line-clamp:5}
  }
}
/* Utility outside layer for simplicity */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Hero carousel */
.carousel{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:rgba(16,22,38,.65)}
.carousel__viewport{display:flex;scroll-snap-type:x mandatory;overflow-x:hidden;scroll-behavior:smooth}
.carousel__slide{min-width:100%;scroll-snap-align:start;position:relative}
.carousel__slide img{width:100%;height:360px;object-fit:cover;filter:saturate(1.05)}
.carousel__caption{position:absolute;left:0;right:0;bottom:0;padding:1rem;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6));color:var(--text-0)}
.carousel__controls{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 .5rem;pointer-events:none}
.carousel__btn{pointer-events:auto;border:1px solid var(--line);background:rgba(16,22,38,.75);color:var(--text-0);border-radius:50%;width:40px;height:40px;display:grid;place-items:center}
.carousel__btn:focus-visible{outline:2px solid var(--acc-cyan)}