/* ==========================================================
   _17-KONTAKT.CSS
   ========================================================== */

.contact-entry-content h1 {
    font-family: var(--font-display) !important;
    font-size: var(--text-3xl) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin-top: 0 !important;
    margin-bottom: clamp(40px,6vw,80px) !important;
    max-width: 1100px;
}

/* Kontakt-info */
.contact-info-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(32px,5vw,60px); margin-bottom: var(--section-y); }
.contact-info-item h3 { font-family: var(--font-mono) !important; text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--color-faint); margin-bottom: var(--sp-6); border-bottom: 1px solid var(--color-border); padding-bottom: var(--sp-3); }
.contact-info-item p, .contact-info-item address { font-family: var(--font-display) !important; font-size: 1.15rem; line-height: 1.5; font-style: normal; color: var(--color-text); margin-bottom: var(--sp-4); }
.contact-info-item a { color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-text); transition: all var(--t-base); }
.contact-info-item a:hover { color: var(--color-muted); border-bottom-color: var(--color-muted); }

/* Team */
.team-section-wrapper { margin-top: var(--section-y); margin-bottom: var(--sp-20); }
.team-heading { font-family: var(--font-display); font-size: var(--text-xl); margin-bottom: var(--sp-10); }

/* 4 + 3 layout: 4 kolumner, rad 2 centrerad */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-8);
}

/* Placera kort 5–7 explicit på rad 2, kolumn 1–3 → ger ett tomt fält till höger */
.team-card:nth-child(5) { grid-column: 1; }
.team-card:nth-child(6) { grid-column: 2; }
.team-card:nth-child(7) { grid-column: 3; }

.team-card { display: flex; flex-direction: column; }
.team-image-wrapper { width: 100%; aspect-ratio: 3/4; overflow: hidden; margin-bottom: var(--sp-5); background: #f4f4f4; }
.team-image-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(100%); transition: all var(--t-slow); }
.team-card:hover .team-image-wrapper img { filter: grayscale(0%); transform: scale(1.03); }
.team-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; line-height: 1.2; }
.team-role { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); text-transform: uppercase; margin-bottom: var(--sp-3); display: block; }
.team-email { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text); text-decoration: none; border-bottom: 1px solid transparent; transition: all var(--t-base); opacity: 0.7; word-break: break-all; }
.team-email:hover { border-bottom-color: var(--color-text); opacity: 1; }

@media (max-width: 1200px) {
    .team-grid { grid-template-columns: repeat(3, 1fr); }
    .team-card:nth-child(n) { grid-column: auto; }
}
@media (max-width: 1024px) {
    .contact-info-grid { grid-template-columns: 1fr 1fr; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .contact-entry-content h1 { font-size: 2.5rem !important; }
    .contact-info-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
    .team-image-wrapper img { filter: grayscale(0%); }
}
@media (max-width: 480px) {
    .team-grid { grid-template-columns: 1fr; gap: 50px; }
}