/**
 * =============================================================================
 * HOMEPAGE STYLES
 * =============================================================================
 *
 * File:        css/homepage-styles.css
 * Version:     1.5.1
 * Theme:       Tractor Works Child Theme
 * Author:      TW-LLC/DM/C
 *
 * Purpose:     Styles for the homepage, which is built in Elementor as a
 *              stack of containers, each holding a small piece of HTML.
 *              Loaded ONLY on the front page (see functions.php).
 *
 * SCOPE / WHAT THIS FILE DOES NOT DO:
 *              This file styles only the sections that are UNIQUE to the
 *              homepage. For the call to action, the service cards, and the
 *              laser grading callout, the homepage REUSES components that
 *              already exist in the shared stylesheets, so those looks are
 *              defined once and stay consistent site-wide.
 *
 * REUSES (do not redefine here):
 *   - .tw-cta and friends ............. from cta-styles.css
 *   - .tw-services-grid, .tw-service-card,
 *     .tw-service-card-link ........... from services-styles.css
 *   - .tw-laser-callout and friends ... from services-styles.css
 *
 * CLASS NAMING:
 *              Every NEW class added here is prefixed "tw-home-" so it can
 *              never collide with a class defined in another stylesheet or
 *              added by Astra, Elementor, or a plugin.
 *
 * HERO TREATMENTS (section 4):
 *              The file keeps TWO hero treatments only:
 *                A3 (ACTIVE)  large green panel + smaller arena photo
 *                             overlapping its right edge; "Since 2001" pill.
 *                OPTION A     (kept on hand) photo beside text on the plain
 *                             page background, no green panel.
 *              Earlier explorations (P1 parallax, A1, A2, and the two-image
 *              layout) have been removed to keep this file lean.
 *
 * CHANGELOG:
 * v1.5.1 (June 2026) switch the "Since 2001" pill back to tan & larger size
 *
 * v1.5.0 (June 2026)
 *   - "Since 2001" pill switched to option 3a: forest-green fill, white text,
 *     1rem, with a 2px light-tan border (about 9.8:1 contrast, easy to read).
 *   - Added a card-based trust strip (.tw-home-trust-grid / -card / -icon)
 *     sized to match the calculator "why" boxes exactly (cream, light-tan
 *     border, 6px radius, 16px 14px padding, 24px green icon). The thin strip
 *     (.tw-home-strip) is kept as the lighter alternative.
 *   - NOTE: the laser callout's broken icon glyph is fixed in the HTML (an
 *     inline bullseye SVG replaces the unreliable Unicode character), not in
 *     this stylesheet.
 *
 * v1.4.0 (June 2026)
 *   - Cleaned up the hero section to just two treatments: the active A3
 *     (large green panel, smaller photo accent overlapping the right edge)
 *     and Option A (photo beside text on the plain background), kept on hand.
 *   - Removed the P1 parallax, A1, A2, and two-image hero treatments.
 *   - A3 now uses a panel min-height so the large-panel / smaller-photo
 *     balance holds even when the headline is short, matching the original
 *     "Variation A3" look.
 *   - Replaced the "2001 Established" text line with a "Since 2001" tan pill
 *     (.tw-home-since-pill).
 *
 * v1.3.0 (June 2026)
 *   - (superseded) Two-image layered A3 layout and the Since 2001 pill.
 *
 * v1.2.0 - v1.2.3 (June 2026)
 *   - (superseded) Iterations on a single-image overlapping A3 hero.
 *
 * v1.1.0 (May 2026)
 *   - (superseded) Four hero treatments (P1, A1, A2, A3) all present.
 *   - Services grid changed from 2x2 to a 3-column row (Sports removed from
 *     the homepage). Added .tw-home-services-grid-3, which stacks to a single
 *     column on mobile.
 *
 * v1.0.0 (May 2026)
 *   - First installed version. Uses the master variables from style.css,
 *     reuses shared components, and namespaces homepage-only classes with
 *     "tw-home-".
 *
 * NOTE: CSS variables (--tw-forest-green, etc.) are defined in the main
 *       style.css file and inherited by this file.
 *
 * =============================================================================
 */


/* =============================================================================
   1. LAYOUT HELPERS (homepage only)
   =============================================================================
   A centering wrapper and two section-padding bands. These are homepage
   specific so they never clash with the container defined in project-styles.css
   (which does not load on the homepage anyway).
*/

.tw-home-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Standard full-height section band. */
.tw-home-section {
    padding: var(--tw-section-padding) 0;   /* 80px top and bottom */
}

/* Shorter band, used for the thin interstitial strips. */
.tw-home-section-thin {
    padding: 30px 0;
}


/* =============================================================================
   2. BACKGROUND BANDS (homepage only)
   =============================================================================
   Add ONE of these to a section wrapper to set its background. The colored
   bands reach the screen edges as long as the Elementor container holding
   them is set to Full Width with its padding set to 0.
*/

.tw-home-bg-white  { background-color: var(--tw-warm-white); }
.tw-home-bg-cream  { background-color: var(--tw-cream); }
.tw-home-bg-dark   { background-color: var(--tw-dark-green); }


/* =============================================================================
   3. SHARED PIECES (homepage only)
   =============================================================================
   Small label ("eyebrow") and the centered heading block used at the top of
   most homepage sections.
*/

.tw-home-eyebrow {
    display: inline-block;
    font-family: var(--tw-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--tw-forest-green);
    margin-bottom: 10px;
}

.tw-home-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 46px;
}

.tw-home-section-header h2 {
    font-family: var(--tw-font-body);
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 600;
    color: var(--tw-dark-green);
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.tw-home-section-header p {
    font-family: var(--tw-font-body);
    color: var(--tw-earth-brown);
    font-size: 1.1rem;
    margin: 0;
}

/* A simple "read more" arrow link reuses .tw-service-card-link from
   services-styles.css, so no link style is defined here. */


/* -----------------------------------------------------------------------------
   3-COLUMN SERVICES GRID (homepage)
   The shared service CARD look comes from services-styles.css (.tw-service-card
   and friends). Only the GRID is defined here, because the homepage shows three
   services in a row (Estate, Arena, Farm; Sports is not on the homepage),
   whereas the services hub uses its own 2-column grid. Stacks to one column on
   mobile (see the responsive section at the end of this file).
   ----------------------------------------------------------------------------- */

.tw-home-services-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}


/* =============================================================================
   4. HERO
   =============================================================================
   Two hero treatments:

     4.1  A3        [ACTIVE] large green panel on the left, a smaller arena
                    photo overlapping its right edge. The panel dominates; the
                    photo is a smaller accent. Uses the "Since 2001" pill.
     4.2  OPTION A  (kept on hand) photo beside text on the plain page
                    background, no green panel. To use it instead of A3, swap
                    the hero HTML for the Option A markup.
     4.3  Shared bits: the green panel, the "Since 2001" pill, and buttons.

   Both treatments live inside the centered content column (no full-bleed),
   matching the rest of the site.
   ----------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------
   4.1  A3  GREEN PANEL + SMALLER OVERLAPPING PHOTO  [ACTIVE]
   The green panel (section 4.3) is the dominant element. The arena photo is a
   smaller accent (46% wide, 360px tall), vertically centered, overlapping the
   panel's right edge. The panel has a min-height so this balance holds even
   when the headline is short. The panel's right padding keeps text clear of
   the overlapping photo.
   ----------------------------------------------------------------------------- */

.tw-home-hero-a3 {
    padding: 70px 0;
    background-color: var(--tw-warm-white);
}

.tw-home-hero-a3-stage {
    position: relative;
}

.tw-home-hero-a3 .tw-home-panel {
    width: 62%;
    position: relative;
    z-index: 1;
    padding-right: 120px;       /* room so text does not hide under the photo */
}

.tw-home-hero-a3 .tw-home-hero-img {
    position: absolute;
    z-index: 2;
    width: 46%;
    height: 360px;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    border: 6px solid var(--tw-warm-white);
    box-shadow: 0 18px 46px rgba(45, 74, 53, 0.28);
}


/* -----------------------------------------------------------------------------
   4.2  OPTION A  PHOTO BESIDE TEXT  (kept on hand)
   No green panel. The headline and subtitle sit directly on the warm-white
   page background (dark green headline, brown subtitle), with the arena photo
   as a framed box to the right in an even two-column grid.
   ----------------------------------------------------------------------------- */

.tw-home-hero-optA {
    padding: 56px 0;
    background-color: var(--tw-warm-white);
}

.tw-home-hero-optA-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.tw-home-hero-optA h1 {
    font-family: var(--tw-font-body);
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--tw-dark-green);
    margin: 0 0 16px 0;
}

.tw-home-hero-optA .tw-home-hero-optA-sub {
    font-family: var(--tw-font-body);
    font-size: 1.18rem;
    color: var(--tw-earth-brown);
    margin: 0 0 24px 0;
}

.tw-home-hero-optA .tw-home-hero-img {
    height: 380px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 12px 36px rgba(45, 74, 53, 0.18);
}


/* -----------------------------------------------------------------------------
   4.3  SHARED HERO BITS: green panel, "Since 2001" pill, buttons
   ----------------------------------------------------------------------------- */

/* The green text panel used by A3. Its height grows with content; the A3 rule
   adds the min-height that keeps it dominant. */
.tw-home-panel {
    background: linear-gradient(135deg, var(--tw-dark-green) 0%, var(--tw-forest-green) 100%);
    border-radius: 6px;
    padding: 48px 44px;
    min-height: 520px;          /* keeps the panel tall so it dominates the photo */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tw-home-panel h1 {
    font-family: var(--tw-font-body);
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--tw-warm-white);
    margin: 0 0 16px 0;
}

.tw-home-panel p {
    font-family: var(--tw-font-body);
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--tw-light-tan);
    margin: 0;
}

/* "Since 2001" pill badge: tan fill, dark-brown text, at the larger 3a size.
   The bigger font and tighter spacing keep it readable even on tan. */
.tw-home-since-pill {
    display: inline-block;
    align-self: flex-start;     /* so the pill hugs its text, not full width */
    margin-top: 22px;
    background-color: var(--tw-tan);
    color: var(--tw-dark-brown);
    font-family: var(--tw-font-body);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 10px 24px;
    border: 2px solid var(--tw-tan);
    border-radius: 999px;       /* fully rounded pill */
}

/* Hero buttons (used by either treatment). */
.tw-home-hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.tw-home-btn {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--tw-font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Tan filled button. */
.tw-home-btn-tan {
    background-color: var(--tw-tan);
    color: var(--tw-dark-brown);
    border: 2px solid var(--tw-tan);
}

.tw-home-btn-tan:hover {
    background-color: var(--tw-light-tan);
    border-color: var(--tw-light-tan);
    color: var(--tw-dark-brown);
    transform: translateY(-2px);
}

/* Outlined button for use on a DARK background (e.g. inside the green panel). */
.tw-home-btn-outline {
    background-color: transparent;
    color: var(--tw-warm-white);
    border: 2px solid var(--tw-tan);
}

.tw-home-btn-outline:hover {
    background-color: var(--tw-tan);
    color: var(--tw-dark-brown);
}

/* Green buttons for use on a LIGHT background (e.g. Option A on warm white). */
.tw-home-btn-green {
    background-color: var(--tw-forest-green);
    color: var(--tw-white);
    border: 2px solid var(--tw-forest-green);
}

.tw-home-btn-green:hover {
    background-color: var(--tw-dark-green);
    border-color: var(--tw-dark-green);
    color: var(--tw-white);
    transform: translateY(-2px);
}

.tw-home-btn-greenline {
    background-color: transparent;
    color: var(--tw-forest-green);
    border: 2px solid var(--tw-forest-green);
}

.tw-home-btn-greenline:hover {
    background-color: var(--tw-forest-green);
    color: var(--tw-white);
}


/* =============================================================================
   6. TRUST STRIP (interstitial)
   =============================================================================
   A thin row of short selling points, separated by tan dots. Sits on a cream
   band directly under the hero.
*/

.tw-home-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 28px;
    text-align: center;
}

.tw-home-strip-item {
    position: relative;
    font-family: var(--tw-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tw-dark-green);
}

/* Dot separator after each item except the last. */
.tw-home-strip-item:not(:last-child)::after {
    content: '\2022';   /* bullet */
    position: absolute;
    right: -16px;
    color: var(--tw-tan);
}


/* -----------------------------------------------------------------------------
   TRUST STRIP - CARD VERSION (matches the calculator "why" boxes)
   Sized to match .tw-calc .why-item from calculator-styles.css exactly:
   cream background, light-tan border, 6px radius, 16px 14px padding, centered.
   Use this instead of the thin strip above when you want bulkier cards. The
   thin strip (.tw-home-strip) is kept above as the lighter alternative.
   ----------------------------------------------------------------------------- */

.tw-home-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.tw-home-trust-card {
    background-color: var(--tw-cream);
    border: 1px solid var(--tw-light-tan);
    border-radius: 6px;
    padding: 16px 14px;
    text-align: center;
}

/* Green circular icon, matching the why-box check badge size (24px). */
.tw-home-trust-icon {
    width: 24px;
    height: 24px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background-color: var(--tw-forest-green);
    color: var(--tw-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Label, matching the why-box ".word" (Lora, 1.05rem, dark green). */
.tw-home-trust-card h4 {
    font-family: var(--tw-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tw-dark-green);
    margin: 0 0 4px 0;
    line-height: 1.25;
}

/* Optional subline, matching the why-box ".desc" (0.82rem). Omit the <p> in the
   HTML if you want the tightest card (icon + label only). */
.tw-home-trust-card p {
    font-family: var(--tw-font-body);
    font-size: 0.82rem;
    color: var(--tw-earth-brown);
    line-height: 1.4;
    margin: 0;
}


/* =============================================================================
   7. QUOTE BAND (interstitial)
   =============================================================================
   A single Derek quote on a dark green band. Lora is used here as a
   decorative accent.
*/

.tw-home-quote {
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
}

.tw-home-quote-mark {
    font-family: var(--tw-font-heading);
    font-size: 4rem;
    line-height: 0.5;
    color: var(--tw-tan);
    display: block;
    margin-bottom: 10px;
}

.tw-home-quote-text {
    font-family: var(--tw-font-heading);
    font-size: 1.6rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--tw-warm-white);
    margin: 0 0 18px 0;
}

.tw-home-quote-cite {
    font-family: var(--tw-font-body);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--tw-light-sage);
    font-style: normal;
}


/* =============================================================================
   8. FEATURED PROJECTS (placeholder grid)
   =============================================================================
   Used ONLY if you build featured projects with hand-written HTML. The
   recommended approach is the native Elementor Posts widget (no CSS needed);
   see the implementation guide. These classes are namespaced so they never
   collide with the portfolio archive grid in archive-project-styles.css.
*/

.tw-home-featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.tw-home-featured-item {
    aspect-ratio: 1;
    background-color: var(--tw-light-sage);
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.tw-home-featured-item span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: var(--tw-dark-green);
    font-style: italic;
    text-align: center;
    padding: 10px;
}

/* Centered link beneath a grid (e.g. "View All Projects"). */
.tw-home-center-link {
    text-align: center;
    margin-top: 34px;
}


/* =============================================================================
   9. CALCULATOR INTRO + SOFT CALL TO ACTION
   =============================================================================
   The calculator itself is a shortcode widget styled by calculator-styles.css.
   These rules only handle the short intro above it and the prompt below it.
   The cream background for this section is set on the Elementor container,
   because the shortcode is a separate widget and cannot sit inside a single
   pasted div.
*/

.tw-home-calc-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 36px;
}

.tw-home-calc-intro h2 {
    font-family: var(--tw-font-body);
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 600;
    color: var(--tw-dark-green);
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.tw-home-calc-intro p {
    font-family: var(--tw-font-body);
    color: var(--tw-earth-brown);
    font-size: 1.1rem;
    margin: 0;
}

.tw-home-calc-softcta {
    text-align: center;
    margin-top: 30px;
    color: var(--tw-earth-brown);
}


/* =============================================================================
   10. ABOUT / DEREK
   =============================================================================
*/

.tw-home-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.tw-home-about-image {
    height: 380px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--tw-forest-green) 0%, var(--tw-sage-green) 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tw-white);
    font-style: italic;
}

.tw-home-about-text h2 {
    font-family: var(--tw-font-body);
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 600;
    color: var(--tw-dark-green);
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.tw-home-about-text p {
    font-family: var(--tw-font-body);
    color: var(--tw-earth-brown);
    line-height: 1.7;
}

/* The "no project managers, no rotating crews" line. */
.tw-home-about-highlight {
    font-family: var(--tw-font-heading);
    font-size: 1.25rem;
    color: var(--tw-dark-green);
    font-weight: 600;
    margin: 16px 0 !important;
}

.tw-home-stats {
    display: flex;
    gap: 36px;
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--tw-light-tan);
}

.tw-home-stat {
    text-align: center;
}

.tw-home-stat-number {
    font-family: var(--tw-font-heading);
    font-size: 2.3rem;
    color: var(--tw-forest-green);
    line-height: 1;
    display: block;
}

.tw-home-stat-label {
    font-size: 0.8rem;
    color: var(--tw-earth-brown);
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* =============================================================================
   11. CLIENT REFERRALS (interstitial, optional)
   =============================================================================
   A "trusted by" row of past client or farm names on a cream band.
*/

.tw-home-referrals {
    text-align: center;
}

.tw-home-referrals h4 {
    font-family: var(--tw-font-body);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--tw-forest-green);
    margin: 0 0 18px 0;
}

.tw-home-referrals-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 30px;
    color: var(--tw-earth-brown);
    font-size: 1rem;
    font-weight: 500;
}


/* =============================================================================
   12. SERVICE AREA BAND
   =============================================================================
*/

.tw-home-area {
    text-align: center;
}

.tw-home-area h3 {
    font-family: var(--tw-font-body);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--tw-dark-green);
    margin: 0 0 10px 0;
}

.tw-home-area-list {
    font-family: var(--tw-font-body);
    color: var(--tw-earth-brown);
    font-size: 1.05rem;
    margin: 0;
}


/* =============================================================================
   13. RESPONSIVE STYLES
   =============================================================================
*/

/* ---- Tablet and below ---- */
@media (max-width: 1024px) {

    /* Services row: 3 columns down to a single stacked column. */
    .tw-home-services-grid-3 {
        grid-template-columns: 1fr;
    }

    .tw-home-about-grid {
        grid-template-columns: 1fr;
    }

    .tw-home-featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Trust strip cards: 4 across down to 2 across on tablet. */
    .tw-home-trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Option A: side-by-side becomes stacked. */
    .tw-home-hero-optA-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .tw-home-hero-optA .tw-home-hero-img {
        height: 280px;
    }

}

/* ---- Below 900px: A3 overlap relaxes into normal stacked flow ---- */
@media (max-width: 900px) {

    /* The panel returns to natural height and full width; the photo drops
       below it instead of overlapping. */
    .tw-home-panel {
        min-height: 0;
    }

    .tw-home-hero-a3 .tw-home-panel {
        width: 100%;
        padding-right: 44px;
    }

    .tw-home-hero-a3 .tw-home-hero-img {
        position: static;
        transform: none;
        width: 100%;
        height: 240px;
        margin-top: 18px;
        border: none;
    }

}

/* ---- Phones ---- */
@media (max-width: 768px) {

    .tw-home-section {
        padding: 50px 0;
    }

    .tw-home-hero-buttons {
        justify-content: center;
    }

    .tw-home-stats {
        flex-wrap: wrap;
        justify-content: center;
    }

    .tw-home-quote-text {
        font-size: 1.3rem;
    }

    /* Hide the dot separators when strip items stack vertically. */
    .tw-home-strip-item:not(:last-child)::after {
        display: none;
    }

}

/* End of homepage-styles.css */