/* Service Detail Page Styles */

body {
    background-color: #FFF9F5;
}

.service-detail-section {
    padding: 180px 0 100px;
}

.detail-tags-top {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

.tag-pill-v4 {
    background: var(--primary);
    color: white;
    padding: 14px 35px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.2s;
}

.tag-pill-v4:hover {
    transform: scale(1.05);
}

.detail-main-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
    align-items: start;
}

/* Left Column */
.detail-left-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.detail-logo-box {
    background: #F2F2F2;
    border-radius: 25px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.detail-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.detail-text-card {
    background: #FFFFFF;
    border-radius: 25px;
    padding: 40px 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
}

.detail-text-card h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 30px;
    color: #1a1a1a;
}

.detail-text-card p {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    font-weight: 500;
}

/* Right Column - Gallery Grid */
.detail-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 0.6fr;
    grid-template-rows: auto auto;
    gap: 20px;
}

.gallery-item {
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Specific Grid Mapping */
.gi-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 400px;
}

.gi-2 {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    height: 400px;
}

.gi-3 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    height: 350px;
}

.gi-4 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    height: 350px;
}

.gi-5 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    height: 350px;
}

/* Responsive */
@media (max-width: 1024px) {
    .detail-main-layout {
        grid-template-columns: 1fr;
    }

    .detail-left-col {
        order: 2;
    }

    .detail-gallery-grid {
        order: 1;
        grid-template-columns: 1fr 1fr;
    }

    .gi-1,
    .gi-2,
    .gi-3,
    .gi-4,
    .gi-5 {
        grid-column: span 1;
        height: 300px;
    }
}

@media (max-width: 768px) {
    .detail-gallery-grid {
        grid-template-columns: 1fr;
    }
}