/**
 * MAPPE: /assets/css/components/
 * FIL: ydelse_kort.css
 *
 * BRUGES AF: butik_service_public.php (ren service-butik) og butik.php
 * (Ydelser-fanen på hybrid-butikker), sammen med view-komponenten
 * app/views/components/ydelse_kort.php.
 *
 * BESKRIVELSE:
 * Ydelseskort med varighed, pris og book-CTA. Delt, så en kunde ser de samme
 * kort uanset om butikken kun sælger ydelser eller også har produkter.
 */

/* ── Ydelser sektion ── */
.ydelser-sektion{padding:2rem 0}
.sektion-overskrift{font-size:1.25rem;font-weight:700;margin-bottom:1.25rem}
.ydelse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}

/* ── Ydelse-kort ── */
.ydelse-kort{background:var(--surface);border:1px solid var(--slate-200);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow .15s,transform .15s;display:flex;flex-direction:column}
.ydelse-kort:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
/* contain (ikke cover) + SVG'ens egen navy-gradient som flade, så de kvadratiske
   branded ydelse-tiles ikke beskæres i toppen. Hex matcher assets 1:1 (literal, tema-invariant). */
.ydelse-kort-billede{width:100%;height:160px;object-fit:contain;background:linear-gradient(180deg,#16335a 0%,var(--primær) 100%)}
.ydelse-kort-billede-placeholder{width:100%;height:160px;background:linear-gradient(135deg,var(--slate-100),var(--slate-200));display:flex;align-items:center;justify-content:center;font-size:2.5rem}
.ydelse-kort-body{padding:1rem 1.125rem;flex:1;display:flex;flex-direction:column;gap:.5rem}
.ydelse-kort-navn{font-size:1rem;font-weight:600;color:var(--slate-900)}
.ydelse-kort-meta{display:flex;flex-wrap:wrap;gap:.5rem .75rem;align-items:center}
.ydelse-meta-chip{display:inline-flex;align-items:center;gap:.25rem;font-size:.8125rem;color:var(--slate-500)}
.ydelse-meta-chip svg{width:13px;height:13px}
.ydelse-pris{font-weight:700;color:var(--slate-900);font-size:.9375rem}
.ydelse-pris.gratis{color:var(--success)}
.ydelse-beskrivelse{font-size:.875rem;color:var(--slate-600);line-height:1.5;flex:1}
.ydelse-kort-footer{padding:.75rem 1.125rem;border-top:1px solid var(--slate-100)}
.ydelse-book-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.625rem 1rem;background:var(--accent);color:var(--tekst-paa-accent);border:none;border-radius:var(--radius-md);font-family:inherit;font-size:.9375rem;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s}
.ydelse-book-btn:hover{background:var(--accent-hover)}

@media (max-width: 640px) {
    .ydelse-grid { grid-template-columns: 1fr; }
    .ydelse-book-btn { min-height: 44px; }
}