/* AnySmart Website - About Page CSS */

/* Hero section styles are now imported from the component */

/* About Content Section */
.about-content {
    background: linear-gradient(135deg, #03a9f4 0%, #0288d1 100%);
    padding: 80px 40px;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

.about-content::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: calc(100% + 200px);
    height: calc(100% + 200px);
    background: 
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.15) 0%, transparent 50%);
    animation: rotateBackground 30s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes rotateBackground {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.about-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
    position: relative;
    z-index: 2;
}

.text-content {
    background: white;
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    height: 100%;
    position: relative;
    z-index: 2;
}

/* This was set in Termina - the display face used for headings - for six
   paragraphs of body copy, and it was the only place on the site doing that.
   Two problems. Termina is a wide geometric display cut and is tiring to read
   at length, which is what display faces are for. And the trial files this
   site carries have no apostrophe and no en dash, both of which appear in this
   very copy ("Cape Town's", "features - they set the mood"), so those
   characters were dropping to a fallback font mid-sentence. */
.text-content p {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: #2c3e50;
    line-height: 1.75;
    margin: 0 0 20px 0;
    text-align: left;
}

.text-content p:last-child {
    margin-bottom: 0;
}

.logo-content {
    background: white;
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    z-index: 2;
}

.logo-content img {
    max-width: 100%;
    height: auto;
}

/* ===========================================================================
   The About page linked nowhere. Every other page hands the reader somewhere
   to go next; this one ended on a full stop, which wastes both the visitor and
   the internal link.
   =========================================================================== */
.about-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.about-cta a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.about-cta a:first-child {
    background: var(--primary-blue, #03a9f4);
    border: 1px solid var(--primary-blue, #03a9f4);
    color: #ffffff;
}

.about-cta a:first-child:hover {
    background: var(--primary-hover, #0288d1);
    border-color: var(--primary-hover, #0288d1);
}

.about-cta a + a {
    border: 1px solid rgba(31, 38, 44, 0.2);
    color: #1f262c;
}

.about-cta a + a:hover {
    border-color: var(--primary-blue, #03a9f4);
    color: var(--primary-hover, #0288d1);
}

/* Responsive Design */
@media (max-width: 968px) {
    .about-content {
        padding: 60px 30px;
        min-height: auto;
    }

    .about-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .text-content {
        padding: 40px 30px;
        order: 2;
    }

    .logo-content {
        padding: 40px 30px;
        min-height: 400px;
        order: 1;
    }
}

@media (max-width: 768px) {
    .about-content {
        padding: 40px 20px;
    }
    
    .text-content,
    .logo-content {
        padding: 30px 20px;
    }
    
    .text-content p {
        font-size: 1rem;
        line-height: 1.7;
        margin-bottom: 16px;
    }

    .logo-content {
        min-height: 300px;
        padding: 40px 20px;
    }
}

@media (max-width: 480px) {
    .about-content {
        padding: 30px 15px;
    }

    .text-content,
    .logo-content {
        padding: 25px 20px;
        border-radius: 16px;
    }

    .text-content p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 14px;
    }

    .logo-content {
        min-height: 250px;
        padding: 30px 15px;
    }
}