/* LainaLaite — component layer
   Vaatii: tokens.css. Ei riippuvuuksia Tailwindiin tai UI-kirjastoihin.
   Luokat vastaavat mockupin elementtejä 1:1. */

/* Loaded by a <link> in the page, ahead of this file, so the three
   stylesheets download in parallel. The @import that used to be here forced
   them into three serial round trips on the critical render path. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ll-bg);
  color: var(--ll-ink);
  font-family: var(--ll-font-ui);
  font-size: var(--ll-body-m);
  line-height: var(--ll-lh-body);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { body { font-size: var(--ll-body); } }

a { color: var(--ll-teal); text-decoration: none; }
a:hover { color: var(--ll-cta); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ll-teal); outline-offset: 2px; border-radius: 4px; }

/* ---------- Layout ---------- */
.ll-shell   { max-width: var(--ll-maxw); margin: 0 auto; padding-inline: var(--ll-gutter-m); }
@media (min-width: 768px) { .ll-shell { padding-inline: var(--ll-gutter-d); } }
.ll-article { max-width: var(--ll-maxw-read); }
.ll-stack   { display: grid; gap: var(--ll-4); }
.ll-row     { display: flex; gap: var(--ll-3); align-items: center; }
/* Tuotesivu / lomake: sisältö + tarttuva sivupalkki */
.ll-split { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--ll-6); align-items: start; }
@media (min-width: 1024px) {
  .ll-split { grid-template-columns: minmax(0,1fr) 380px; gap: var(--ll-8); }
  .ll-split__aside { position: sticky; top: var(--ll-4); }
}
.ll-grid-cards { display: grid; grid-template-columns: 1fr; gap: var(--ll-4); }
@media (min-width: 640px)  { .ll-grid-cards { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .ll-grid-cards { grid-template-columns: repeat(3,1fr); gap: var(--ll-5); } }

/* ---------- Typography ---------- */
.ll-h1      { font-family: var(--ll-font-display); font-weight: 400; font-size: var(--ll-h1);
              line-height: var(--ll-lh-tight); letter-spacing: var(--ll-ls-display); margin: 0; text-wrap: pretty; }
.ll-h1--hero{ font-size: var(--ll-h1-hero); }
.ll-h2      { font-family: var(--ll-font-display); font-weight: 400; font-size: var(--ll-h2);
              letter-spacing: -.02em; margin: 0 0 var(--ll-3); }
.ll-lead    { font-size: 1.0625rem; line-height: 1.65; color: var(--ll-ink-80); margin: var(--ll-3) 0 0; }
.ll-muted   { color: var(--ll-ink-70); }
.ll-label   { font-family: var(--ll-font-mono); font-weight: 500; font-size: var(--ll-label);
              letter-spacing: var(--ll-ls-label); text-transform: uppercase; color: var(--ll-ink-60); }
.ll-price   { font-family: var(--ll-font-display); font-weight: 600; font-size: var(--ll-price); color: var(--ll-cta); }
.ll-price__unit { font-family: var(--ll-font-ui); font-weight: 400; font-size: var(--ll-small); color: var(--ll-ink-60); }
.ll-price--secondary { color: var(--ll-ink); font-size: .9375rem; }

/* ---------- Header / footer ---------- */
.ll-topbar { background: var(--ll-ink); color: #fff; }
.ll-topbar a, .ll-topbar__link { color: rgba(255,255,255,.78); font-weight: 500; font-size: .84375rem; }
.ll-topbar__link[aria-current="page"] { color: #fff; border-bottom: 2px solid var(--ll-gold); padding-bottom: 3px; }
.ll-wordmark { font-family: var(--ll-font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.ll-wordmark em { font-style: normal; color: var(--ll-gold); }
.ll-footer { background: var(--ll-ink); color: rgba(255,255,255,.72); font-size: .8125rem; line-height: 1.9; }
.ll-footer a { color: rgba(255,255,255,.72); }
.ll-footer a:hover { color: #fff; }

/* ---------- Buttons ---------- */
.ll-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ll-2);
  min-height: var(--ll-tap); padding: 0 var(--ll-5);
  border: 1.5px solid transparent; border-radius: var(--ll-r-btn);
  font: 600 .9375rem/1 var(--ll-font-ui); cursor: pointer;
  transition: background var(--ll-dur) var(--ll-ease), border-color var(--ll-dur) var(--ll-ease);
}
.ll-btn--primary  { background: var(--ll-cta); color: #fff; }           /* yksi per näkymä */
.ll-btn--primary:hover  { background: #C9553F; }
.ll-btn--secondary{ background: transparent; color: var(--ll-teal); border-color: var(--ll-teal); }
.ll-btn--secondary:hover{ background: var(--ll-teal-soft); }
.ll-btn--ink      { background: var(--ll-ink); color: #fff; }           /* admin-toiminnot */
.ll-btn--quiet    { background: transparent; color: var(--ll-ink); border-color: var(--ll-border-strong); }
.ll-btn--block    { width: 100%; }
.ll-btn[disabled], .ll-btn[aria-disabled="true"] { background: rgba(31,75,74,.12); color: var(--ll-ink-45); border-color: transparent; cursor: not-allowed; }
.ll-btn--icon     { width: 52px; min-height: 52px; padding: 0; font-family: var(--ll-font-mono); font-size: .625rem; }

/* ---------- Badges & chips ---------- */
.ll-badge { display: inline-block; padding: 5px 9px; border-radius: var(--ll-r-badge);
            font: 600 .6875rem/1.2 var(--ll-font-ui); }
.ll-badge--free    { background: var(--ll-gold); color: var(--ll-ink); }     /* vapaana nyt */
.ll-badge--booked  { background: var(--ll-surface); color: var(--ll-ink); border: 1px solid var(--ll-border-strong); }
.ll-badge--info    { background: var(--ll-teal-soft); color: var(--ll-ink); }
.ll-badge--status  { font-family: var(--ll-font-mono); letter-spacing: .04em; text-transform: uppercase; }
.ll-badge--requested { background: var(--ll-cta); color: #fff; }
.ll-badge--approved  { background: var(--ll-gold); color: var(--ll-ink); }
.ll-badge--active    { background: var(--ll-teal-soft); color: var(--ll-ink); }
.ll-badge--done      { background: rgba(31,75,74,.10); color: var(--ll-ink-70); }

.ll-chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px;
           border-radius: var(--ll-r-chip); background: rgba(31,75,74,.08);
           font: 500 .78125rem/1 var(--ll-font-ui); color: var(--ll-ink); cursor: pointer; }
.ll-chip[aria-pressed="true"], .ll-chip--active { background: var(--ll-ink); color: #fff; }
.ll-chiprow { display: flex; gap: var(--ll-2); overflow-x: auto; scrollbar-width: none; }
.ll-chiprow::-webkit-scrollbar { display: none; }

/* ---------- Cards ---------- */
.ll-card { background: var(--ll-surface); border: 1px solid var(--ll-border);
           border-radius: var(--ll-r-card); overflow: hidden; }
.ll-card--panel { border-radius: var(--ll-r-panel); box-shadow: var(--ll-shadow-panel); }
.ll-card__media { aspect-ratio: 4 / 3; background: var(--ll-surface-sunk); position: relative; }
.ll-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ll-card__media .ll-badge { position: absolute; top: 12px; left: 12px; }
.ll-card__body { padding: var(--ll-4) 15px 18px; }
.ll-card__title { font: 600 1rem/1.28 var(--ll-font-ui); margin: 0; }
.ll-card__meta  { font-size: var(--ll-small); color: var(--ll-ink-60); margin-top: 5px; }
.ll-card--row { display: flex; gap: 13px; align-items: center; padding: 13px 0;
                border-bottom: 1px solid var(--ll-hairline); border-radius: 0; background: none; border-inline: 0; border-top: 0; }
.ll-card--row .ll-thumb { width: 70px; height: 70px; flex: none; border-radius: 12px; object-fit: cover; }

/* ---------- Pricing table ---------- */
.ll-pricing { background: var(--ll-surface); border: 1px solid var(--ll-border);
              border-radius: 16px; overflow: hidden; }
.ll-pricing__head { background: var(--ll-ink); color: #fff; padding: 12px 16px; font: 600 .8125rem/1 var(--ll-font-ui); }
.ll-pricing__row  { display: flex; justify-content: space-between; gap: var(--ll-3);
                    padding: 13px 16px; border-bottom: 1px solid var(--ll-hairline); font-size: .90625rem; }
.ll-pricing__row:last-of-type { border-bottom: 0; }
.ll-pricing__row b { font-weight: 600; }
.ll-pricing__row--featured { background: rgba(227,182,85,.10); }
.ll-pricing__note { background: var(--ll-gold-soft); padding: 11px 16px; font-size: var(--ll-small); line-height: 1.5; }

/* ---------- Summary (arvio) ---------- */
.ll-summary { background: var(--ll-surface-sunk); border-radius: 16px; padding: 15px; }
.ll-summary__line { display: flex; justify-content: space-between; font-size: .84375rem; color: var(--ll-ink-70); }
.ll-summary__line + .ll-summary__line { margin-top: 7px; }
.ll-summary__rule  { height: 1px; background: rgba(31,75,74,.14); margin: 12px 0; }
.ll-summary__total { display: flex; justify-content: space-between; align-items: baseline; }
.ll-summary__total b { font: 600 1.4375rem/1 var(--ll-font-display); color: var(--ll-cta); }
.ll-summary__fine  { font-size: .71875rem; line-height: 1.45; color: var(--ll-ink-60); margin-top: 7px; }

/* ---------- Forms ---------- */
.ll-field { display: grid; gap: 7px; }
.ll-input, .ll-select, .ll-textarea {
  width: 100%; min-height: var(--ll-tap); padding: 13px 14px;
  background: var(--ll-surface); color: var(--ll-ink);
  border: 1px solid var(--ll-border-strong); border-radius: var(--ll-r-field);
  font: 400 .90625rem/1.4 var(--ll-font-ui);
}
.ll-textarea { min-height: 84px; resize: vertical; }
.ll-input::placeholder, .ll-textarea::placeholder { color: var(--ll-ink-45); }
.ll-input[aria-invalid="true"] { border-color: var(--ll-cta); }
.ll-error { font-size: .75rem; color: var(--ll-cta); }
.ll-hint  { font-size: .75rem; color: var(--ll-ink-60); }
/* Kestovalitsin: radiot napeiksi */
.ll-segment { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
@media (min-width: 768px) { .ll-segment { grid-template-columns: repeat(4,1fr); } }
.ll-segment__opt { border: 1.5px solid var(--ll-border-strong); background: var(--ll-surface);
                   border-radius: 13px; padding: 13px 14px; font: 600 .875rem/1.2 var(--ll-font-ui); cursor: pointer; }
.ll-segment__opt small { display: block; font-weight: 400; font-size: var(--ll-small); color: var(--ll-ink-60); margin-top: 3px; }
.ll-segment__opt[aria-checked="true"] { background: var(--ll-ink); border-color: var(--ll-ink); color: #fff; }
.ll-segment__opt[aria-checked="true"] small { color: rgba(255,255,255,.75); }
.ll-check { display: flex; gap: 11px; align-items: flex-start; font-size: .84375rem; line-height: 1.5; color: var(--ll-ink-80); }
.ll-switch { width: 38px; height: 22px; border-radius: 11px; background: rgba(31,75,74,.20); position: relative; flex: none; cursor: pointer; }
.ll-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
                    border-radius: 50%; background: #fff; transition: left var(--ll-dur) var(--ll-ease); }
.ll-switch[aria-checked="true"] { background: var(--ll-teal); }
.ll-switch[aria-checked="true"]::after { left: 19px; }

/* ---------- Notices ---------- */
.ll-note { border-radius: 14px; padding: 14px 16px; font-size: .84375rem; line-height: 1.55; }
.ll-note--gold { background: var(--ll-gold-soft); }
.ll-note--teal { background: var(--ll-teal-soft); }
.ll-note--warn { background: rgba(217,97,74,.12); }
.ll-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ll-dot--ok { background: var(--ll-teal); } .ll-dot--warn { background: var(--ll-cta); }
.ll-dot--idle { background: rgba(31,75,74,.22); }

/* ---------- Sticky mobile CTA ---------- */
.ll-stickybar { position: sticky; bottom: 0; z-index: 20;
  background: var(--ll-bg); border-top: 1px solid rgba(31,75,74,.12);
  padding: 12px var(--ll-gutter-m) calc(18px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; align-items: center; }
.ll-stickybar .ll-btn--primary { flex: 1; }
@media (min-width: 1024px) { .ll-stickybar { display: none; } }

/* ---------- Steps & FAQ (käyttötapaussivu) ---------- */
.ll-steps { display: grid; gap: var(--ll-4); }
.ll-step  { display: flex; gap: 14px; }
.ll-step__n { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--ll-ink); color: #fff;
              display: grid; place-items: center; font: 600 .78125rem/1 var(--ll-font-mono); }
.ll-faq__item { border-top: 1px solid rgba(31,75,74,.12); padding: 14px 0; }
.ll-faq__item:last-child { border-bottom: 1px solid rgba(31,75,74,.12); }
.ll-faq__q { display: flex; justify-content: space-between; gap: var(--ll-3);
             font: 600 .9375rem/1.35 var(--ll-font-ui); cursor: pointer; }
.ll-faq__a { font-size: .90625rem; line-height: 1.6; color: var(--ll-ink-80); margin-top: 8px; }

/* ---------- Timeline (varauksen tila) ---------- */
.ll-timeline { display: grid; gap: 0; }
.ll-timeline__item { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 14px; }
.ll-timeline__item .ll-dot { margin-top: 5px; }
.ll-timeline__item[data-state="pending"] { color: var(--ll-ink-60); }

/* ---------- Admin ---------- */
.ll-admin { background: #F4F0EA; min-height: 100vh; }
.ll-admin__bar { display: flex; align-items: center; gap: 14px; background: var(--ll-ink); color: #fff; padding: 12px var(--ll-6); }
.ll-admin__tag { font: 500 .65625rem/1 var(--ll-font-mono); letter-spacing: .06em; color: rgba(255,255,255,.6); }
.ll-admin__count { background: var(--ll-cta); color: #fff; border-radius: 20px; padding: 1px 7px; font-size: .6875rem; }
.ll-admin__split { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; }
@media (min-width: 1024px) { .ll-admin__split { grid-template-columns: minmax(0,1fr) 400px; } }
.ll-admin__aside { background: var(--ll-surface-admin); padding: var(--ll-5) var(--ll-6); }
.ll-table { background: var(--ll-surface); border: 1px solid var(--ll-border); border-radius: 16px; overflow: hidden; }
.ll-table__head, .ll-table__row { display: grid; gap: var(--ll-3); padding: 12px 14px; align-items: center; }
.ll-table__head { background: rgba(31,75,74,.05); font: 500 .6875rem/1 var(--ll-font-mono);
                  letter-spacing: .04em; text-transform: uppercase; color: var(--ll-ink-60); }
.ll-table__row  { border-top: 1px solid var(--ll-hairline); font-size: .84375rem; }
.ll-table__row--attention { background: rgba(227,182,85,.10); }
.ll-stat { background: var(--ll-surface); border: 1px solid var(--ll-border); border-radius: 16px; padding: var(--ll-4); }
.ll-stat__n { font: 600 1.625rem/1 var(--ll-font-display); margin-top: 7px; }
/* AI-luonnos vaatii tarkistuksen ennen julkaisua */
.ll-draft { background: var(--ll-surface); border: 1.5px solid var(--ll-apricot); border-radius: 12px; padding: 13px; }
.ll-draft__excerpt { font-size: .78125rem; line-height: 1.5; color: var(--ll-ink-70);
                     margin-top: 8px; padding-left: 11px; border-left: 2px solid rgba(31,75,74,.15); }
/* Kalenteri */
.ll-cal { background: var(--ll-surface); border: 1px solid var(--ll-border); border-radius: 16px; overflow: hidden; }
.ll-cal__row { display: grid; grid-template-columns: 220px repeat(7, 1fr); border-top: 1px solid var(--ll-hairline); align-items: center; }
.ll-cal__row:first-child { border-top: 0; background: rgba(31,75,74,.05); }
.ll-cal__booking { display: block; border-radius: 8px; padding: 7px 9px; text-align: center;
                   font: 600 .71875rem/1.2 var(--ll-font-ui); }
.ll-cal__booking--approved { background: var(--ll-gold); color: var(--ll-ink); }
.ll-cal__booking--active   { background: rgba(33,134,122,.22); color: var(--ll-ink); }
.ll-cal__booking--conflict { background: var(--ll-cta); color: #fff; }

/* ---------- Utilities ---------- */
.ll-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ll-skeleton { background: linear-gradient(90deg, rgba(31,75,74,.06), rgba(31,75,74,.12), rgba(31,75,74,.06));
               background-size: 200% 100%; animation: ll-shimmer 1.2s linear infinite; border-radius: 12px; }
@keyframes ll-shimmer { to { background-position: -200% 0; } }