/* WelcomeSign — shared styles for SEO landing pages
 * (e.g. /vacation-rental-tv-display/, /welcome-tv-screen/).
 * Builds on common.css; only adds the section styles these pages need.
 * All landing pages live in a subdirectory, so they reference assets with
 * root-absolute paths (/css/..., /logo-512.png, etc.).
 */

/* Breadcrumb */
.lp-breadcrumb {
    max-width: 1000px;
    margin: 0 auto;
    padding: 5.5rem 2rem 0;
    font-size: 0.85rem;
}
.lp-breadcrumb a { color: var(--text-light); text-decoration: none; }
.lp-breadcrumb a:hover { color: var(--orange); }
.lp-breadcrumb span { color: var(--text-light); }

/* Hero */
.lp-hero {
    padding: 4rem 2rem 5rem;
    background: var(--navy-dark) url('/hero-room.webp') center / cover no-repeat;
    color: white;
    position: relative;
    text-align: center;
}
.lp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 30, 51, 0.80) 0%, rgba(30, 30, 46, 0.62) 50%, rgba(15, 30, 51, 0.80) 100%);
}
.lp-hero-inner { position: relative; max-width: 820px; margin: 0 auto; }
.lp-hero h1 {
    font-size: 2.75rem;
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.lp-hero h1 span { color: var(--orange); }
.lp-hero p.lp-lead {
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    opacity: 0.96;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.lp-hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* Generic section */
.lp-section { padding: 4.5rem 2rem; }
.lp-section.alt { background: var(--cream); }
.lp-section.white { background: white; }
.lp-section .section-container { max-width: 1000px; }
.lp-center { text-align: center; }
.lp-center .section-subtitle { margin-left: auto; margin-right: auto; }

/* Prose */
.lp-prose { max-width: 760px; }
.lp-prose p { color: var(--text); font-size: 1.05rem; margin-bottom: 1.25rem; }
.lp-prose a { color: var(--orange); font-weight: 600; text-decoration: none; }
.lp-prose a:hover { text-decoration: underline; }

/* Showcase image */
.lp-showcase {
    margin: 2.5rem auto 0;
    max-width: 860px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}
.lp-showcase img { width: 100%; display: block; }

/* Feature grid */
.lp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.lp-card {
    background: white;
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 1.75rem;
    transition: all 0.3s;
}
.lp-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.lp-card h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.5rem;
}
.lp-card p { color: var(--text-light); font-size: 0.95rem; margin: 0; }

/* Steps */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.lp-step {
    background: white;
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 1.75rem;
}
.lp-step-num {
    width: 42px;
    height: 42px;
    background: var(--orange);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', 'DM Sans', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}
.lp-step h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.4rem;
}
.lp-step p { color: var(--text-light); font-size: 0.95rem; margin: 0; }

/* FAQ (always visible — content is crawlable without JS) */
.lp-faq { max-width: 800px; display: flex; flex-direction: column; gap: 1rem; }
.lp-faq-item {
    background: white;
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
}
.lp-faq-item h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.5rem;
}
.lp-faq-item p { color: var(--text-light); margin: 0; }

/* Platform note */
.lp-platform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 2.5rem auto 0;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    border-radius: 12px;
    color: white;
    max-width: 700px;
}
.lp-platform a { color: var(--orange); text-decoration: none; font-weight: 600; }
.lp-platform a:hover { text-decoration: underline; }

/* Related internal links */
.lp-related { padding: 3.5rem 2rem; background: var(--navy); color: white; }
.lp-related .section-title { color: white; text-align: center; }
.lp-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    max-width: 900px;
    margin: 2rem auto 0;
}
.lp-related-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    transition: all 0.3s;
    display: block;
}
.lp-related-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.lp-related-card strong {
    display: block;
    color: white;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}
.lp-related-card span { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; }

/* CTA */
.lp-cta { padding: 4.5rem 2rem; background: white; text-align: center; }
.lp-cta-box {
    max-width: 620px;
    margin: 0 auto;
    background: var(--cream);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 3rem 2rem;
}
.lp-cta-box h2 { font-size: 2rem; color: var(--navy); margin-bottom: 1rem; }
.lp-cta-box p { color: var(--text-light); margin-bottom: 2rem; }

@media (max-width: 768px) {
    .lp-breadcrumb { padding-top: 5rem; }
    .lp-hero { padding: 3rem 1.5rem 4rem; }
    .lp-hero h1 { font-size: 2rem; }
    .lp-hero-cta { flex-direction: column; align-items: center; }
    .lp-platform { flex-direction: column; text-align: center; }
}