/* =============================================================
   Brick & Oak Pizza Co. — Home page (data-driven, orange + tan)
   Warm tan/terracotta neighborhood-pizzeria feel.

   Sections (top → bottom):
     1. .lp2-hero          split layout: text left, image right
     2. .lp2-strip         quick info: today, menu, ready-in
     3. .lp2-how           3-step "how it works" process
     4. .lp2-featured      featured pies grid
     5. .lp2-about         about the kitchen (text + photo)
     6. .lp2-kiosk         dark callout for the self-serve kiosk
     7. .lp2-hours         hours + visit card

   Class prefix: .lp2-  (intentionally distinct from the
   legacy .lp-* classes which are still in site.css as
   dead code in case anyone reverts).
   ============================================================= */

/* ====== Shared section utilities ====== */
.lp2-section-eyebrow {
    display: inline-block;
    font-family: var(--ff-sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-brand);
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 2px solid var(--color-brand);
}
.lp2-section-eyebrow--inverse {
    color: var(--text-inverse);
    border-bottom-color: var(--text-inverse);
}
.lp2-section-title {
    font-family: var(--ff-display);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
    margin: 0 0 var(--s-4);
    letter-spacing: -0.01em;
}
.lp2-section-title--inverse { color: var(--text-inverse); }

/* ====== Buttons ====== */
.lp2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 52px;
    padding: 0.85rem 1.6rem;
    font-family: var(--ff-sans);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lp2-btn:hover { transform: translateY(-1px); }
.lp2-btn:active { transform: translateY(0); }
.lp2-btn--solid {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
}
.lp2-btn--solid:hover { background: var(--color-brand-deep); border-color: var(--color-brand-deep); }
.lp2-btn--ghost {
    background: transparent;
    color: var(--color-brand);
    border-color: var(--color-brand);
}
.lp2-btn--ghost:hover { background: var(--color-brand); color: #fff; }
.lp2-btn--inverse {
    background: transparent;
    color: var(--text-inverse);
    border-color: var(--text-inverse);
}
.lp2-btn--inverse:hover { background: var(--text-inverse); color: var(--color-brand-dark); }


/* ====== 1. Hero ====== */
.lp2-hero {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--bg-page);
    overflow: hidden;
}
.lp2-hero-text {
    padding: var(--s-10) var(--s-5) var(--s-8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-4);
    max-width: 640px;
    margin: 0 auto;
}
.lp2-hero-eyebrow {
    display: inline-block;
    font-family: var(--ff-sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-brand);
}
.lp2-hero-title {
    font-family: var(--ff-display);
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}
.lp2-hero-title em {
    font-style: italic;
    color: var(--color-brand);
    font-weight: 700;
}
.lp2-hero-sub {
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 540px;
    margin: 0;
}
.lp2-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-3);
}
.lp2-hero-stamp {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-6);
    padding: var(--s-3) var(--s-4);
    background: var(--bg-page-soft);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    align-self: flex-start;
}
.lp2-hero-stamp img {
    width: 44px; height: 44px;
    border-radius: var(--r-md);
    background: #fff;
    padding: 4px;
}
.lp2-hero-stamp-title {
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--text-primary);
    font-size: var(--fs-md);
    line-height: 1.2;
}
.lp2-hero-stamp-sub {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.lp2-hero-image {
    position: relative;
    min-height: 320px;
    overflow: hidden;
}
.lp2-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (min-width: 900px) {
    .lp2-hero {
        grid-template-columns: 1fr 1fr;
        min-height: 520px;
    }
    .lp2-hero-text {
        padding: var(--s-16) var(--s-12);
        max-width: none;
    }
    .lp2-hero-image { min-height: 100%; }
}


/* ====== 2. Quick info strip ====== */
.lp2-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-3);
    max-width: var(--container);
    margin: -2.5rem auto 0;
    padding: 0 var(--s-4);
    position: relative;
    z-index: 1;
}
.lp2-strip-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    display: flex;
    align-items: center;
    gap: var(--s-4);
    box-shadow: var(--shadow-sm);
}
.lp2-strip-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--color-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.lp2-strip-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 700;
}
.lp2-strip-value {
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-top: 2px;
}
.lp2-strip-value.is-open    { color: var(--color-success); }
.lp2-strip-value.is-soon     { color: var(--color-brand); }
.lp2-strip-value.is-closed  { color: var(--color-danger); }

@media (min-width: 768px) {
    .lp2-strip {
        grid-template-columns: repeat(3, 1fr);
        margin-top: -3.5rem;
    }
}


/* ====== 3. How it works ====== */
.lp2-how {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-16) var(--s-4) var(--s-12);
    text-align: center;
}
.lp2-how-steps {
    list-style: none;
    padding: 0;
    margin: var(--s-8) 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
    text-align: left;
}
.lp2-how-step {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    box-shadow: var(--shadow-sm);
    position: relative;
}
.lp2-how-num {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--color-brand);
    color: #fff;
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-4);
}
.lp2-how-step-title {
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--s-2);
}
.lp2-how-step-body {
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}
@media (min-width: 900px) {
    .lp2-how-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ====== 4. Featured pies ====== */
.lp2-featured {
    background: var(--bg-page-soft);
    padding: var(--s-16) var(--s-4);
    text-align: center;
}
.lp2-featured-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    max-width: var(--container);
    margin: var(--s-8) auto 0;
    text-align: left;
}
.lp2-featured-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    display: flex;
    flex-direction: column;
}
.lp2-featured-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.lp2-featured-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--bg-page-deep);
    overflow: hidden;
}
.lp2-featured-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lp2-featured-badge {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    background: var(--color-brand);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}
.lp2-featured-body {
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    flex: 1;
}
.lp2-featured-name {
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.lp2-featured-desc {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}
.lp2-featured-price {
    font-family: var(--ff-display);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-brand);
    margin-top: var(--s-2);
}
.lp2-featured-cta {
    margin-top: var(--s-10);
    text-align: center;
}
@media (min-width: 640px) {
    .lp2-featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .lp2-featured-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ====== 5. About the kitchen ====== */
.lp2-about {
    display: grid;
    grid-template-columns: 1fr;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: var(--s-16) var(--s-4);
    gap: var(--s-10);
    align-items: center;
}
.lp2-about-photo {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--bg-page-deep);
    box-shadow: var(--shadow-md);
}
.lp2-about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lp2-about-text { max-width: 540px; }
.lp2-about-body {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--text-secondary);
    margin: var(--s-4) 0 0;
}
@media (min-width: 900px) {
    .lp2-about {
        grid-template-columns: 1fr 1fr;
        gap: var(--s-12);
        padding: var(--s-16) var(--s-8);
    }
}


/* ====== 6. Kiosk callout ====== */
.lp2-kiosk {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--color-brand-dark);
    color: var(--text-inverse);
    overflow: hidden;
}
.lp2-kiosk-text {
    padding: var(--s-12) var(--s-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-3);
    max-width: 640px;
    margin: 0 auto;
}
.lp2-kiosk-body {
    color: var(--text-inverse-muted);
    line-height: 1.6;
    font-size: var(--fs-md);
    margin: 0;
}
.lp2-kiosk .lp2-btn { margin-top: var(--s-3); align-self: flex-start; }
.lp2-kiosk-photo {
    min-height: 280px;
    overflow: hidden;
}
.lp2-kiosk-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.9);
}
@media (min-width: 900px) {
    .lp2-kiosk {
        grid-template-columns: 1fr 1fr;
    }
    .lp2-kiosk-text { padding: var(--s-16) var(--s-12); }
    .lp2-kiosk-photo { min-height: 100%; }
}


/* ====== 7. Hours & visit ====== */
.lp2-hours {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-16) var(--s-4);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-8);
}
.lp2-hours-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    box-shadow: var(--shadow-sm);
}
.lp2-hours-list {
    margin-top: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.lp2-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--border);
}
.lp2-hours-row:last-child { border-bottom: 0; }
.lp2-hours-row.is-today {
    background: var(--bg-page-soft);
    margin: 0 calc(-1 * var(--s-3));
    padding: var(--s-3);
    border-radius: var(--r-sm);
    border-bottom: 0;
}
.lp2-hours-day {
    font-weight: 700;
    color: var(--text-primary);
    text-transform: capitalize;
}
.lp2-hours-time {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.lp2-hours-sep {
    color: var(--text-muted);
    margin: 0 0.3rem;
    font-style: italic;
}
.lp2-visit { padding: var(--s-4) 0; }
.lp2-visit-line {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: var(--s-3) 0 0;
}
.lp2-visit-line a { color: var(--color-brand); text-decoration: none; font-weight: 600; }
.lp2-visit-line a:hover { text-decoration: underline; }
@media (min-width: 768px) {
    .lp2-hours {
        grid-template-columns: 1.4fr 1fr;
        gap: var(--s-10);
    }
}