/* ========================================================
   LumaScape — Services Page Styles
   ======================================================== */

/* Service detail cards (large) */
.svc-grid {
    display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 768px) { .svc-grid { grid-template-columns: 1fr 1fr; } }

.svc-card {
    background: var(--cream);
    border-radius: 20px; padding: 48px 40px;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 380px;
    transition: all 0.5s;
}
.svc-card:hover { background: #fff; box-shadow: 0 8px 40px rgba(0,0,0,0.04); }

.svc-card-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(228, 219, 204, 0.5);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 28px; color: rgba(28,28,28,0.5);
}
.svc-card-icon .material-symbols-outlined { font-size: 24px; font-weight: 300; }

.svc-card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px; color: var(--charcoal);
    margin-bottom: 16px; line-height: 1.2;
}
.svc-card-desc {
    font-size: 15px; color: rgba(28,28,28,0.5);
    font-weight: 300; line-height: 1.75; margin-bottom: 32px;
}
.svc-card-features {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 32px;
}
.svc-card-feature {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: rgba(28,28,28,0.55); font-weight: 300;
}
.svc-card-feature .material-symbols-outlined {
    font-size: 18px; color: var(--forest); flex-shrink: 0; margin-top: 2px;
}

.svc-card-link {
    display: inline-flex; align-items: center;
    font-size: 14px; font-weight: 500;
    color: rgba(28,28,28,0.6); transition: all 0.3s;
}
.svc-card:hover .svc-card-link { color: var(--charcoal); transform: translateX(4px); }
.svc-card-link .material-symbols-outlined { font-size: 16px; margin-left: 8px; }

/* Full-width feature card */
.svc-full {
    background: var(--charcoal); border-radius: 20px;
    padding: 64px 48px; color: #fff;
    display: flex; flex-direction: column; gap: 48px;
}
@media (min-width: 1024px) {
    .svc-full { flex-direction: row; align-items: center; gap: 96px; padding: 80px 64px; }
}
.svc-full-content { flex: 1; }
.svc-full-content h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 400; margin-bottom: 20px; line-height: 1.2;
}
.svc-full-content p {
    font-size: 15px; color: rgba(255,255,255,0.55);
    font-weight: 300; line-height: 1.75; margin-bottom: 16px;
}
.svc-full-features {
    display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 32px;
}
@media (min-width: 640px) { .svc-full-features { grid-template-columns: 1fr 1fr; } }
.svc-full-feature {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 300;
}
.svc-full-feature .material-symbols-outlined {
    font-size: 18px; color: var(--warm); flex-shrink: 0; margin-top: 2px;
}

.svc-full-img {
    flex: 0 0 auto; width: 100%; border-radius: 16px; overflow: hidden;
    aspect-ratio: 4/3; background: rgba(255,255,255,0.05);
}
@media (min-width: 1024px) { .svc-full-img { width: 400px; aspect-ratio: 3/4; } }
.svc-full-img img { width: 100%; height: 100%; object-fit: cover; }

/* Consultant note */
.consultant-note {
    display: flex; gap: 20px; align-items: flex-start;
    background: rgba(228, 219, 204, 0.35);
    border-radius: 16px; padding: 32px 36px;
    margin-top: 64px;
}
.consultant-note .material-symbols-outlined {
    font-size: 24px; color: var(--forest); flex-shrink: 0; margin-top: 2px;
}
.consultant-note-text h4 {
    font-size: 16px; font-weight: 500; color: var(--charcoal); margin-bottom: 8px;
}
.consultant-note-text p {
    font-size: 14px; color: rgba(28,28,28,0.5);
    font-weight: 300; line-height: 1.7;
}

/* Furniture gallery */
.gallery-note {
    text-align: center; max-width: 560px; margin: 0 auto;
}
.gallery-note h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 400; color: var(--charcoal);
    margin-bottom: 16px;
}
.gallery-note p {
    font-size: 15px; color: rgba(28,28,28,0.5);
    font-weight: 300; line-height: 1.7; margin-bottom: 40px;
}
.gallery-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.gallery-item {
    border-radius: 12px; overflow: hidden;
    aspect-ratio: 1/1; background: var(--bone);
}
.gallery-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.7s;
}
.gallery-item:hover img { transform: scale(1.05); }