/* AnySmart Website - Home Page CSS */
/* Modern Material Design Style */

/* The Roboto @import that was here is gone. It was a render-blocking
   request to a third party, chained behind this stylesheet - the browser
   had to fetch this file, parse it, then fetch Google's CSS, then fetch
   the font - to load a fourth typeface onto a site that already ships
   Termina for headings and Montserrat for everything else. */

/* Palette lives in Shared/assets/css/theme.css, which loads last.
   It used to be duplicated here and in the other page stylesheet. */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Montserrat, matching every other page. This said 'Roboto', which only ever
   half-applied: style.css already puts p, span and div on Montserrat, so the
   home page was loading two typefaces and using each for part of itself. */
body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--white);
    background-color: #ffffff;
    color: var(--dark-gray);
    overflow-x: hidden;
}

/* Hero Section */
.hero-section {
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* WASH. Was a flat 35% of brand blue over the photograph, which left the
       white hero text at 3.8:1 on average and 2.4:1 against the bright sky
       and the sunlit face of Table Mountain - under the 4.5:1 that the
       tagline needs at its size. Deepened and given a vertical fall so the
       text band is the darkest part of the frame. Measured against the actual
       photograph, the area the type occupies now sits at 10.2:1 average and
       6.9:1 at its worst.

       FORMAT. WebP first with the JPEG behind it for anything that cannot
       read it; the JPEG itself was re-encoded from 652KB to 249KB with no
       visible loss at this scale. A phone gets the 1000px cut instead - see
       the media query at the end of this rule. */
    /* Declared twice on purpose. A browser that does not understand image-set()
       throws the whole second declaration away as invalid and keeps the first,
       so it gets the JPEG rather than no hero at all. */
    background-image:
        linear-gradient(180deg, rgba(2, 110, 170, 0.55) 0%, rgba(3, 52, 92, 0.72) 100%),
        url('../Shared/assets/images/CPT_BG.jpg');
    background-image:
        linear-gradient(180deg, rgba(2, 110, 170, 0.55) 0%, rgba(3, 52, 92, 0.72) 100%),
        image-set(url('../Shared/assets/images/CPT_BG.webp') type('image/webp'),
                  url('../Shared/assets/images/CPT_BG.jpg')  type('image/jpeg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    /* Symmetric, so that `align-items: center` actually centres.

       This was `5rem 0 0.5rem 0` - 80px of padding at the top against 8px at
       the bottom - which is the shape you write when a fixed header is
       overlapping the top of the hero and you need to push the text clear of
       it. The header is `position: relative` on every page except contact, so
       it takes its own space in the flow and none of that was needed. The
       result was 155px of photograph above the title and about 55px below it:
       the pair sat low in the band on all three heroes. */
    padding: 3rem 0;
}

/* A soft scrim under the type rather than a flat 3% black over the whole
   frame, which is what this used to be and which did nothing measurable. It
   is strongest behind the heading and gone by the edges, so the photograph
   keeps its light. */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 65% at 50% 55%,
                                rgba(4, 20, 38, 0.35) 0%,
                                rgba(4, 20, 38, 0) 100%);
}

/* Phones get a 1000px-wide cut of the hero: 39KB rather than 174KB, for a
   band that is never more than a few hundred pixels tall. */
@media (max-width: 768px) {
    .hero-section {
        background-image:
            linear-gradient(180deg, rgba(2, 110, 170, 0.55) 0%, rgba(3, 52, 92, 0.72) 100%),
            url('../Shared/assets/images/CPT_BG-sm.jpg');
        background-image:
            linear-gradient(180deg, rgba(2, 110, 170, 0.55) 0%, rgba(3, 52, 92, 0.72) 100%),
            image-set(url('../Shared/assets/images/CPT_BG-sm.webp') type('image/webp'),
                      url('../Shared/assets/images/CPT_BG-sm.jpg')  type('image/jpeg'));
    }
}

.hero-container {
    text-align: center;
    z-index: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Smaller than the other pages' heroes on purpose: this h1 is now the phrase
   "Aluminium Windows & Doors" rather than the single word "AnySmart", and at
   the old clamp it ran to three lines and pushed the page down. */
.company-name {
    font-size: clamp(2.1rem, 5.2vw, 4rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1.5rem;
    letter-spacing: -2px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* 300 weight, uppercase, letter-spaced and held at 95% opacity over a
   photograph was the worst combination available for legibility. Full white
   at 500 costs nothing visually and reads at a glance. */
.tagline {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

/* Services Section */
.services-section {
    padding: 4rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Main Panels Grid - Top 2 Large Panels */
.main-panels-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

/* Secondary Panels Grid - Bottom Smaller Panels.
   Four cards, four columns: the aluminium range is fixed at four secondary
   products, and a three-column grid would leave one stranded on its own row. */
.secondary-panels-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Service Card Base Styles */
.service-card {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px var(--shadow-hover);
}

/* Main Card Styles */
.main-card {
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 350px;
}

.card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0288d1 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    box-shadow: 0 6px 12px rgba(3, 169, 244, 0.3);
}

.card-icon .material-icons {
    font-size: 40px;
    color: var(--white);
}

.card-title {
    font-size: 2rem;
    font-weight: 500;
    color: var(--dark-gray);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.card-description {
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--dark-gray);
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 2rem;
}

.card-action {
    width: 48px;
    height: 48px;
    background: var(--light-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    align-self: flex-end;
}

.service-card:hover .card-action {
    background: var(--primary-blue);
    transform: translateX(8px);
}

.card-action .material-icons {
    font-size: 24px;
    color: var(--dark-gray);
    transition: color 0.3s ease;
}

.service-card:hover .card-action .material-icons {
    color: var(--white);
}

/* Secondary Card Styles */
.secondary-card {
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 220px;
    background: var(--light-gray);
}

.secondary-card:hover {
    background: var(--white);
}

.card-icon-small {
    width: 56px;
    height: 56px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 8px var(--shadow);
    transition: all 0.3s ease;
}

.secondary-card:hover .card-icon-small {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0288d1 100%);
}

.card-icon-small .material-icons {
    font-size: 28px;
    color: var(--primary-blue);
    transition: color 0.3s ease;
}

.secondary-card:hover .card-icon-small .material-icons {
    color: var(--white);
}

.card-title-small {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--dark-gray);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.card-description-small {
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--dark-gray);
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .secondary-panels-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 0;
        overflow-x: hidden;
        width: 100%;
    }

    .hero-section {
        max-height: 25vh;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-container {
        padding: 1rem 1rem;
        width: 100%;
    }

    .company-name {
        font-size: clamp(2rem, 8vw, 3rem);
        letter-spacing: -1px;
        padding-top: 5rem;
    }

    .tagline {
        font-size: clamp(0.9rem, 3vw, 1rem);
        letter-spacing: 1px;
        margin-top: -0.5rem;
    }

    .services-section {
        padding: 2rem 1.5rem;
        margin: 0;
        max-width: 100%;
    }

    .services-container {
        gap: 1.5rem;
    }

    .main-panels-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .secondary-panels-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .main-card {
        padding: 2rem 1.5rem;
        min-height: auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .secondary-card {
        padding: 1.5rem 1.25rem;
        min-height: auto;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: 1rem;
        row-gap: 0.5rem;
        align-items: start;
    }

    .card-icon-small {
        grid-row: 1 / 3;
        grid-column: 1;
        margin-bottom: 0;
        flex-shrink: 0;
        align-self: center;
    }

    .card-title-small {
        grid-row: 1;
        grid-column: 2;
    }

    .card-description-small {
        grid-row: 2;
        grid-column: 2;
    }

    .secondary-card-content {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .card-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 1.5rem;
    }

    .card-icon .material-icons {
        font-size: 32px;
    }

    .card-title {
        font-size: 1.5rem;
    }

    .card-description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .card-action {
        width: 44px;
        height: 44px;
    }

    .card-action .material-icons {
        font-size: 22px;
    }

    .card-icon-small {
        width: 48px;
        height: 48px;
    }

    .card-icon-small .material-icons {
        font-size: 24px;
    }

    .card-title-small {
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
    }

    .card-description-small {
        font-size: 0.9rem;
    }

    /* Adjust card hover effects for mobile */
    .service-card:hover {
        transform: translateY(-4px);
    }
}

@media (max-width: 480px) {
    .hero-section {
        min-height: 18vh;
        max-height: 22vh;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-container {
        padding: 0.5rem 1rem;
    }

    .company-name {
        font-size: 2rem;
        letter-spacing: 0;
        margin-bottom: 1rem;
        padding-top: 8rem;
    }

    .tagline {
        font-size: 0.85rem;
        letter-spacing: 0.5px;
        margin-top: -0.75rem;
    }

    .services-section {
        padding: 1.5rem 1.25rem;
        margin: 0;
        max-width: 100%;
    }

    .main-card,
    .secondary-card {
        padding: 1.5rem 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.1);
    }

    .secondary-card {
        column-gap: 0.875rem;
        row-gap: 0.4rem;
    }

    .card-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 1rem;
    }

    .card-icon .material-icons {
        font-size: 28px;
    }

    .card-title {
        font-size: 1.3rem;
        margin-bottom: 0.75rem;
    }

    .card-description {
        font-size: 0.95rem;
    }

    .card-icon-small {
        width: 44px;
        height: 44px;
    }

    .card-icon-small .material-icons {
        font-size: 22px;
    }

    .card-title-small {
        font-size: 1.05rem;
        margin-bottom: 0.4rem;
    }

    .card-description-small {
        font-size: 0.85rem;
    }
}

/* Animation on Page Load */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-card {
    animation: fadeInUp 0.6s ease-out backwards;
}

.main-card:nth-child(1) {
    animation-delay: 0.1s;
}

.main-card:nth-child(2) {
    animation-delay: 0.2s;
}

.secondary-card:nth-child(1) {
    animation-delay: 0.3s;
}

.secondary-card:nth-child(2) {
    animation-delay: 0.4s;
}

.secondary-card:nth-child(3) {
    animation-delay: 0.5s;
}

.secondary-card:nth-child(4) {
    animation-delay: 0.6s;
}


/* ---------------------------------------------------------------------------
   Intro block and calls to action.
   Added when the home page stopped being a menu of eight trades and became a
   statement of the one thing this business does.
   --------------------------------------------------------------------------- */
.intro-block {
    max-width: 800px;
    margin: 0 auto 1rem;
    text-align: center;
}

.intro-block h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 600;
    color: var(--dark-gray);
    margin: 0 0 0.75rem;
}

.intro-block p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--dark-gray);
    margin: 0;
}

.home-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.home-cta-link {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    border-radius: 6px;
    background: var(--primary-blue);
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}

.home-cta-link:hover,
.home-cta-link:focus {
    background: #0288d1;
    transform: translateY(-2px);
}

.home-cta-secondary {
    background: transparent;
    color: var(--primary-blue);
    box-shadow: inset 0 0 0 2px var(--primary-blue);
}

.home-cta-secondary:hover,
.home-cta-secondary:focus {
    background: var(--primary-blue);
    color: var(--white);
}

@media (max-width: 768px) {
    .home-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .home-cta-link {
        text-align: center;
    }
}