/**
 * sections.css - Section-Level Patterns
 *
 * Hero, page headers, section headers, content blocks,
 * CTA blocks, overview/service/equipment grids, services
 * snapshot list, and seasonal banner.
 *
 * @package LibrandiOutdoorPower
 * @since 1.1.0
 */


/* ==========================================================
   Hero Section (front page)
   ========================================================== */
/*
 * v0.1.0:
 * The hero is now a transparent shell that hosts the
 * .lop-snippet-mesh wrapper (which paints the perforated
 * mesh + safety-orange accent line + bolted center plate).
 * Backgrounds and overlays previously declared here have
 * been retired; if a future redesign needs a different hero
 * surface, swap the wrapper inside front-page.php rather
 * than re-coloring .hero itself.
 */
.hero {
    position: relative;
    color: var(--color-white);
    /* No padding-block here -- the .lop-snippet-mesh wrapper
       owns vertical rhythm so the perforated surface bleeds
       fully under the accent line and the bolted plate sits
       in optical center. */
    padding-block: 0;
    overflow: hidden;
}

/* Hero content is centered horizontally within the container.
   margin-inline: auto pairs with max-width to keep the block
   aligned with the rest of the page. text-align: center handles
   the title, subtitle, and any inline copy the hero block uses. */
.hero__inner {
    position: relative;
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
    /* The .lop-snippet-mesh wrapper handles top/bottom
       breathing room around the plate via its own padding,
       so this block can stay padding-free. */
}
.hero__title {
    font-size: var(--text-4xl);
    color: var(--color-white);
    margin-bottom: var(--space-4);
    letter-spacing: -0.03em;
    line-height: var(--leading-tight);
}
.hero__subtitle {
    font-size: var(--text-lg);
    opacity: 0.9;
    margin-bottom: var(--space-8);
    line-height: var(--leading-relaxed);
    max-width: 600px;
    /* auto-center the constrained subtitle within the hero block */
    margin-inline: auto;
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    /* Buttons centered horizontally to match the title/subtitle. */
    justify-content: center;
}


/* ==========================================================
   Page Header (inner pages)
   ========================================================== */
.page-header {
    position: relative;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding-block: var(--space-12) var(--space-10);
    overflow: hidden;
}
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 70% 100%,
        rgba(255,255,255,.04) 0%,
        transparent 60%
    );
    pointer-events: none;
}
.page-header .container {
    position: relative;
    /* Center the page-header copy (h1, subtitle, meta) to match
       the rest of the page's centered layout. */
    text-align: center;
}
.page-header h1 {
    color: var(--color-white);
    margin-bottom: var(--space-2);
}
.page-header__subtitle {
    font-size: var(--text-lg);
    opacity: 0.85;
    max-width: 650px;
    line-height: var(--leading-relaxed);
    /* max-width is centered within the container. */
    margin-inline: auto;
}


/* ==========================================================
   Section Headers
   Centered title + subtitle. The subtitle keeps a max-width
   for readable line length and is auto-centered inside it.
   ========================================================== */
.section-header {
    margin-bottom: var(--space-10);
    text-align: center;
}
.section-header h2 {
    margin-bottom: var(--space-2);
}
.section-subtitle {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    max-width: 600px;
    line-height: var(--leading-normal);
    /* Auto-center the constrained subtitle beneath the heading. */
    margin-inline: auto;
}
.section--accent .section-subtitle {
    color: rgba(255,255,255,.8);
}


/* ==========================================================
   Content Blocks
   Narrow reading column, centered within its parent.
   Body copy inside the block stays left-aligned for readability;
   section-header children inside a content-block will still be
   centered via their own rules above.
   ========================================================== */
.content-block {
    max-width: 800px;
    margin-inline: auto;
}
.content-block--narrow {
    max-width: 720px;
    margin-inline: auto;
}
.content-block p + p {
    margin-top: var(--space-4);
}


/* ==========================================================
   Card Grids
   ========================================================== */
.overview-grid,
.services-grid,
.equipment-grid,
.testimonials-grid,
.blog-grid {
    display: grid;
    gap: var(--space-6);
}


/* ==========================================================
   Services Snapshot List (home page)
   Grid of max-content columns so each item only takes up as
   much room as its text. justify-content: center centers the
   whole cluster horizontally under the section header.
   ========================================================== */
.services-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: var(--space-2) var(--space-10);
    /* Clamp overall width so long items cannot push the list
       to hug the container edges. */
    max-width: 820px;
    margin: 0 auto var(--space-8);
    justify-content: center;
}
.services-list li {
    padding: var(--space-2) 0;
    padding-left: var(--space-6);
    position: relative;
    font-size: var(--text-lg);
    /* Keep bullet+text left-aligned inside each item for clean
       vertical alignment of the dot with the first character. */
    text-align: left;
}
.services-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: var(--color-accent);
    border-radius: 50%;
}
.services-snapshot__cta {
    text-align: center;
}


/* ==========================================================
   CTA Blocks
   ========================================================== */
.cta-block {
    text-align: center;
    max-width: 650px;
    margin-inline: auto;
}
.cta-block h2 {
    margin-bottom: var(--space-3);
}
.cta-block__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
}


/* ==========================================================
   Seasonal Banner
   ========================================================== */
.seasonal-banner {
    text-align: center;
    max-width: 650px;
    margin-inline: auto;
}
.seasonal-banner h2 {
    margin-bottom: var(--space-3);
}
.seasonal-banner .btn {
    margin-top: var(--space-6);
}