/* Legal pages (/uslovi-koriscenja/, /privatnost/): prefix al-, loaded on those two pages only (inc/render/legal.php). */
.al{padding-block:clamp(28px,4.5vw,56px) clamp(48px,7vw,96px)}
.al-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,3.4vw,44px);align-items:start}
.al-toc{position:sticky;top:calc(var(--as-hdr) + 20px);font-size:14px;line-height:1.4}
.al-toc__t{margin:0 0 8px;font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--as-ink-2)}
.al-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.al-toc a{display:block;padding:5px 8px;border-radius:var(--as-r-sm);color:var(--as-ink-2);text-decoration:none}
.al-toc a:hover{background:var(--as-surface);color:var(--as-ink)}
.al-page{background:var(--as-surface);border:1px solid var(--as-line);border-radius:var(--as-r-lg);padding:clamp(22px,4vw,56px);min-width:0}
.al-page p{margin:0}
.al-title{margin:0;font-size:clamp(30px,3.4vw,42px);line-height:1.1;font-weight:740;letter-spacing:-.03em;text-wrap:balance}
.al-meta{margin-top:8px!important;font-size:14.5px;color:var(--as-ink-2)}
.al-intro{margin-top:18px!important;font-size:clamp(16.5px,1.4vw,18.5px);line-height:1.55;color:var(--as-ink-2);max-width:34em}
.al-page section{margin-top:38px;max-width:36em;scroll-margin-top:8px}
.al-page section.al-wide{max-width:none}
.al-page section.al-wide>p{max-width:36em}
.al-page h2{margin:0 0 12px;font-size:21px;line-height:1.25;font-weight:680;letter-spacing:-.015em}
.al-page h3{margin:22px 0 6px;font-size:16.5px;line-height:1.3;font-weight:650}
.al-page section>p+p,.al-page section>p+ul,.al-page section>ul+p,.al-page section>h3+p{margin-top:10px}
.al-page ul{margin:10px 0 0;padding-left:20px;display:grid;gap:6px;list-style:disc}
.al-page ul ul{list-style:circle}
.al-page ul ul{margin-top:6px}
.al-page li::marker{color:var(--as-ink-3)}
.al-page strong{font-weight:650}
.al-short{margin-top:28px;max-width:36em;background:var(--as-sea-50);border:1px solid var(--as-sea-100);border-radius:var(--as-r-md);padding:18px 20px;scroll-margin-top:8px}
.al-short h2{margin:0 0 8px;font-size:16.5px}
.al-short ul{margin:0}
.al-tbl{container:al-tbl/inline-size;overflow-x:auto;margin-top:14px;border:1px solid var(--as-line);border-radius:var(--as-r-md)}
.al-tbl:focus-visible{outline:2px solid var(--as-navy);outline-offset:2px}
.al-tbl table{border-collapse:collapse;width:100%;min-width:760px;font-size:14.5px;line-height:1.45}
.al-tbl th,.al-tbl td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--as-line)}
.al-tbl th{font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--as-ink-2);background:var(--as-surface-2)}
.al-tbl tr:last-child td{border-bottom:0}
.al-tbl td:first-child{font-weight:620;width:19%}
.al-after{margin-top:12px!important}
/* narrower than 760 px the table would scroll sideways with hidden columns: each row becomes a card, every cell under its column name */
@container al-tbl (max-width:759px){
  .al-tbl table{min-width:0}
  .al-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .al-tbl tr{display:block;padding:14px 16px;border-bottom:1px solid var(--as-line)}
  .al-tbl tr:last-child{border-bottom:0}
  .al-tbl td{display:block;width:auto;padding:0;border:0}
  .al-tbl td:first-child{width:auto;margin-bottom:8px;font-size:15.5px}
  .al-tbl td+td{margin-top:8px}
  .al-tbl td+td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--as-ink-2)}
}
/* a wide card (a tablet, a 1024 window): the column name beside its value, like a definition list */
@container al-tbl (min-width:520px) and (max-width:759px){
  .al-tbl td+td{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px}
  .al-tbl td+td::before{margin:2px 0 0}
}
/* the sticky side list needs 960 px; narrower, the same list folds into a "Sadržaj" box before the first section */
.al-tocm{display:none}
@media (max-width:959px){
  .al-grid{grid-template-columns:minmax(0,1fr)}
  .al-toc{display:none}
  .al-tocm{display:block;margin-top:24px;border:1px solid var(--as-line);border-radius:var(--as-r-md);background:var(--as-surface-2)}
  .al-tocm summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 16px;font-weight:650;cursor:pointer;list-style:none}
  .al-tocm summary::-webkit-details-marker{display:none}
  .al-tocm summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate .2s}
  .al-tocm[open] summary::after{rotate:225deg;translate:0 2px}
  .al-tocm summary:focus-visible{outline:2px solid var(--as-navy);outline-offset:2px;border-radius:var(--as-r-md)}
  .al-tocm ol{list-style:none;margin:0;padding:0 8px 10px;display:grid}
  .al-tocm a{display:flex;align-items:center;min-height:44px;padding:0 8px;border-radius:var(--as-r-sm);color:var(--as-ink-2);text-decoration:none}
  .al-tocm a:hover{background:#fff;color:var(--as-ink)}
}