/**
 * MiniCAD -- Services Component Styles
 *
 * Service cards, grid, animations, standalone hero + overrides.
 * Loaded on page-home.php AND page-services.php.
 *
 * @package MiniCAD
 */

/* -- Services section ------------------------------------------- */

.mc-services {
    position: relative;
    background: var(--mc-white);
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}
.mc-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(20px * var(--mc-scale));
}
.mc-services__cta {
    display: flex;
    justify-content: center;
    margin-top: calc(32px * var(--mc-scale));
}

/* Step badge (hidden by default, shown on standalone) */
.mc-svc-card__step { display: none; }

/* -- Service card ----------------------------------------------- */

.mc-svc-card {
    background: var(--mc-deep);
    border: 1px solid rgba(var(--mc-keppel-rgb), 0.14);
    border-top: 2px solid var(--mc-keppel);
    border-radius: calc(14px * var(--mc-scale)); overflow: hidden;
    display: flex; flex-direction: column; position: relative; cursor: default;
    transform: translateY(0) scale(1);
    transition: transform 0.35s var(--mc-ease), box-shadow 0.35s var(--mc-ease), border-color 0.35s ease;
}
.mc-svc-card::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%,rgba(var(--mc-keppel-rgb),0.1) 0%,transparent 65%);
    opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 1;
}
.mc-svc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(var(--mc-keppel-rgb),0.3),0 20px 50px rgba(var(--mc-deep-rgb),0.25),0 0 30px rgba(var(--mc-keppel-rgb),0.12);
    border-color: rgba(var(--mc-keppel-rgb),0.35);
}
.mc-svc-card:hover::after { opacity: 1; }

/* Card image */
.mc-svc-card__img-link {
    display: block;
    overflow: hidden;
}
.mc-svc-card__img {
    width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
    transition: transform 0.5s var(--mc-ease);
}
.mc-svc-card:hover .mc-svc-card__img { transform: scale(1.05); }

/* Placeholder */
.mc-svc-card__placeholder {
    width: 100%; aspect-ratio: 16/9;
    background: rgba(var(--mc-keppel-rgb),0.05);
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.mc-svc-card__placeholder::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(rgba(var(--mc-keppel-rgb),.05) 1px,transparent 1px),
                linear-gradient(90deg,rgba(var(--mc-keppel-rgb),.05) 1px,transparent 1px);
    background-size: 20px 20px;
}
.mc-svc-card__placeholder::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(transparent 0%, rgba(var(--mc-keppel-rgb),0.12) 50%, transparent 100%);
    transform: translateY(-100%); transition: none;
}
.mc-svc-card:hover .mc-svc-card__placeholder::after { opacity: 0.5; transform: translateY(0); transition: opacity 0.4s ease; }

.mc-svc-card__placeholder-icon {
    position: relative; z-index: 1; color: var(--mc-keppel);
    display: inline-flex;
}
.mc-svc-card:hover .mc-svc-card__placeholder-icon { animation: mc-icon-bounce 0.4s var(--mc-ease) both; }
@keyframes mc-icon-bounce { 0%{transform:scale(1)} 40%{transform:scale(1.25) translateY(-4px)} 70%{transform:scale(0.95)} 100%{transform:scale(1.1)} }

/* Card body */
.mc-svc-card__body { padding: calc(20px * var(--mc-scale)); flex: 1; display: flex; flex-direction: column; position: relative; z-index: 2; }
.mc-svc-card__title { font-family: var(--mc-font-head); font-size: var(--mc-fs-xl); font-weight: 700; color: var(--mc-light); margin-bottom: calc(8px * var(--mc-scale)); transition: color 0.25s ease; }
.mc-svc-card__title-link { color: inherit; text-decoration: none; }
.mc-svc-card:hover .mc-svc-card__title { color: var(--mc-white); }
.mc-svc-card__desc { font-size: var(--mc-fs-body); color: rgba(var(--mc-light-rgb),0.75); line-height: 1.65; flex: 1; margin-bottom: 0; transition: color 0.25s ease; }
.mc-svc-card__desc p { margin: 0; }
.mc-svc-card:hover .mc-svc-card__desc { color: rgba(var(--mc-light-rgb),0.9); }
.mc-svc-card__link { color: var(--mc-keppel); font-family: var(--mc-font-head); font-size: calc(var(--mc-fs) * 0.929); font-weight: 600; display: flex; align-items: center; justify-content: flex-end; gap: calc(6px * var(--mc-scale)); transition: color 0.2s,gap 0.25s; margin-top: calc(14px * var(--mc-scale)); }
.mc-svc-card:hover .mc-svc-card__link { color: var(--mc-fountain); gap: calc(10px * var(--mc-scale)); }
.mc-svc-card__arrow { display: inline-block; transition: transform 0.25s var(--mc-ease); }
.mc-svc-card:hover .mc-svc-card__arrow { transform: translateX(4px); }

/* -- Reduced Motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mc-svc-card:hover .mc-svc-card__placeholder-icon { animation: none; }
}

/* -- Standalone hero (page-services.php) ------------------------ */

/* Standalone-only overrides (scoped via hero sibling) */
.mc-page-hero--services ~ .mc-services .mc-services__header { display: none; }
.mc-page-hero--services ~ .mc-services {
    background: var(--mc-tint);
    padding-top: calc(var(--mc-section-y) - 20px);
    content-visibility: visible;
    overflow: visible;
}

/* Step badge — visible only on standalone (hero sibling scopes it) */
.mc-page-hero--services ~ .mc-services .mc-svc-card__step {
    display: flex; position: absolute; top: calc(14px * var(--mc-scale)); right: calc(14px * var(--mc-scale)); z-index: 5;
    width: calc(32px * var(--mc-scale)); height: calc(32px * var(--mc-scale)); border-radius: 50%;
    align-items: center; justify-content: center;
    font-family: var(--mc-font-head); font-size: calc(var(--mc-fs) * 0.786); font-weight: 800;
    color: var(--mc-keppel);
    background: rgba(var(--mc-keppel-rgb), 0.1);
    border: 1px solid rgba(var(--mc-keppel-rgb), 0.25);
    transition: all 0.3s var(--mc-ease);
}
.mc-page-hero--services ~ .mc-services .mc-svc-card:hover .mc-svc-card__step {
    background: var(--mc-keppel); color: var(--mc-deep);
    transform: scale(1.1) rotate(-8deg); border-color: var(--mc-keppel);
    box-shadow: 0 4px 14px rgba(var(--mc-keppel-rgb), 0.35);
}

/* -- Responsive ------------------------------------------------- */

@media (max-width: 1024px) {
    .mc-services__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .mc-services__grid { grid-template-columns: 1fr; }
    .mc-svc-card__img, .mc-svc-card__placeholder { aspect-ratio: 16/9; }
    .mc-services__cta { margin-top: calc(28px * var(--mc-scale)); }
    .mc-services__cta .mc-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .mc-svc-card__body {
            padding: calc(14px * var(--mc-scale));
        }
    .mc-svc-card__title { font-size: var(--mc-fs-lg); }
        .mc-svc-card__desc {
            font-size: calc(var(--mc-fs) * 0.893);
        }
    
        .mc-svc-card__link {
            font-size: calc(var(--mc-fs) * 0.857);
            margin-top: calc(10px * var(--mc-scale));
        }
    .mc-svc-card__step { width: calc(28px * var(--mc-scale)); height: calc(28px * var(--mc-scale)); font-size: var(--mc-fs-xs); top: calc(10px * var(--mc-scale)); right: calc(10px * var(--mc-scale)); }
    .mc-services__cta { margin-top: calc(20px * var(--mc-scale)); }
}

@media (max-width: 320px) {
    .mc-svc-card__body {
        padding: calc(12px * var(--mc-scale));
    }

    .mc-svc-card__title {
        font-size: var(--mc-fs-md);
    }
}