/*
 * Tillägg utöver den färdigbyggda Tailwind-filen (app.css), som inte går att bygga om här.
 * Prisdelens egna klasser ligger i prices.css.
 */

/* Bilden under tjänstens beskrivning ('figure' i SERVICES): CRM-skärmbilden, Google Ads-exemplet. */
.service-figure{ max-width:64rem; margin:3rem auto 0; }
.service-figure img{ display:block; width:100%; height:auto; border-radius:1rem; border:1px solid rgb(0 0 0 / .08); box-shadow:0 30px 60px -30px rgb(0 0 0 / .45); }

/* Bloggen: listan (pages/blog.php) och ett inlägg (pages/blog_post.php). */
.blog-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:640px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .blog-grid{ grid-template-columns:repeat(3,1fr); } }
.blog-card{ display:flex; flex-direction:column; height:100%; background:#fff; border-radius:1rem; overflow:hidden; border:1px solid var(--color-brand-accent); box-shadow:0 1px 3px rgb(0 0 0 / .08); text-decoration:none; color:var(--color-brand-dark); transition:transform .3s, box-shadow .3s; }
.blog-card:hover{ transform:translateY(-.5rem); box-shadow:0 20px 40px -20px rgb(0 0 0 / .3); }
.blog-card-img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.blog-card-img.is-empty{ display:flex; align-items:center; justify-content:center; font-size:4rem; font-weight:700; color:color-mix(in oklab, var(--color-brand-dark) 12%, transparent); background:linear-gradient(135deg, color-mix(in oklab, var(--color-brand-dark) 8%, transparent), color-mix(in oklab, var(--color-brand-accent) 14%, transparent)); }
.blog-card-body{ display:flex; flex-direction:column; flex:1; padding:1.5rem; }
.blog-card time{ font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--color-brand-accent); }
.blog-card h2{ margin-top:.5rem; font-size:1.25rem; font-weight:600; line-height:1.3; transition:color .3s; }
.blog-card:hover h2{ color:var(--color-brand-accent); }
.blog-card-text{ margin-top:.75rem; font-size:.9375rem; line-height:1.6; color:color-mix(in oklab, var(--color-brand-dark) 60%, transparent); }
.blog-card-more{ display:inline-flex; align-items:center; gap:.375rem; margin-top:auto; padding-top:1rem; font-size:.875rem; font-weight:500; color:var(--color-brand-accent); }

.blog-cover{ display:block; width:100%; height:auto; max-height:30rem; object-fit:cover; border-radius:1rem; margin-bottom:2.5rem; box-shadow:0 20px 40px -24px rgb(0 0 0 / .4); }
.blog-prose{ font-size:1.125rem; line-height:1.75; color:color-mix(in oklab, var(--color-brand-dark) 80%, transparent); overflow-wrap:break-word; }
.blog-prose > * + *{ margin-top:1.25rem; }
.blog-prose h2{ margin-top:2.75rem; font-size:1.75rem; font-weight:700; line-height:1.25; color:var(--color-brand-dark); }
.blog-prose h3{ margin-top:2rem; font-size:1.3125rem; font-weight:600; line-height:1.3; color:var(--color-brand-dark); }
.blog-prose strong, .blog-prose b{ font-weight:600; color:var(--color-brand-dark); }
.blog-prose a{ color:var(--color-brand-accent); text-decoration:underline; text-underline-offset:2px; }
.blog-prose a:hover{ color:var(--color-brand-accent-hover); }
.blog-prose ul, .blog-prose ol{ padding-left:1.5rem; }
.blog-prose ul{ list-style:disc; }
.blog-prose ol{ list-style:decimal; }
.blog-prose li + li{ margin-top:.5rem; }
.blog-prose li::marker{ color:var(--color-brand-accent); }
.blog-prose blockquote{ padding:.25rem 0 .25rem 1.25rem; border-left:4px solid var(--color-brand-accent); font-style:italic; color:var(--color-brand-dark); }
.blog-prose img{ display:block; max-width:100%; height:auto; border-radius:.75rem; margin:2rem auto; }

/* Företagen vi samarbetar med som rutnät på projektsidan. Det rullande bandet på startsidan har egen CSS i partials/partners.php. */
.partner-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (min-width:640px){ .partner-grid{ grid-template-columns:repeat(3,1fr); gap:1.5rem; } }
@media (min-width:1024px){ .partner-grid{ grid-template-columns:repeat(5,1fr); } }
.partner-card{ display:flex; flex-direction:column; align-items:center; text-align:center; height:100%; padding:1.5rem 1rem 1.25rem; border-radius:1rem; background:#fff; border:1px solid color-mix(in oklab, var(--color-brand-dark) 10%, transparent); text-decoration:none; color:var(--color-brand-dark); transition:transform .3s, box-shadow .3s, border-color .3s; }
.partner-card:hover{ transform:translateY(-.375rem); border-color:var(--color-brand-accent); box-shadow:0 16px 32px -20px rgb(0 0 0 / .3); }
.partner-card-logo{ display:flex; align-items:center; justify-content:center; width:100%; height:5rem; }
.partner-card-logo img{ display:block; height:var(--h); width:auto; max-width:100%; object-fit:contain; }
.partner-card-name{ margin-top:.75rem; font-size:.9375rem; font-weight:600; line-height:1.3; }
.partner-card-link{ display:inline-flex; align-items:center; gap:.375rem; margin-top:auto; padding-top:.5rem; font-size:.8125rem; font-weight:500; color:var(--color-brand-accent); }

/* Sociala medier i sidfoten: runda märken i respektive nätverks färg. Länkarna står i COMPANY['social'] (lib/data.php). */
.social-links{ display:flex; gap:.75rem; margin-top:1.5rem; }
.social-link{ display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:999px; color:#fff; transition:transform .2s, filter .2s; }
.social-link:hover{ transform:translateY(-2px); filter:brightness(1.12); }
.social-link.is-facebook{ background:#1877f2; }
.social-link.is-instagram{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social-link.is-linkedin{ background:#0a66c2; }