/*
 * Sekce Služby podle návrhu „Gosling Portfolio v4“ (Claude Design, sekce SERVICES):
 * čtyři karty balíčků, široká karta s průběhem spolupráce ve čtyřech sloupcích,
 * pod ní „Provoz a péče“ (8 sloupců: úvod + tarify) a „Co si připravit“ (4 sloupce,
 * číslované řádky + Poptávka). Zelený akcent má jen karta „Aplikace na míru“.
 * Ceny na webu záměrně nejsou.
 */
.services__title { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: end; padding: 0 8px 40px; }
.services__title h2 { grid-column: 1 / span 6; margin: 0; font-weight: 500; font-size: clamp(32px, 4vw, 56px); letter-spacing: -.035em; line-height: 1; }
.services__title p { grid-column: 8 / span 5; margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-60); text-wrap: pretty; }

/* ---------- Balíčky ---------- */
.services__packages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pkg {
    display: flex; flex-direction: column; gap: 18px; min-width: 0;
    padding: 28px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--ink-06);
    transition: border-color .3s, transform .5s var(--ease-out);
}
.pkg:hover { border-color: rgba(183, 201, 161, .5); transform: translateY(-4px); }
.pkg__head { display: flex; flex-direction: column; gap: 8px; }
.pkg__name { margin: 0; font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.03em; line-height: 1; }
.pkg__time { font-size: 12px; letter-spacing: .04em; color: var(--ink-50); }
.pkg__who { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(241, 239, 232, .8); text-wrap: pretty; }
/* Karta bez věty „vše z nižšího balíčku“ má na stejném místě jen linku, ať seznamy začínají ve stejné výšce */
.pkg__rule { border-top: 1px solid var(--ink-12); }
.pkg__base { margin: 0; padding-top: 14px; border-top: 1px solid var(--ink-12); font-size: 12px; letter-spacing: .04em; color: var(--ink-50); }
.pkg__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; color: rgba(241, 239, 232, .8); }
.pkg__list li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px; align-items: start; }
.pkg__list li::before { content: ''; width: 8px; height: 8px; margin-top: .45em; border-radius: 50%; border: 1px solid var(--accent); }
.pkg__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-50); }
.pkg__cta {
    margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 18px; border-radius: 999px; border: 1px solid var(--ink-18); font-size: 14px; font-weight: 500;
    transition: border-color .3s, background .3s, color .3s;
}
.pkg__cta:hover { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.pkg--accent { background: var(--accent); color: var(--bg); border-color: transparent; }
.pkg--accent .pkg__time, .pkg--accent .pkg__base, .pkg--accent .pkg__note { color: rgba(13, 14, 13, .6); }
.pkg--accent .pkg__who, .pkg--accent .pkg__list { color: rgba(13, 14, 13, .78); }
.pkg--accent .pkg__rule, .pkg--accent .pkg__base { border-color: rgba(13, 14, 13, .18); }
.pkg--accent .pkg__list li::before { border-color: var(--bg); }
.pkg--accent .pkg__cta { border-color: rgba(13, 14, 13, .3); color: var(--bg); }
.pkg--accent .pkg__cta:hover { background: var(--bg); color: var(--accent); border-color: var(--bg); }

/* ---------- Jak spolupráce probíhá — čtyři kroky vedle sebe ---------- */
.process {
    margin-top: 16px; display: flex; flex-direction: column; gap: 28px;
    padding: 32px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--ink-06);
}
.process__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.step { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-top: 18px; border-top: 1px solid var(--ink-12); }
.step__num { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--accent); }
.step__title { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.step__body { font-size: 14px; line-height: 1.55; color: var(--ink-60); text-wrap: pretty; }

/* ---------- Provoz a péče + Co si připravit ---------- */
.services__more { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.care {
    grid-column: 1 / span 8; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 32px 24px;
    padding: 32px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--ink-06);
}
.care__intro { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.care__statement { margin: 0; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; letter-spacing: -.025em; font-weight: 500; text-wrap: balance; }
.care__body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-60); text-wrap: pretty; }
.care__notes { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-55); }
.care__notes li { display: grid; grid-template-columns: 5px minmax(0, 1fr); gap: 9px; align-items: start; }
.care__notes li::before { content: ''; width: 5px; height: 5px; margin-top: .55em; border-radius: 50%; background: var(--ink-40); }
.care__list { grid-column: 4 / span 5; display: flex; flex-direction: column; border-top: 1px solid var(--ink-12); min-width: 0; }
.tier { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ink-12); }
.tier__name { display: flex; flex-direction: column; gap: 4px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.tier__for { font-size: 12px; letter-spacing: .04em; font-weight: 400; color: var(--ink-45); }
.tier__desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-75); text-wrap: pretty; }
.prep {
    grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 20px; min-width: 0;
    padding: 32px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--ink-06);
}
.prep__list { display: flex; flex-direction: column; border-top: 1px solid var(--ink-12); }
.prep__row {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center;
    padding: 16px 0; border-bottom: 1px solid var(--ink-12); font-size: 16px; font-weight: 500; letter-spacing: -.01em;
}
.prep__num { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-40); }
.prep__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-55); text-wrap: pretty; }
.prep .btn-outline { margin-top: auto; }