/* ───────────────────────────────────────────────────────────────────
   ROYA — Performance & CLS optimization
   v2.11 — targets the auditor's CLS finding (0.496 desktop, 0.11 mobile)
   ─────────────────────────────────────────────────────────────────── */

/* 1) Reserve space for media to prevent layout shift */
.card-image {
    aspect-ratio: 16 / 10;
    height: auto !important;
    min-height: 220px;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 2) Hero video block — fixed aspect ratio prevents shift when iframe loads */
.r-hero__video,
.r-hero__video-frame {
    aspect-ratio: 16 / 9;
    background: rgba(10, 25, 41, 0.5);
}

/* 3) Developer logo cards — reserve consistent height */
.partners-logo-grid .card,
.partners-grid .card {
    min-height: 220px;
}

/* 4) Team member avatar boxes — reserve square */
.team-card .avatar,
.team-card .photo,
[class*="team-photo"] {
    aspect-ratio: 1 / 1;
}

/* 5) Testimonial avatars — fixed dimensions to prevent reflow on load */
.testimonial img,
[class*="testimonial"] img[width="48"] {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

/* 6) Skeleton loading state for images while loading */
img[loading="lazy"]:not(.loaded) {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 25%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.03) 75%
    );
    background-size: 200% 100%;
    animation: shimmerLoad 1.5s ease-in-out infinite;
}
@keyframes shimmerLoad {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 7) Prevent FOUT layout shift — ensure font fallback metrics match */
@font-face {
    font-family: 'Playfair Display Fallback';
    src: local('Georgia');
    size-adjust: 105%;
    ascent-override: 95%;
    descent-override: 25%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Outfit Fallback';
    src: local('Arial');
    size-adjust: 102%;
    ascent-override: 95%;
    descent-override: 22%;
    line-gap-override: 0%;
}

/* 8) Body text gets the fallback first, swaps to webfont seamlessly */
body {
    font-family: 'Outfit', 'Outfit Fallback', system-ui, -apple-system, sans-serif;
}
h1, h2, h3, h4, h5, h6, .serif {
    font-family: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
}

/* 9) Hero section — set min-height to prevent shift while content loads */
.r-hero,
.hero,
section.hero {
    min-height: 70vh;
}

/* 10) Section blocks — reserve approximate space to reduce layout shifts during scroll */
section.section,
.section {
    contain: layout;
}

/* 11) iFrames must have explicit aspect ratio (Calendly, YouTube) */
iframe {
    max-width: 100%;
}
.video-wrapper iframe,
iframe[src*="youtube"],
iframe[src*="calendly"] {
    aspect-ratio: 16 / 9;
}

/* 12) Mobile-specific CLS reduction — narrow hero on phones */
@media (max-width: 768px) {
    .card-image {
        aspect-ratio: 4 / 3;
        min-height: 180px;
    }
    .r-hero,
    .hero {
        min-height: 88vh;
    }
}

/* 13) Reduce paint work on scroll-heavy pages */
.section:nth-child(n+4) {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

@media (max-width: 768px) {
    .leader-card-modern {
        grid-template-columns: 1fr !important;
    }
    .leader-card-modern__media {
        height: 320px !important;
        min-height: 320px !important;
    }
}