/* District Frame - Services template (v3 editorial)
   Scoped to .page-template-template-services */

.page-template-template-services .df-page-hero {
    padding-bottom: clamp(56px, 8vw, 110px);
}
/* Hero image matched to the project-page mockup: portrait 4:5 crop with the
   image on the wider column (text 5fr / image 6fr), instead of the default
   landscape 4:3. Scoped to /services/ only. */
.page-template-template-services .df-page-hero-grid {
    grid-template-columns: minmax(300px, 5fr) 6fr;
}
.page-template-template-services .df-page-hero-media img {
    aspect-ratio: 4 / 5;
    object-position: 50% 30%;
}
.page-template-template-services .df-sv-rows {
    padding: clamp(32px, 5vw, 64px) 0 clamp(64px, 9vw, 128px);
}

/* ============================================================
   SERVICE ROWS - number / copy / media on a hairline
   ============================================================ */
.page-template-template-services .df-sv-row {
    display: grid;
    grid-template-columns: 64px minmax(240px, 5fr) 6fr;
    gap: clamp(20px, 3.4vw, 56px);
    align-items: center;
    padding: clamp(28px, 4.4vw, 56px) 0;
}
.page-template-template-services .df-sv-num {
    color: var(--df-ink-muted);
    padding-top: 6px;
}
.page-template-template-services .df-sv-title {
    font-size: clamp(26px, 3.4vw, 42px);
    margin: 0 0 14px;
}
.page-template-template-services .df-sv-desc {
    margin: 0;
    max-width: 40ch;
    color: var(--df-ink-muted);
    font-size: 15px;
    line-height: 1.8;
}
.page-template-template-services .df-sv-more {
    margin: 18px 0 0;
}

.page-template-template-services .df-sv-media {
    position: relative;
    line-height: 0;
    overflow: hidden;
    background: var(--df-bg-card);
}
.page-template-template-services .df-sv-media video,
.page-template-template-services .df-sv-media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 22%;
    display: block;
}

/* Honest placeholder for services without real footage yet:
   the service's icon centered on the card surface. */
.page-template-template-services .df-sv-media--placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    background: var(--df-bg-card);
}
.page-template-template-services .df-sv-placeholder-icon {
    line-height: 0;
    color: var(--df-ink-muted);
    opacity: 0.55;
}
.page-template-template-services .df-sv-placeholder-icon .df-icon {
    width: clamp(40px, 5vw, 60px);
    height: clamp(40px, 5vw, 60px);
}

/* Editorial SVG thumbnail for services without real footage yet.
   The art is a self-contained 16:9 warm-paper illustration. */
.page-template-template-services .df-sv-media--art {
    aspect-ratio: 16 / 9;
    background: #e9e2d4;
}
.page-template-template-services .df-sv-media--art .df-sv-art {
    display: block;
    width: 100%;
    height: 100%;
}
/* Website Design row: the animated code editor replaces the static tile. It
   sizes to its own content (not the 16:9 media ratio), so drop the tile
   framing and let it fill the column; the editor's own border/shadow show. */
.page-template-template-services .df-sv-media--code {
    background: transparent;
    line-height: normal;
    overflow: visible;
}
/* Match the landing-page hero editor's size: same 560px cap, centered in the
   column, so the two IDEs read as the same size and this one stays contained. */
.page-template-template-services .df-sv-media--code .df-sd-code-wrap {
    max-width: 560px;
    margin: 0 auto;
}
/* Give the Website Design row the hero's copy-dominant proportion at desktop so
   the editor sits in the smaller column (like the landing hero) instead of the
   wider media column. Base grid still wins <=900px, where the row stacks. */
@media (min-width: 901px) {
    .page-template-template-services .df-sv-row--code {
        grid-template-columns: 64px minmax(240px, 6fr) minmax(320px, 5fr);
    }
}
.page-template-template-services .df-sv-media .df-project-play {
    position: absolute;
    left: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--df-hairline-dark);
    border-radius: 50%;
    background: rgba(14, 14, 14, 0.55);
    color: var(--df-paper);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.25s ease;
}
.page-template-template-services .df-sv-media .df-project-play:hover {
    background: rgba(14, 14, 14, 0.85);
}
.page-template-template-services .df-sv-media .df-media-fullscreen {
    left: auto;
    right: 16px;
}
.page-template-template-services .df-sv-media .df-media-fullscreen span {
    display: grid;
    place-items: center;
    line-height: 0;
}

/* ============================================================
   WHY DISTRICT FRAME - intro lead-in above the feature row
   ============================================================ */
.page-template-template-services .df-sv-why {
    padding-top: clamp(40px, 6vw, 72px);
    margin-top: clamp(24px, 4vw, 48px);
    max-width: 720px;
}
.page-template-template-services .df-sv-why-title {
    margin: 0 0 16px;
}
.page-template-template-services .df-sv-why-desc {
    margin: 0;
    color: var(--df-ink-muted);
    font-size: 16px;
    line-height: 1.8;
}

/* ============================================================
   FEATURE ROW - 4-up band
   ============================================================ */
.page-template-template-services .df-sv-feature-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 3vw, 40px);
    padding-top: clamp(28px, 4vw, 48px);
    margin-top: clamp(12px, 2vw, 24px);
}
.page-template-template-services .df-sv-feature-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--df-hairline);
    border-radius: 50%;
    font-size: 16px;
    margin-bottom: 16px;
}
.page-template-template-services .df-sv-feature h3 {
    font-family: var(--df-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.page-template-template-services .df-sv-feature p {
    margin: 0;
    color: var(--df-ink-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .page-template-template-services .df-sv-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .page-template-template-services .df-sv-num {
        padding-top: 0;
    }
    .page-template-template-services .df-sv-feature-row {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 560px) {
    .page-template-template-services .df-sv-feature-row {
        grid-template-columns: 1fr;
    }
}