/* Shared sizing for repeated card collections. Card contents and heights stay intact. */
:root {
  --card-gap: 24px;
  --card-padding: 28px;
  --card-grid-width: 85vw;
  --card-columns: 3;
  --card-width: calc((var(--card-grid-width) - 48px) / 3);
}

/* Match the 28px inset of the three reference About cards. */
body:not(.shell-page) :is(
  .glass, .about-card, .about-founder-highlights li, .uid-card,
  .uid-vid-card, .contact-card, .ct-card, .ct-form-wrap,
  .experience-panel, .experience-card, .experience-video-card,
  .career-card, .process-card, .process-step, .portfolio-card,
  .project-card, .video-card, .blog-featured, .blog-card,
  .blog-promo, .blog-side-post, .hero-blog-card, .service-card,
  .estimate-step-card, .stat-card, .testimonial-card, .error-box, .card
),
body.frame-page.home-page :is(.service-card, .hero-blog-card, .testimonial-card) {
  box-sizing: border-box !important;
  padding: var(--card-padding) !important;
}

/* Media cards receive the inset once, on the outer card rather than twice. */
body:not(.shell-page) :is(.uid-card-footer, .hero-blog-text) {
  padding: 0 !important;
}

body:not(.shell-page) .uid-card-footer {
  margin-top: 20px !important;
}

body:not(.shell-page) .uid-vid-label {
  left: var(--card-padding) !important;
  right: var(--card-padding) !important;
  bottom: var(--card-padding) !important;
}

body:not(.shell-page) .uid-vid-card {
  background: var(--palette-surface) !important;
}

/* The old About frame clipped grids wider than its content area. */
body.frame-page.about-page .about-main {
  width: 100% !important;
  max-width: none !important;
}

body.frame-page.about-page .about-hero {
  box-sizing: border-box !important;
  width: var(--card-grid-width) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}

body.frame-page.about-page .about-founder {
  width: 100% !important;
  max-width: none !important;
  margin-bottom: var(--card-gap) !important;
  overflow: visible !important;
}

@media (max-width: 1100px) {
  :root {
    --card-columns: 2;
    --card-width: calc((var(--card-grid-width) - 24px) / 2);
  }
}

@media (max-width: 700px) {
  :root {
    --card-columns: 1;
    --card-grid-width: 85vw;
    --card-width: var(--card-grid-width);
  }
}

/* Center against each parent, including narrower legacy content frames. */
body.frame-page :is(
  .about-grid, .about-founder-highlights, .services .cards,
  .career-grid, .blog-grid, .hero-blog-cards, .uid-projects-container,
  .uid-gallery, .uid-masonry-container, .uid-carousel-container
) {
  box-sizing: border-box !important;
  width: var(--card-grid-width) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: calc((100% - var(--card-grid-width)) / 2) !important;
  margin-right: calc((100% - var(--card-grid-width)) / 2) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transform: none !important;
}

body.frame-page :is(
  .about-grid, .about-founder-highlights, .services .cards,
  .career-grid, .blog-grid, .hero-blog-cards, .uid-projects-container,
  .uid-gallery
) {
  display: grid !important;
  grid-template-columns: repeat(var(--card-columns), minmax(0, 1fr)) !important;
  gap: var(--card-gap) !important;
}

body.frame-page :is(
  .about-grid, .about-founder-highlights, .services .cards,
  .career-grid, .blog-grid, .hero-blog-cards, .uid-projects-container,
  .uid-gallery
) > :is(
  .about-card, li, .service-card, .career-card, .blog-card,
  .blog-promo, .hero-blog-card, .uid-card, .uid-vid-card
) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Keep the Graphic Design masonry behavior, with the same column sizing. */
body.frame-page .uid-masonry-container .uid-gallery {
  display: block !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  column-count: var(--card-columns) !important;
  column-gap: var(--card-gap) !important;
}

body.frame-page .uid-masonry-container .uid-card {
  margin-bottom: var(--card-gap) !important;
}

/* Horizontal galleries retain scrolling and their existing navigation. */
body.frame-page .uid-carousel-container:has(.uid-carousel-nav) {
  display: flex !important;
  width: calc(var(--card-grid-width) + 144px) !important;
  margin-left: calc((100% - var(--card-grid-width) - 144px) / 2) !important;
  margin-right: calc((100% - var(--card-grid-width) - 144px) / 2) !important;
  gap: var(--card-gap) !important;
}

body.frame-page .uid-carousel-container .uid-gallery-wrap {
  width: var(--card-grid-width) !important;
  min-width: 0 !important;
}

body.frame-page .uid-carousel-container:has(.uid-carousel-nav) .uid-gallery {
  display: flex !important;
  width: max-content !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: var(--card-gap) !important;
}

body.frame-page .uid-carousel-container:has(.uid-carousel-nav) .uid-card {
  width: var(--card-width) !important;
  flex: 0 0 var(--card-width) !important;
}

/* Testimonials use the same widths, including their cloned carousel cards. */
body.frame-page.home-page .home-testimonials {
  width: var(--card-grid-width) !important;
  max-width: none !important;
}

body.frame-page.home-page .testimonials-viewport {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.frame-page.home-page .testimonials-track {
  gap: var(--card-gap) !important;
}

body.frame-page.home-page .testimonial-card {
  box-sizing: border-box !important;
  width: var(--card-width) !important;
  flex: 0 0 var(--card-width) !important;
}

body.frame-page .ct-cards {
  width: var(--card-width) !important;
  max-width: none !important;
  margin-left: auto;
  margin-right: auto;
  gap: var(--card-gap) !important;
}

body.frame-page .ct-wrap {
  box-sizing: border-box !important;
  width: var(--card-grid-width) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: var(--card-gap) !important;
}

@media (min-width: 961px) {
  body.frame-page .ct-wrap {
    grid-template-columns: var(--card-width) minmax(0, 1fr) !important;
  }
}

@media (max-width: 700px) {
  body.frame-page .uid-carousel-container:has(.uid-carousel-nav) {
    display: block !important;
    width: var(--card-grid-width) !important;
    margin-left: calc((100% - var(--card-grid-width)) / 2) !important;
    margin-right: calc((100% - var(--card-grid-width)) / 2) !important;
  }
}

/* Every top-level content section shares the same viewport-based width.
   Nested sections stay inside that frame rather than shrinking to 85% again. */
@layer portfolio-section-width {
  body.frame-page :is(
    #home.hero, .services, .experience, .home-testimonials, .clients-section,
    .portfolio-carousel, .hero-blog-teasers, .about-hero, .uid-hero,
    .uid-info, .uid-admin-bar, .ct-wrap, .experience-main, .blog-page,
    .blog-layout, .blog-admin-bar, .uid-carousel-container, .uid-masonry-container
  ) {
    box-sizing: border-box !important;
    width: var(--card-grid-width) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Keep carousel controls inside the 85% frame without narrowing its cards. */
  body.frame-page .uid-carousel-container:has(.uid-carousel-nav) {
    display: block !important;
  }

  body.frame-page .uid-carousel-container .uid-carousel-nav {
    position: absolute !important;
    top: calc(20px + var(--card-width) / 2) !important;
    transform: translateY(-50%) !important;
    z-index: 1000000 !important;
  }

  body.frame-page .uid-carousel-container .uid-gallery-wrap {
    position: relative !important;
    z-index: 1 !important;
  }

  body.frame-page .uid-carousel-nav.prev {
    left: 8px !important;
    right: auto !important;
  }

  body.frame-page .uid-carousel-nav.next {
    right: 8px !important;
    left: auto !important;
  }
}

@media (min-width: 1101px) {
  body.frame-page.home-page .services .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}