/* ============================================================
   THINKAMIGO HOME PORTAL - FULL STABLE RESTORE (v1.68)
   Covers: Branding Bar, Stone/Sand Grids, Card Engine
   Architecture: 1250px Wide Horizon | 15px Universal Rhythm
   v1.66: Branding bar flex fix. align-items: stretch on
          .branding-flex at 1024px breakpoint. Logo image
          centred via margin: 0 auto with max-width: 400px.
          Fixes logo undersizing on all tablet and mobile
          devices across all browsers.
   v1.67: Removed display: grid from .branding-flex base rule.
          grid !important was overriding the flex column layout
          in the 1024px media query, causing logo and heading
          to sit side by side instead of stacking vertically.
          All remaining !important instances removed from base
          rules to prevent similar cascade conflicts.
   v1.68: Replaced gap with margin-bottom on .hero-logotype
          in the 1080px media query. flex gap not reliably
          supported on older iOS Safari - same root cause as
          the hamburger gap fix in chassis.css v6.7.
          Breakpoint raised from 1024px to 1080px to ensure
          iPad Mini landscape is cleanly inside the override.
   ============================================================ */

/* --- 1. THE BRANDING INTRO BAR --- */
.branding-intro-bar { 
    background-color: var(--brand-blue); 
    padding: 16px 0; 
    width: 100%; 
    clear: both; 
    display: block;
}

.branding-flex { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 15px; 
    align-items: center; 
    max-width: 1250px; 
    margin: 0 auto; 
    padding: 0 0px;
    box-sizing: border-box;
}

.hero-logotype { grid-column: span 2; }
.hero-logotype img { width: 100%; height: auto; display: block; }
.hero-statement { grid-column: span 2; text-align: center; padding: 0 40px; }
.hero-action { grid-column: span 1; display: flex; justify-content: flex-end; }

.hero-statement h1, .branding-text { 
    font-family: 'Poppins', sans-serif;
    font-size: 19px; 
    line-height: 1.2; 
    color: #ffffff; 
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.pill-contact-btn { 
    display: inline-block; 
    padding: 10px 35px; 
    border: 4px solid #ffffff; 
    border-radius: 50px; 
    color: #ffffff; 
    text-decoration: none; 
    font-family: 'Poppins', sans-serif; 
    font-size: 16px; 
    font-weight: 500;
    background-color: transparent;
    transition: background-color 0.4s ease;
    white-space: nowrap;
}

.pill-contact-btn:hover { 
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* --- 2. THE DUAL GRID WRAPPERS (UNIVERSAL 15PX RHYTHM) --- */
.hero-full-width-wrapper { 
    background-color: #f5f5ef; 
    /* 15px top to branding | 15px bottom to Story grid */
    padding: 15px 0; 
    width: 100%; 
    clear: both; 
}

.blog-full-width-wrapper { 
    background-color: #f1ebe7; 
    /* SYNCED: 15px top from Feature grid | 15px bottom to Awards */
    padding: 15px 0; 
    width: 100%; 
    clear: both; 
}

.home-hero-grid, .blog-grid { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 15px; 
    max-width: 1250px; 
    margin: 0 auto; 
    padding: 0; 
    box-sizing: border-box;
    align-items: stretch;
}

/* --- 3. THE CARD ENGINE (ALIGNED & STATIC) --- */
.home-hero-grid a, .blog-grid a { 
    display: flex; 
    flex-direction: column; 
    background: #ffffff; 
    text-decoration: none; 
    color: inherit; 
    height: 100%; 
    border-radius: 4px; 
    overflow: hidden;
}

.featured-card img, .service-card img, .blog-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.card-content { 
    padding: 15px; 
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

/* --- 4. SPECIFIC CARD TYPOGRAPHY --- */
.featured-card .card-content h2 { font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 500; color: var(--brand-blue); margin: 0 0 10px 0; }
.featured-card .card-content h3 { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 300; margin: 0 0 15px 0; color: #333; }
.featured-card .card-content p { font-family: 'Poppins', sans-serif; font-size: 16px; margin: 0 0 15px 0; color: #333; line-height: 1.5; }

.service-card h3, .blog-card h3 { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 600; margin: 0 0 10px 0; color: var(--brand-blue); }
.service-card p, .blog-card p { font-family: 'Poppins', sans-serif; font-size: 16px; margin: 0 0 15px 0; color: #333; line-height: 1.4; }

/* --- 5. GRID SPAN LOCKS --- */
.featured-card { 
    grid-column: span 2; 
    grid-row: span 2; 
}

/* --- 6. AWARDS PANEL (15PX SYNC) --- */
.awards-full-width-wrapper { 
    background-color: #f5f5ef; 
    padding: 60px 0;
    width: 100%; 
    clear: both; 
}

.awards-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px; 
    max-width: 1150px; 
    margin: 0 auto; 
    padding: 0 20px; 
    align-items: center; 
    justify-items: center; 
}

.award-item img { width: 100%; max-width: 180px; height: auto; display: block; opacity: 0.5; }

/* --- 7. BACK TO TOP / SCROLL UI --- */
.scroll-up, #back-to-top, .back-to-top, .scroll-to-top {
    position: fixed;
    right: 10px;
    bottom: 200px;
    z-index: 9999;
}

/* --- 8. RESPONSIVE BREAKPOINTS --- */
@media (max-width: 1280px) {
    .home-hero-grid, .blog-grid { padding: 0 20px; }
}

@media (max-width: 1080px) {
    .branding-intro-bar { padding: 30px 0; }
    .branding-flex { 
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0 20px; 
    }
    .hero-logotype { 
        width: 100%;
        margin-bottom: 20px;
    }
    .hero-logotype img {
        margin: 0 auto;
        max-width: 600px;
    }
    .hero-statement h1, .branding-text { white-space: normal; font-size: 18px; text-align: center; }
    .hero-action { display: none; }

    /* MOBILE SYNC: Consistent 15px vertical spacing */
    .hero-full-width-wrapper { padding: 15px 0; }
    .blog-full-width-wrapper { padding: 15px 0; }

    .home-hero-grid, .blog-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; 
        padding: 0; 
    }
    .featured-card { grid-column: span 2; }
    .awards-grid { grid-template-columns: repeat(4, 1fr); gap: 15px; }

    .scroll-up, #back-to-top, .back-to-top, .scroll-to-top { right: 5px; }
}

@media (max-width: 600px) {
    .home-hero-grid, .blog-grid { grid-template-columns: 1fr; }
    .featured-card { grid-column: span 1; }
    .awards-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}