/* ==========================================================================
   webbygg.no — style gallery index (temaer.html)
   --------------------------------------------------------------------------
   C-108: a small, light index page that links the three complete sites.
   Each card is dressed in the style it points to, so the gallery legitimately
   carries all three recipes (this is the ONE page allowed to).
   ========================================================================== */

:root {
    --base: #fcfbf8;
    --surface: #ffffff;
    --ink: #1f1d1a;
    --muted: #55504a;
    --line: #e2ddd2;
    --accent-deep: #6b5a3e;
    --shadow: 0 1px 2px rgba(31,29,26,0.05);

    --tech-base: #f8fafc;
    --tech-ink: #0f172a;
    --tech-accent: #0f5f59;
    --tech-display: "Space Grotesk", Helvetica, Arial, sans-serif;

    --kraft-base: #f5efe2;
    --kraft-ink: #23201b;
    --kraft-accent: #8f4021;
    --kraft-display: "Fraunces", Georgia, serif;

    --klasse-base: #faf7f0;
    --klasse-ink: #1e3a5f;
    --klasse-accent: #7a5c22;
    --klasse-display: "Playfair Display", Georgia, serif;
}

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

body {
    margin: 0;
    background: var(--base);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

.container { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 1.35rem; }

h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.9rem; font-weight: 700; }
h2 { font-size: 1.4rem; font-weight: 700; }
p { margin: 0.7rem 0 0; }
.lede { font-size: 1.08rem; color: var(--muted); max-width: 44rem; }
.small { font-size: 0.9rem; color: var(--muted); }

section { padding: 3.5rem 0; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--accent-deep); color: var(--surface);
    padding: 0.7rem 1.1rem; border-radius: 8px; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

header { background: var(--surface); border-bottom: 1px solid var(--line); }
.bar {
    padding: 1.2rem 1.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.wordmark { font-weight: 700; letter-spacing: -0.01em; }
/* C-148: panel round 270 — temaer has no hero, so the header carries the
   only above-the-fold contact point. */
.bar-phone { margin: 0; font-size: 0.95rem; color: var(--muted); }
.bar-phone a {
    color: var(--accent-deep);
    font-weight: 600;
    text-decoration: none;
    padding: 0.2rem 0;
}
.bar-phone a:hover, .bar-phone a:focus { text-decoration: underline; }

/* --- the three cards, each dressed as the site it links to ----------- */
.style-grid { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.4rem; }
.style-card {
    display: block; text-decoration: none; color: inherit;
    border: 1px solid var(--line); border-radius: 10px;
    box-shadow: var(--shadow); padding: 1.6rem 1.5rem;
}
.style-card:hover, .style-card:focus { border-color: var(--muted); }
.style-card h2 { margin-bottom: 0.2rem; }
.style-name { display: block; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; }
.style-note { display: block; margin-top: 0.6rem; color: var(--muted); font-size: 0.98rem; }
.style-go { display: inline-block; margin-top: 1.2rem; font-size: 0.92rem; font-weight: 600; }
.swatches { display: flex; gap: 0.4rem; margin-top: 1.2rem; }
.swatch { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(31,29,26,0.12); }

.style-card--tech { background: var(--tech-base); color: var(--tech-ink); }
.style-card--tech h2 { font-family: var(--tech-display); }
.style-card--tech .style-name, .style-card--tech .style-go { color: var(--tech-accent); font-family: var(--tech-display); }

.style-card--handverk { background: var(--kraft-base); color: var(--kraft-ink); border-radius: 14px; }
.style-card--handverk h2 { font-family: var(--kraft-display); }
.style-card--handverk .style-name, .style-card--handverk .style-go { color: var(--kraft-accent); font-family: var(--kraft-display); font-style: italic; }

.style-card--klasse { background: var(--klasse-base); color: var(--klasse-ink); border-radius: 4px; }
.style-card--klasse h2 { font-family: var(--klasse-display); }
.style-card--klasse .style-name, .style-card--klasse .style-go { color: var(--klasse-accent); font-family: Georgia, serif; }

/* --- footer CTA (placeholders only) ---------------------------------- */
footer { background: var(--surface); border-top: 1px solid var(--line); padding: 2.8rem 0; }
footer p { color: var(--muted); font-size: 0.92rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.2rem; }
.cta-primary {
    display: inline-block; font-weight: 600; color: var(--surface);
    background: var(--accent-deep); border: 1px solid var(--accent-deep);
    border-radius: 8px; padding: 0.75rem 1.25rem;
}
.cta-secondary {
    display: inline-block; font-weight: 600; color: var(--accent-deep);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 8px; padding: 0.75rem 1.25rem;
}

@media (min-width: 800px) {
    h1 { font-size: 2.5rem; }
    .style-grid { grid-template-columns: repeat(3, 1fr); }
    section { padding: 4.5rem 0; }
}