/**
 * Redline Studio - section styles (additive to frontend.css)
 *
 * Standalone routed pages (body.rl-page) plus the section types added
 * in v0.6: product meta, text blocks, contact form, standalone map.
 */

/* ---------- standalone page base ---------- */

body.rl-page {
    margin: 0;
    background: var(--rl-bg, #050505);
    color: var(--rl-text, #f4f4f4);
    font-family: var(--rl-font-body, 'Inter', sans-serif);
    -webkit-font-smoothing: antialiased;
}

/* ---------- shared section heading ---------- */

.rl-section-heading {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 32px 0;
    font-family: var(--rl-font-display, 'Rajdhani', sans-serif);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rl-text, #f4f4f4);
}

/* ---------- hero without map (single column) ---------- */

.rl-hero-nomap .rl-hero-inner {
    grid-template-columns: 1fr;
    padding-top: 56px;
    padding-bottom: 24px;
}

.rl-hero-nomap .rl-hero-headline {
    max-width: 900px;
}

/* ---------- standalone map section ---------- */

.rl-map-section {
    padding: 8px 0 16px;
}

.rl-map-standalone {
    max-width: 1200px;
    margin: 16px auto 0;
    padding: 0 32px;
    box-sizing: border-box;
}

/* ---------- product grid extras ---------- */

.rl-products-inner {
    align-items: stretch;
}

.rl-product {
    min-height: 260px;
}

.rl-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
}

.rl-product-price {
    font-family: var(--rl-font-display, 'Rajdhani', sans-serif);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--rl-accent, #e63946);
    text-transform: uppercase;
}

.rl-product-stock {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rl-text-muted, #9a9a9a);
    border: 1px solid var(--rl-border, #262626);
    border-radius: 999px;
    padding: 3px 10px;
    background: color-mix(in srgb, var(--rl-bg, #050505) 60%, transparent);
}

.rl-product-long {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--rl-text-muted, #bdbdbd);
    max-width: 640px;
}

.rl-product-long ul,
.rl-product-long ol {
    padding-left: 18px;
    margin: 8px 0;
}

.rl-product-long p {
    margin: 8px 0;
}

/* ---------- text block ---------- */

.rl-text-block {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px;
}

.rl-text-body {
    max-width: 760px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--rl-text-muted, #cfcfcf);
}

.rl-text-body a {
    color: var(--rl-accent, #e63946);
    text-decoration: none;
}

.rl-text-body a:hover {
    text-decoration: underline;
}

.rl-text-body h3,
.rl-text-body h4 {
    font-family: var(--rl-font-display, 'Rajdhani', sans-serif);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rl-text, #f4f4f4);
    margin: 20px 0 8px;
}

/* ---------- contact ---------- */

.rl-contact {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 32px 72px;
}

.rl-contact-intro {
    max-width: 640px;
    color: var(--rl-text-muted, #bdbdbd);
    font-size: 15px;
    line-height: 1.6;
    margin: 12px 0 0;
}

.rl-contact-form {
    margin-top: 28px;
    max-width: 640px;
    display: grid;
    gap: 18px;
}

.rl-contact-form label {
    display: grid;
    gap: 7px;
    font-family: var(--rl-font-display, 'Rajdhani', sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rl-text-muted, #9a9a9a);
}

.rl-contact-form input,
.rl-contact-form textarea {
    font-family: var(--rl-font-body, 'Inter', sans-serif);
    font-size: 15px;
    color: var(--rl-text, #f4f4f4);
    background: var(--rl-bg-card, #101010);
    border: 1px solid var(--rl-border, #2a2a2a);
    border-radius: calc(var(--rl-radius-card, 10px) * 0.6);
    padding: 12px 14px;
    outline: none;
    transition: border-color 120ms;
    resize: vertical;
}

.rl-contact-form input:focus,
.rl-contact-form textarea:focus {
    border-color: var(--rl-accent, #e63946);
}

.rl-contact-form button {
    justify-self: start;
}

/* Honeypot: visually gone, still in the DOM for bots to fill. */
.rl-contact-form .rl-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rl-contact-success {
    margin-top: 28px;
    max-width: 640px;
    padding: 18px 22px;
    border: 1px solid var(--rl-accent, #e63946);
    border-radius: var(--rl-radius-card, 10px);
    background: color-mix(in srgb, var(--rl-accent, #e63946) 12%, transparent);
    color: var(--rl-text, #f4f4f4);
    font-size: 15px;
}

/* ---------- footer tagline ---------- */

.rl-footer-tagline {
    font-size: 13px;
    color: var(--rl-text-muted, #8a8a8a);
    letter-spacing: 0.04em;
}