/**
 * MOBILE-OVERRIDE.CSS
 *
 * Aggressive mobile-first optimizations for maximum content density
 * and horizontal layouts. Target: max-width 768px
 *
 * Key goals:
 * - Minimize vertical scrolling
 * - Horizontal layouts everywhere
 * - Compact card designs (100-150px max height)
 * - Ultra-dense content presentation
 */

/* =============================================================================
   MOBILE-ONLY MEDIA QUERY (max-width: 768px)
   ============================================================================= */

@media (max-width: 768px) {

  /* ---------------------------------------------------------------------------
     GLOBAL OVERRIDES - Aggressive spacing reduction
     --------------------------------------------------------------------------- */

  /* Reset all default padding/margins to ultra-compact */
  .section-padding,
  section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .container-custom,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Improved readable typography */
  h1, .text-3xl, .text-4xl, .text-5xl, .text-6xl {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  h2, .text-2xl {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  h3, .text-xl {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  p, .text-base, .text-lg {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
  }

  .text-sm {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
  }

  .text-xs {
    font-size: 0.6875rem !important;
    line-height: 1.3 !important;
  }

  /* Compact spacing utilities */
  .mb-16, .mb-12 {
    margin-bottom: 1rem !important;
  }

  .mb-8, .mb-6 {
    margin-bottom: 0.5rem !important;
  }

  .py-20, .py-16 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-8, .py-6 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  .p-8, .p-6 {
    padding: 0.75rem !important;
  }

  /* ---------------------------------------------------------------------------
     HEADER - Ultra-compact
     --------------------------------------------------------------------------- */

  header .h-16,
  header .h-20,
  header .lg\:h-20 {
    height: 3rem !important;
  }

  header .text-xl,
  header .text-2xl,
  header .lg\:text-2xl {
    font-size: 0.875rem !important;
  }

  header .w-8,
  header .w-10,
  header .lg\:w-10 {
    width: 1.5rem !important;
  }

  header .h-8,
  header .h-10,
  header .lg\:h-10 {
    height: 1.5rem !important;
  }

  header .px-4,
  header .px-6,
  header .lg\:px-6 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  header .py-2,
  header .py-3,
  header .lg\:py-3 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* ---------------------------------------------------------------------------
     HERO SECTION - Full Screen Mobile Layout
     --------------------------------------------------------------------------- */

  /* Make hero section full screen on mobile */
  section.relative.h-screen {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
  }

  /* Convert grid to vertical layout for mobile full screen */
  section.relative.h-screen .grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr auto 1fr !important;
    height: 100% !important;
  }

  /* Top image */
  section.relative.h-screen .grid > div:nth-child(1) {
    width: 100% !important;
    order: 1 !important;
    grid-row: 1 !important;
  }

  /* Center text - centered in middle */
  section.relative.h-screen .grid > div:nth-child(2) {
    width: 100% !important;
    order: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem 1.5rem !important;
    background: white !important;
  }

  /* Bottom image */
  section.relative.h-screen .grid > div:nth-child(3) {
    width: 100% !important;
    order: 3 !important;
    grid-row: 3 !important;
  }

  /* Hero text - larger for full screen */
  section.relative.h-screen h1 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
  }

  section.relative.h-screen h1 span {
    font-size: 1.75rem !important;
    display: block !important;
  }

  section.relative.h-screen p {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
  }

  section.relative.h-screen p span {
    display: block !important;
  }

  /* Remove ALL animations in FV for performance and visibility */
  section.relative.h-screen * {
    animation: none !important;
    animation-delay: 0s !important;
    opacity: 1 !important;
    transform: none !important;
  }

  section.relative.h-screen .mb-16,
  section.relative.h-screen .fade-in-left,
  section.relative.h-screen .fade-in-right {
    margin-bottom: 0.5rem !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  section.relative.h-screen .mb-12 {
    margin-bottom: 0.25rem !important;
  }

  /* Hide unnecessary decorative elements */
  section.relative.h-screen img[src*="underline"] {
    display: none !important;
  }

  section.relative.h-screen .text-stroke {
    -webkit-text-stroke: 0 !important;
    -webkit-text-fill-color: #1e3a5f !important;
  }

  /* ---------------------------------------------------------------------------
     SERVICE CARDS - Full Screen Cards on Mobile (Like Original)
     --------------------------------------------------------------------------- */

  #services {
    min-height: auto !important;
    padding: 0 !important;
  }

  /* Keep original grid layout for mobile - full screen cards */
  #services .services-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  /* Service items as full screen cards on mobile */
  .service-item {
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Keep original image styling */
  .service-item > div:first-child {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
  }

  .service-item img,
  .service-item picture {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Keep original overlay effects */
  .service-item .service-overlay {
    opacity: 1 !important;
  }

  /* Service card content - full overlay style */
  .service-item > div:last-child {
    position: relative !important;
    padding: 2rem !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: transparent !important;
    z-index: 2 !important;
  }

  /* Service number and line */
  .service-item .pt-20,
  .service-item .pt-24 {
    display: block !important;
    padding-top: 3rem !important;
  }

  .service-item .flex.items-center.mb-8 {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 1.5rem !important;
  }

  .service-item .text-5xl,
  .service-item .text-6xl {
    display: inline-block !important;
    font-size: 2.5rem !important;
    font-weight: 100 !important;
    opacity: 0.5 !important;
  }

  .service-item .h-px {
    display: block !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    flex: 1 !important;
    margin-left: 1.5rem !important;
  }

  /* Service card text - larger for full screen */
  .service-item h3 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    color: white !important;
    line-height: 1.2 !important;
  }

  .service-item h3 br {
    display: block !important;
  }

  .service-item h3 span {
    font-size: 1.5rem !important;
    display: block !important;
    margin-left: 0 !important;
    font-weight: 400 !important;
  }

  .service-item p {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.5 !important;
    display: block !important;
    -webkit-line-clamp: none !important;
    max-width: none !important;
  }

  .service-item .space-y-3 {
    display: block !important;
    margin-bottom: 2rem !important;
  }

  .service-item .space-y-3 > div {
    margin-bottom: 0.75rem !important;
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }

  /* CTA link */
  .service-item a[href="#contact"] {
    display: inline-flex !important;
    align-items: center !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.875rem !important;
  }

  .service-item a[href="#contact"] svg {
    display: inline-block !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    margin-left: 0.75rem !important;
  }

  /* Section title - hide on mobile for full immersion */
  #services .absolute.top-12 {
    display: none !important;
  }

  /* ---------------------------------------------------------------------------
     PARTNERS SECTION - Ultra Compact
     --------------------------------------------------------------------------- */

  #partners {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  #partners .h-20 {
    height: 3rem !important;
  }

  #partners .w-48 {
    width: 8rem !important;
  }

  #partners .text-2xl {
    font-size: 0.75rem !important;
  }

  #partners .space-x-12 {
    gap: 0.5rem !important;
  }

  /* ---------------------------------------------------------------------------
     BLOG SECTION - Tiny Horizontal Cards
     --------------------------------------------------------------------------- */

  #blog-press {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Blog articles as tiny horizontal cards */
  #blog-press article {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
    padding-bottom: 0.5rem !important;
    height: 70px !important;
    max-height: 70px !important;
  }

  /* Blog thumbnail ultra-small */
  #blog-press article > div:first-child {
    width: 60px !important;
    height: 50px !important;
    flex-shrink: 0 !important;
  }

  /* Blog content readable */
  #blog-press article h3 {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.125rem !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  #blog-press article p {
    display: none !important;
  }

  #blog-press article .flex.items-center.gap-3 {
    gap: 0.25rem !important;
    margin-bottom: 0.125rem !important;
  }

  #blog-press article .px-3 {
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 0.5rem !important;
  }

  #blog-press article time {
    font-size: 0.5rem !important;
  }

  #blog-press article a.inline-flex {
    font-size: 0.5625rem !important;
  }

  /* ---------------------------------------------------------------------------
     COMPANY SECTION - Compact Table
     --------------------------------------------------------------------------- */

  #company {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Make company table horizontally scrollable */
  #company .bg-gray-50 {
    padding: 0.75rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #company table {
    font-size: 0.875rem !important;
    min-width: 400px !important;
  }

  #company th {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    padding-right: 0.625rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }

  #company td {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    font-size: 0.75rem !important;
  }

  /* ---------------------------------------------------------------------------
     CEO SECTION - Clean mobile layout for #greeting
     --------------------------------------------------------------------------- */

  #greeting {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Card padding on mobile */
  #greeting .p-6,
  #greeting .p-8,
  #greeting .lg\:p-10,
  #greeting .lg\:p-12 {
    padding: 1rem !important;
  }

  /* Keep quote icon visible */
  #greeting blockquote svg {
    display: inline-block !important;
  }

  /* ---------------------------------------------------------------------------
     CONTACT FORM - Compact
     --------------------------------------------------------------------------- */

  #contact {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  #contact .p-6,
  #contact .lg\:p-8 {
    padding: 0.75rem !important;
  }

  #contact input,
  #contact textarea {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }

  #contact label {
    font-size: 0.75rem !important;
  }

  #contact button[type="submit"] {
    padding: 0.625rem 1.75rem !important;
    font-size: 1rem !important;
  }

  /* Contact form grid compact */
  #contact .gap-4 {
    gap: 0.5rem !important;
  }

  #contact .space-y-5 {
    gap: 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #contact .text-3xl {
    font-size: 1.75rem !important;
  }

  /* ---------------------------------------------------------------------------
     FOOTER - Minimal
     --------------------------------------------------------------------------- */

  footer {
    padding-top: 1rem !important;
    padding-bottom: 4rem !important; /* Space for fixed CTA */
  }

  footer .gap-x-8 {
    gap: 0.5rem !important;
  }

  footer .text-sm {
    font-size: 0.75rem !important;
  }

  footer .text-xs {
    font-size: 0.6875rem !important;
  }

  /* ---------------------------------------------------------------------------
     FIXED ELEMENTS
     --------------------------------------------------------------------------- */

  /* Fixed CTA button more compact */
  .fixed.bottom-0 {
    padding: 0.5rem !important;
  }

  .fixed.bottom-0 button {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    font-size: 0.875rem !important;
  }

  /* Scroll to top button smaller */
  #scrollToTop {
    padding: 0.5rem !important;
    bottom: 5rem !important;
    right: 1rem !important;
  }

  #scrollToTop svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* ---------------------------------------------------------------------------
     UTILITIES
     --------------------------------------------------------------------------- */

  /* Custom scrollbar for horizontal scrolling */
  *::-webkit-scrollbar {
    height: 4px !important;
  }

  *::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 2px !important;
  }

  *::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 2px !important;
  }

  /* Remove ALL animations and transitions on mobile for performance */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }

  /* Disable all fade animations */
  .fade-in-left,
  .fade-in-right,
  .hero-text,
  .animate-pulse,
  .animate-scroll-left,
  .animate-scroll-right,
  .animate-spin-slow,
  .animate-slide-in,
  .animate-scroll {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Remove hover effects for performance */
  *:hover {
    transform: none !important;
  }

  /* Optimize scrolling performance */
  * {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
  }

  /* Use GPU acceleration carefully */
  .services-container,
  #blog-press,
  #company .bg-gray-50 {
    will-change: scroll-position;
  }

} /* End of mobile media query */

/* =============================================================================
   SMALL MOBILE (max-width: 480px) - Even more aggressive
   ============================================================================= */

@media (max-width: 480px) {

  /* Readable text for small screens */
  h1 {
    font-size: 1.25rem !important;
  }

  h2 {
    font-size: 1.125rem !important;
  }

  h3 {
    font-size: 1rem !important;
  }

  p {
    font-size: 0.8125rem !important;
  }

  /* Hero section full screen even on small devices */
  section.relative.h-screen {
    height: 100vh !important;
    min-height: 100vh !important;
  }

  /* Adjust text size for small screens */
  section.relative.h-screen h1 {
    font-size: 1.5rem !important;
  }

  section.relative.h-screen p {
    font-size: 0.75rem !important;
  }

  /* Service cards full screen on small mobile too */
  .service-item {
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
  }

  /* Blog cards even smaller */
  #blog-press article {
    height: 65px !important;
  }

  #blog-press article > div:first-child {
    width: 55px !important;
    height: 45px !important;
  }

  /* CEO photo appropriate for small screens */
  #greeting .w-24.h-24,
  #greeting .w-5.h-5 {
    width: 4rem !important;
    height: 4rem !important;
  }

  /* CEO text sizes */
  #greeting h3 {
    font-size: 1.125rem !important;
  }

  #greeting .text-sm {
    font-size: 0.875rem !important;
  }

  #greeting .text-xs {
    font-size: 0.75rem !important;
  }

} /* End of small mobile media query */