/**
 * Homepage Widget Card Unification
 * Loaded only on home view. Unifies main inner card shell of all non-excluded
 * sections: same width flow, background: var(--card-bg), same border and radius.
 * Does not target projects, addons, hero, header, footer, or nested item cards.
 */

/* ===== 1. Same container width for every homepage widget section (single source of truth) ===== */
/* All sections using <section class="section ..."> plus FAQ which uses <div class="faq-section"> */
#main .section .container,
#main .faq-section .container {
  max-width: 1180px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  box-sizing: border-box;
}

@media (min-width: 640px) {
  #main .section .container,
  #main .faq-section .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 1024px) {
  #main .section .container,
  #main .faq-section .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

@media (max-width: 480px) {
  #main .section .container,
  #main .faq-section .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

@media (max-width: 360px) {
  #main .section .container,
  #main .faq-section .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* ===== 2. Inner cards: same width (fill container), same bg/border/radius ===== */
#main .logo-strip__card,
#main .services-inner,
#main .testimonials-inner,
#main .contact-section-inner,
#main .faq-section__card,
#main .how-it-works__card,
#main .why-choose-us__card,
#main .newsletter-signup-inner,
#main .features-section-inner,
#main .widget-blog-posts-list__container,
#main .home-inline-widget-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  background: var(--card-bg);
  border: 1px solid var(--card-border, var(--line2));
  border-radius: var(--r, 20px);
}

/* Stronger card outline on light (non-text contrast / section boundaries) */
html[data-theme="light"] #main .testimonials-inner,
html[data-theme="light"] #main .services-inner,
html[data-theme="light"] #main .widget-blog-posts-list__container {
  border-color: var(--color-border-strong);
}

/* Quote/booking inline cards: same padding as other section inners */
.home-inline-widget-card {
  padding: var(--space-8);
}

@media (min-width: 1024px) {
  .home-inline-widget-card {
    padding: var(--space-12);
  }
}

/* Blog posts widget: section has no background; inner card sits inside .container so width matches others */
#main .widget-blog-posts-list {
  background: transparent !important;
  background-color: transparent !important;
  border-top: none;
}

/* Blog inner card: same padding as other section inners (width comes from being inside .container) */
.widget-blog-posts-list__container {
  padding: var(--space-8);
}

@media (min-width: 1024px) {
  .widget-blog-posts-list__container {
    padding: var(--space-12);
  }
}

/* ── Home vertical rhythm + premium scroll reveal ─────────────────────────────
   Scoped to .home-sections (added by templates/home.php) so nothing else is
   affected. Tightens the stacked section padding and fades sections up as they
   enter the viewport. Pure CSS scroll-driven animation; degrades to no-motion
   on older browsers and for users who prefer reduced motion. */
.home-sections > section,
.home-sections > [class*="-section"],
.home-sections > [class*="widget-"],
.home-sections > div > section {
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

/* Trim the oversized bottom margin under the FAQ block on home. */
.home-sections .faq-section--padding {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Reveal every section EXCEPT the first (the hero): it is above the fold and
       is the LCP element, so it must paint fully visible on load — no
       scroll-driven timeline, no persistent compositor layer. */
    .home-sections > section:not(:first-child),
    .home-sections > [class*="-section"]:not(:first-child),
    .home-sections > [class*="widget-"]:not(:first-child) {
      animation: home-section-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 16%;
    }
    @keyframes home-section-reveal {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}