/* =================================================================
   GENERATEBLOCKS UTILITIES v3.0 — Figma-Aligned
   =================================================================
   Drop these class names into the GenerateBlocks "Additional CSS
   Class(es)" field to instantly apply editorial styling.
   ================================================================= */


/* ── ldn-hero-title ──
   Apply to: Headline blocks (H1, H2) over images.
   Effect: Large Inter bold, white text, strong shadow.
*/
.ldn-hero-title,
.ldn-hero-title a {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: #FFFFFF !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5) !important;
    text-decoration: none !important;
}

/* ── ldn-section-title ──
   Apply to: Section headings (H2, H3).
   Effect: Clean SemiBold Inter, black, tight spacing.
*/
.ldn-section-title {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-weight: 600 !important;
    color: #000000 !important;
    letter-spacing: -0.02em !important;
}

/* ── ldn-body-text ──
   Apply to: Paragraph blocks.
   Effect: Readable body text in medium gray.
*/
.ldn-body-text {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-weight: 400 !important;
    color: #444444 !important;
    line-height: 1.7 !important;
}

/* ── ldn-subtle-label ──
   Apply to: Category or meta labels.
   Effect: Small, widely-spaced, uppercase, medium gray.
*/
.ldn-subtle-label,
.ldn-subtle-label a {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #828282 !important;
    text-decoration: none !important;
}

/* ── ldn-card-clean ──
   Apply to: Container blocks acting as cards.
   Effect: No border, no shadow. Image + text, clean separation.
*/
.ldn-card-clean {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ── ldn-dark-overlay ──
   Apply to: Container blocks with a background image.
   Effect: Dark bottom gradient for text readability.
*/
.ldn-dark-overlay {
    position: relative;
}

.ldn-dark-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.25) 50%,
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
}

.ldn-dark-overlay > .gb-inside-container {
    position: relative;
    z-index: 1;
}

/* ── ldn-cta-black ──
   Apply to: Button blocks.
   Effect: Solid black pill button (Figma "Add to cart" style).
*/
.ldn-cta-black {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 32px !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    transition: background 0.25s !important;
}

.ldn-cta-black:hover {
    background: #444444 !important;
    color: #FFFFFF !important;
}

/* ── ldn-cta-outline ──
   Apply to: Secondary button blocks.
   Effect: Ghost button with black border.
*/
.ldn-cta-outline {
    background: transparent !important;
    color: #000000 !important;
    border: 1.5px solid #000000 !important;
    border-radius: 8px !important;
    padding: 16px 32px !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    transition: all 0.25s !important;
}

.ldn-cta-outline:hover {
    background: #000000 !important;
    color: #FFFFFF !important;
}

/* ── ldn-glass-badge ──
   Apply to: Category badges over hero images.
   Effect: Frosted white pill.
*/
.ldn-glass-badge {
    color: #000000 !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 6px 16px !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* ── ldn-white-text ──
   Apply to: Any text block that needs white treatment over images.
   Effect: Pure white, no shadow.
*/
.ldn-white-text,
.ldn-white-text a,
.ldn-white-text p,
.ldn-white-text h1,
.ldn-white-text h2,
.ldn-white-text h3 {
    color: #FFFFFF !important;
}