/* =============================================================
   s3gc-mobile.css — Site-wide mobile responsive overrides
   s3gc.co.uk — loaded on: index.php, about-us.php, services.php, contact.php
   Bootstrap 3 XS breakpoint: < 768px
   ============================================================= */

/* ================================================================
   < 768px  (phones and small tablets in portrait)
   ================================================================ */
@media (max-width: 767px) {

    /* ---- HOMEPAGE: Hero ---- */
    .s3-hero                            { padding: 56px 0 40px; }
    .s3-hero h1                         { font-size: 28px; }
    .s3-hero p.lead                     { font-size: 15px; margin-bottom: 24px; }
    .s3-hero .badge-tag                 { font-size: 11px; padding: 5px 14px; }
    .s3-hero .hero-actions              { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .s3-hero .hero-actions a            { width: 100%; max-width: 264px; margin: 0; text-align: center; box-sizing: border-box; }

    /* ---- HOMEPAGE: Stats bar ---- */
    .s3-stats                           { padding: 20px 0; }
    .s3-stats .stat-number              { font-size: 26px; }
    .s3-stats .stat-label               { font-size: 10px; letter-spacing: 0.5px; }

    /* ---- SHARED: Main section padding ---- */
    .s3-section,
    .s3-about-section,
    .s3-why                             { padding: 48px 0; }

    /* ---- SHARED: Section titles ---- */
    .s3-section-title                   { margin-bottom: 32px; }
    .s3-section-title h2                { font-size: 24px; }
    .s3-section-title p                 { font-size: 14px; }

    /* ---- SHARED: Tech strip ---- */
    .s3-tech                            { padding: 40px 0; }

    /* ---- HOMEPAGE: CTA strip ---- */
    .s3-cta                             { padding: 48px 0; }
    .s3-cta h2                          { font-size: 22px; }
    .s3-cta p                           { font-size: 14px; margin-bottom: 20px; }
    .s3-cta .btn-cta,
    .s3-cta .btn-cta-outline            { display: block; max-width: 264px; margin: 6px auto; text-align: center; }

    /* ---- HOMEPAGE: Service cards ---- */
    .s3-services .service-card          { padding: 22px 18px; }

    /* ---- HOMEPAGE: Engagement cards ---- */
    .s3-engage .engage-card             { margin-bottom: 16px; }

    /* ---- ABOUT: Stats bar ---- */
    .s3-about-stats                     { padding: 20px 0; }
    .s3-about-stats .stat-number        { font-size: 26px; }
    .s3-about-stats .stat-label         { font-size: 10px; letter-spacing: 0.5px; }

    /* ---- ABOUT: Headings ---- */
    .s3-about-title h2                  { font-size: 22px; }
    .s3-about-title p                   { font-size: 14px; }

    /* ---- ABOUT: Story visual sidebar — duplicate info, hidden on mobile ---- */
    .s3-story-visual                    { display: none; }

    /* ---- ABOUT: CTA strip ---- */
    .s3-about-cta                       { padding: 48px 0; }
    .s3-about-cta h2                    { font-size: 22px; }
    .s3-about-cta p                     { font-size: 14px; margin-bottom: 20px; }
    .s3-about-cta .btn-cta,
    .s3-about-cta .btn-cta-outline      { display: block; max-width: 264px; margin: 6px auto; text-align: center; }

    /* ---- SERVICES: Page header ---- */
    .s3-page-header                     { padding: 48px 0 36px; }
    .s3-page-header h1                  { font-size: 24px; }
    .s3-page-header p                   { font-size: 14px; }

    /* ---- SERVICES: Content blocks ---- */
    .s3-svc-block h2                    { font-size: 22px; }
    .svc-lead                           { font-size: 15px; }

    /* ---- SERVICES: Tech panel — hide badge cloud, keep headline stat ---- */
    .s3-svc-panel                       { padding: 20px 20px; }
    .s3-tech-tags                       { display: none; }
    .panel-stat                         { padding-top: 0; border-top: none; margin-top: 0; }

    /* ---- SERVICES: CTA strip ---- */
    .s3-svc-cta                         { padding: 48px 0; }
    .s3-svc-cta h2                      { font-size: 22px; }
    .s3-svc-cta p                       { font-size: 14px; margin-bottom: 20px; }
    .btn-cta-white,
    .btn-cta-outline-white              { display: block; max-width: 264px; margin: 6px auto; text-align: center; }

    /* ---- CONTACT: Reduce hero & main padding ---- */
    .s3-contact-hero                    { padding: 48px 0 36px; }
    .s3-contact-main                    { padding: 40px 0 48px; }

}

/* ================================================================
   < 480px  (small phones — iPhone SE etc.)
   ================================================================ */
@media (max-width: 479px) {
    .s3-hero h1                         { font-size: 24px; }
    .s3-hero .badge-tag                 { font-size: 10px; padding: 4px 12px; }
    .s3-stats .stat-number,
    .s3-about-stats .stat-number        { font-size: 22px; }
    .s3-page-header h1                  { font-size: 22px; }
    .s3-contact-hero h1                 { font-size: 1.7rem; }
    .s3-section-title h2                { font-size: 20px; }
    .s3-svc-block h2                    { font-size: 20px; }
    .s3-about-title h2                  { font-size: 20px; }
    .s3-cta h2,
    .s3-about-cta h2,
    .s3-svc-cta h2                      { font-size: 20px; }
}