/* ============================================================
   FILE: /assets/css/services.css
   PURPOSE: Page-specific styles for the Services page
   NOTES:
     - Matches 80% / 10% alignment used on Home
   ============================================================ */

/* ensures hero display top - no gaps */

:root {
    /* Brand colors (from your brief) */
    --color-main: #38004a;
    --color-main-dark: #2a0038;
    --color-secondary: #333333;
    --color-sub-0: #926c9e;
    --color-sub-1: #e5bdeb;
    --color-sub-2: #c4c4c4;

    /* Neutrals */
    --color-bg: #f7f5f9;
    --color-white: #ffffff;
    --color-text: #222222;
    --color-border: #dddddd;

    /* Feedback */
    --color-success: #2f855a;
    --color-warning: #b7791f;
    --color-error: #b54a4a;

    /* Layout */
    --container-width: 100%;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Spacing (4/8px scale) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --space-9: 50px;
    --space-10: 100px;
    --space-11: 200px;
}

.site-main {
    padding-top: 0 !important;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
    display: flex;
    flex-direction: row;
}
.hero-title {
    font-size: 3rem;
    width: 90%;
    margin: 0 0 var(--space-3);
    color: var(--color-white);
}


/* ============================================================
   Services Hero — Tech Icons (fade + hop sequence)
   - Visible by default (no disappearing if .is-tiles-ready not set)
   - Animates only when .hero.is-tiles-ready is present
============================================================ */

/* Hero Icon */
.hero-icon{
    width: 100px;
    /* calmer default */
    opacity: 0.75;
    /* just for hover polish if you ever want */
    transition: opacity 200ms ease;
}

.service-hero-icons {
    width: 60%;
    margin-right: 10%;
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Hide on mobile (your existing rule) */
@media (max-width: 900px){
    .hero-icon{
        display: none;
    }
    .service-hero-icons{
        display: none;
    }
}

/* Ultra-wide */
@media (min-width: 2400px){
    .hero-icon{
        width: 160px;
    }
}

/* Hero icons styles */
.hero-glow-soft {
    filter:
        drop-shadow(0 0 8px rgba(230, 156, 255, 0.45))
        drop-shadow(0 0 18px rgba(230, 156, 255, 0.35))
        drop-shadow(0 10px 28px rgba(230, 156, 255, 0.30));
}

.hero-glow-strong {
    filter:
        drop-shadow(0 0 10px rgba(230, 156, 255, 0.65))
        drop-shadow(0 0 26px rgba(230, 156, 255, 0.50))
        drop-shadow(0 0 48px rgba(230, 156, 255, 0.35))
        drop-shadow(0 12px 30px rgba(56, 0, 74, 0.45));
}

/* Animation: fade in + small hop */
@keyframes heroIconIn {
    0% {
        opacity: 0;
        transform: translateY(14px);
    }

    /* main pop — FULL visibility */
    45% {
        opacity: 1;
        transform: translateY(-10px);
    }

    /* overshoot down */
    62% {
        opacity: 1;
        transform: translateY(2px);
    }

    /* rebound up */
    78% {
        opacity: 1;
        transform: translateY(-4px);
    }

    /* settle into calm state */
    100% {
        opacity: 0.75;
        transform: translateY(0);
    }
}

/* Only hide + animate when hero is marked ready */
.hero.is-tiles-ready .service-hero-icons .hero-icon{
    opacity: 0;
    transform: translateY(12px);
    animation: heroIconIn 680ms cubic-bezier(0.2, 0.95, 0.2, 1) forwards;
}

/* Stagger the icons */
.hero.is-tiles-ready .service-hero-icons .hero-icon:nth-child(1) { animation-delay: 0.00s; }
.hero.is-tiles-ready .service-hero-icons .hero-icon:nth-child(2) { animation-delay: 0.64s; }
.hero.is-tiles-ready .service-hero-icons .hero-icon:nth-child(3) { animation-delay: 1.28s; }
.hero.is-tiles-ready .service-hero-icons .hero-icon:nth-child(4) { animation-delay: 1.92s; }
.hero.is-tiles-ready .service-hero-icons .hero-icon:nth-child(5) { animation-delay: 2.56s; }
.hero.is-tiles-ready .service-hero-icons .hero-icon:nth-child(6) { animation-delay: 3.20s; }
.hero.is-tiles-ready .service-hero-icons .hero-icon:nth-child(7) { animation-delay: 3.84s; }
.hero.is-tiles-ready .service-hero-icons .hero-icon:nth-child(8) { animation-delay: 4.48s; }

/* Reduced motion: show immediately */
@media (prefers-reduced-motion: reduce) {
    .hero.is-tiles-ready .service-hero-icons .hero-icon{
        animation: none !important;
        opacity: 0.75 !important;
        transform: none !important;
    }
}
/* Services hero END */

/* ============================================================
   Sevices Sections
   ============================================================ */
.section{
    width: 100%;
}
.services-overview{
    margin-bottom: var(--space-10);
}
.services-section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
    
}

.services-section-header {
    width: 80%;
    margin: 0 0 var(--space-5); /* only top/bottom */
    margin-left: 10%;
    text-align: center;
}
.services-section-header h2 {
    width: 100%;
    margin-bottom: var(--space-2);
    text-align: center;
}
.services-section-header p {
    text-align: center;
    width: 100%;
    padding-left: 200px;
    padding-right: 200px;
    margin: 0;
    margin-top: 50px;
    color: #555555;
}

/* Alternate background & Text*/
.section-alt {
    background-color: var(--color-main-dark-2);
    padding-top: var(--space-11);
    padding-bottom: var(--space-11);
    
}
.section-alt h3, .section-alt h2{
    color: var(--color-white);
}
.section-alt p, .section-alt .service-list{
    color: var(--color-sub-2);
}


/* What Vivid Vista Creations can help you with - cards */
/* Cards */
.card-grid {
    width: 80%;
    margin-left: 10%;
    margin-top: var(--space-10);
}
.card-outline {
    background-color: transparent;
}
.card-title {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
}
.card-body {
    font-size: 0.95rem;
    margin: 0 0 var(--space-3);
    color: #444444;
}

.card-link {
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--color-main);
}
.card-link:hover {
    text-decoration: underline;
}

.card-grid .card .card-img{
    width: 100%;
    height: auto;
    position: relative;
}
.card-img-logo{
    width: 10%;
    left: 0;
    position: absolute;
}

.card-grid .card .card-img{
    width: 100%;
    height: auto;
    position: relative;
}
.card-img-logo{
    width: 10%;
    left: 0;
    position: absolute;
}


/* Grid for cards */
.services-grid {
    width: 80%;
    margin-left: 10%;
    display: grid;
    gap: var(--space-11);


}

.services-grid-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* Service cards */
.responsive-img{
    width: 100%;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;

}

.service-card {
    width: 100%;
}
/* service cards - No Backround */
.service-card-no-bg {
    width: 100%;
    background-color: transparent;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    padding: var(--space-4);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.03);
}

.service-title {
    display:inline-flex;
    align-items: center;
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
    gap: 15px;
    
}

.service-title-row{
    display:inline-flex;
    align-items: center;
}
.services-highlight {
    margin-top: -15px;
    padding-left: 25px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-sub-0);
    /* margin-bottom: var(--space-2); */
}

.service-body {
    font-size: 0.95rem;
    margin: 0 0 var(--space-3);
    color: #444444;
}

.service-list {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-4);
    font-size: 0.95rem;
}

.service-list li + li {
    margin-top: var(--space-1);
}

.service-cta {
    margin: 0;
}

.card-link {
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--color-main);
}

.card-link:hover {
    text-decoration: underline;
}

/* service packages */
.services-packages .services-section-header{
    margin-top: var(--space-10);
    margin-bottom: var(--space-10);
}
.services-packages{
    margin-bottom: var(--space-10);
}

/* services maintenance */
.services-maintenance .services-section-header p{
    margin-bottom: var(--space-10);
}
.services-maintenance .service-title .icon-s{
    color: var(--color-white);
}



@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-packages .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-cta-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .services-cta-copy {
        max-width: 60%;
    }
}


/* ============================================================
   Included with every website project (image + text layout)
   - Desktop: image left, header + 2 cards on right
   - Mobile: image on top, then header, then cards stacked
   ============================================================ */

/* Header spans full width on top */
.services-addons .services-section-header {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: var(--space-4);
    text-align: center;
}
.services-addons .services-section-header p{
    width: 70%;
    margin-left: 15%;
}

.services-addons .wrapper {
    width: 80%;
    margin-left: 10%;
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
}

/* Left column: image */
.services-addons .wrapper > div:first-child {
    flex: 1 1 0;
}

.services-addons .wrapper > div:first-child .responsive-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Right column: header + 2 cards */
.services-addons .services-grid {
    flex: 1 1 0;
    width: 100%;          /* override global 80% */
    margin-left: 0;       /* override global 10% */
    margin-top: 100px;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}

.services-addons article{
    padding-left: 100px;
}
.services-addons .res-img{
    width: 25%;
    margin-top: 100px;
}
.services-addons .service-title .icon-s{
    color: var(--color-white);
}

.services-addons .service-list li{
    margin-top: 30px;
}
/* Mobile layout: stack everything */
@media (max-width: 768px) {
    
    .services-addons .wrapper {
        width: 90%;
        margin-left: 5%;
        flex-direction: column;
        gap: var(--space-4);
    }

    .services-addons .wrapper > div:first-child,
    .services-addons .services-grid {
        flex: 1 1 100%;
        width: 100%;
    }

    .services-addons .services-grid {
        grid-template-columns: 1fr; /* header + cards stacked */
    }
}

/* FAQ section */
.services-faq .services-section-header{
    margin-top: var(--space-10);
    margin-bottom: var(--space-10);
}
.faq-list {
    width: 80%;
    margin-left: 10%;
    max-width: 1100px;
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-9);
}

.faq-item h3 {
    font-size: 1rem;
    margin: 0 0 var(--space-1);
    display: inline-flex;
    align-items: center;
}

.faq-item p {
    margin: 0;
    font-size: 0.95rem;
    color: #444444;
}
/* FAQ hover reveal */
.faq-item {
    margin-bottom: var(--space-3);
    cursor: pointer;
}

/* hide answers by default */
.faq-item p {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.35s ease;
    margin: 0;
}

/* reveal on hover */
.faq-item:hover p {
    max-height: 400px;    /* large enough for any answer */
    opacity: 1;
    margin-top: var(--space-2);
}

/* slight hover highlight */
.faq-item h3 {
    transition: color 0.25s ease;
}

.faq-item:hover h3 {
    color: var(--color-main);
}

/* CTA band at bottom */
.services-cta-inner {
    width: 80%;
    margin-left: 10%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

.services-cta-copy h2 {
    font-size: 1.4rem;
    margin-bottom: var(--space-2);
}

.services-cta-copy p {
    margin: 0;
    font-size: 0.95rem;
}

.services-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
@media (max-width: 768px) {
    .services-section {
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
        
    }
    .services-overview, .services-packages{
        margin-bottom: 0;
    }
    /* service packages */
    .services-packages .services-section-header{
        margin-top: 0;
        margin-bottom: 0;
    }
    .services-section-header p{
        padding: 0;
    }
    .card-grid{
        width: 90%;
        margin-left: 5%;
    }
    .card-grid .card{
        width: 100%;
        padding: 0;
        margin-left: 0;
        /* margin-top: 20px; */
    }
    .card{
        width: 100%;
        padding: 0;
    }
    .card-title{
        font-size: 1.2rem;
    }
    .home-cta-copy h2{
        font-size: 1.2rem;
        width: 100%;
    }
    .home-section .cta-actions a{
        width: 100%;
    }
    .grid-3 {
        margin-top: var(--space-8);
    }

    /* services-addons */
    .services-addons .res-img{
        width: 100%;
    }
    .services-addons article{
        padding-left: 0px;
    }

    /* FAQ */
    .faq-list {
        width: 90%;
        margin-left: 5%;
    }
    .services-faq{
        padding-top: 0;
        padding-bottom: 0;
    }
}