/**
 * Homepage Specific Styles
 * Hero section, Latest Articles, CTA improvements
 * 
 * @package MadePrompt
 */

/* ==========================================
   HOMEPAGE HERO SECTION
   ========================================== */

.homepage-hero-section {
    width: 100%;
    margin: 0 0 var(--section-gap) 0;
    padding-top: 0;
}

.homepage-hero-container {
    width: 100%;
}

.homepage-hero-content {
    background: rgba(var(--glass-rgb), 0.5);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: none;
    border-radius: var(--box-border-radius);
    padding: var(--box-padding-desktop);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.homepage-hero-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%);
    pointer-events: none;
}

.homepage-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 1.5rem 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.homepage-hero-description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
    margin: 0 0 3rem 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.homepage-hero-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.homepage-hero-btn {
    padding: 1.25rem 3rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    display: inline-block;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Same family as the other two hero buttons, not a different species: dark glass with a coloured
   edge. This one is simply the brightest, a white edge and a white glow, which is what makes it
   read as the lead. The old treatment was a solid white fill with black text, and next to two
   outlined buttons that reads as a disabled control rather than the primary one. */
.homepage-hero-btn-primary {
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: var(--ink, #ededf2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.homepage-hero-btn-primary:hover {
    background: rgba(var(--glass-hover-rgb), 0.75);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
}

body.brightness-light .homepage-hero-btn-primary {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.55);
    color: #15151a;
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.12);
}

.homepage-hero-btn-secondary {
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.homepage-hero-btn-secondary:hover {
    background: rgba(var(--glass-hover-rgb), 0.75);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
}

/* The secondary button had a hard dark background and no light-theme variant at all, so on the
   light theme it stayed a grey slab with pale text on it. It went unnoticed while every hero
   button looked the same; the moment one of them became the lead it read as broken.
   The two tool buttons carry their accent here instead of in a style attribute, which is what
   lets the light theme swap them for darker tones that survive a white background. */
.hero-btn-i2p { position: relative; border-color: rgba(47, 189, 133, 0.6); color: #5fe3a4; }
.hero-btn-gf  { position: relative; border-color: rgba(255, 90, 158, 0.6); color: #ff9cc4; }
.hero-btn-i2p:hover { border-color: rgba(47, 189, 133, 0.9); }
.hero-btn-gf:hover  { border-color: rgba(255, 90, 158, 0.9); }

body.brightness-light .homepage-hero-btn-secondary {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(0, 0, 0, 0.14);
    color: #15151a;
}

body.brightness-light .homepage-hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.26);
}

body.brightness-light .hero-btn-i2p { border-color: rgba(12, 136, 90, 0.55); color: #0c885a; }
body.brightness-light .hero-btn-gf  { border-color: rgba(194, 24, 91, 0.55); color: #c2185b; }
body.brightness-light .hero-btn-i2p:hover { border-color: rgba(12, 136, 90, 0.85); }
body.brightness-light .hero-btn-gf:hover  { border-color: rgba(194, 24, 91, 0.85); }

/* ==========================================
   BRANDS VIEW ALL BUTTON
   ========================================== */

.brands-view-all-container {
    text-align: center;
    margin-top: var(--section-gap);
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.brands-view-all-btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    color: #ffffff;
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.brands-view-all-btn:hover {
    background: rgba(var(--glass-hover-rgb), 0.75);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 1024px) {
    .latest-articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .homepage-hero-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .homepage-hero-section {
        margin-bottom: var(--section-gap-mobile);
    }
    
    .homepage-hero-content {
        padding: var(--box-padding-mobile);
        border-radius: var(--box-border-radius-mobile);
    }
    
    .homepage-hero-title {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }
    
    .homepage-hero-description {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }
    
    .homepage-hero-cta {
        flex-direction: column;
        gap: 1rem;
    }
    
    .homepage-hero-btn {
        width: 100%;
        max-width: 300px;
        padding: 1rem 2rem;
    }
    
    .brands-view-all-container {
        margin-top: var(--section-gap-mobile);
        padding-top: 1.5rem;
    }
}

/* ==========================================
   ABOUT SECTION (SEO) - Collapsible
   Box informativo in fondo alla homepage
   ========================================== */

.homepage-about-section {
    width: 100%;
    margin: var(--section-gap) 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.homepage-about-box {
    width: 100%;
    max-width: 100%;
    padding: var(--box-padding-desktop);
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--box-border-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.homepage-about-title {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    margin: 0 0 1.5rem 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Content - Collapsible */
.homepage-about-content {
    margin: 0;
    position: relative;
    max-height: 300px;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.homepage-about-content.expanded {
    max-height: 5000px;
}

.homepage-about-content-inner {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.8;
}

.homepage-about-content p {
    margin-bottom: 1rem;
}

.homepage-about-content h2,
.homepage-about-content h3 {
    color: #ffffff;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.homepage-about-content ul,
.homepage-about-content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.homepage-about-content li {
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
}

.homepage-about-content strong {
    color: #ffffff;
    font-weight: 700;
}

.homepage-about-content a {
    color: var(--prose-link);
    text-decoration: underline;
    text-decoration-color: var(--prose-line);
    text-underline-offset: 3px;
}

.homepage-about-content a:hover {
    text-decoration-color: currentColor;
}

/* Toggle Button */
.homepage-about-toggle-container {
    text-align: center;
    margin-top: 1.5rem;
}

.homepage-about-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.3s ease;
}

.homepage-about-toggle-btn:hover {
    background: rgba(var(--glass-hover-rgb), 0.75);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.about-toggle-icon {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

/* Mobile */
@media (max-width: 768px) {
    .homepage-about-section {
        margin: var(--section-gap-mobile) 0 0 0;
    }
    
    .homepage-about-box {
        padding: var(--box-padding-mobile);
        border-radius: var(--box-border-radius-mobile);
    }
    
    .homepage-about-title {
        font-size: 1.5rem;
        letter-spacing: 1.5px;
        margin-bottom: 1.25rem;
    }
    
    .homepage-about-content {
        max-height: 250px;
    }
    
    .homepage-about-content-inner {
        font-size: 0.95rem;
        line-height: 1.7;
    }
    
    .homepage-about-toggle-btn {
        padding: 0.65rem 1.5rem;
        font-size: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   HOMEPAGE HERO: the four tools as tiles (live 2026-10-07)
   A's shape (equal tiles, icon on top) with C's line under each name. One row
   of four on desktop, 2x2 from 900px down. Same glass, edges and colours as the
   hero buttons and the menu: generator neutral (the brightest edge, it is the
   lead), i2p green, girlfriend pink, shorts blue.
   -------------------------------------------------------------------------- */
.homepage-hero-cta.hero-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1000px; margin: 0 auto; }
.hero-tool {
    --tc: 255, 255, 255; --tx: #ededf2;
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 20px 16px 18px; border-radius: 14px; text-decoration: none;
    background: rgba(var(--glass-rgb), .6); border: 1px solid rgba(var(--tc), .42);
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.hero-tool:hover { transform: translateY(-3px); border-color: rgba(var(--tc), .9); background: rgba(var(--tc), .07); }
.hero-tool:focus-visible { border-radius: 14px; }
.ht-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--tx);
    background: rgba(var(--tc), .14); border: 1px solid rgba(var(--tc), .28); }
.ht-ic svg { width: 20px; height: 20px; display: block; }
.ht-t { font-size: .95rem; font-weight: 700; line-height: 1.25; letter-spacing: 1px; text-transform: uppercase; color: var(--tx); }
.ht-d { font-size: .82rem; line-height: 1.45; color: rgba(255, 255, 255, .68); }
.ht-gen { border-color: rgba(255, 255, 255, .6); }
.ht-i2p { --tc: 47, 189, 133; --tx: #5fe3a4; }
.ht-gf { --tc: 255, 90, 158; --tx: #ff9cc4; }
.ht-shorts { --tc: 77, 141, 255; --tx: #8db8ff; }
@media (max-width: 900px) {
    .homepage-hero-cta.hero-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 520px; }
}
@media (max-width: 768px) {
    .hero-tool { padding: 15px 10px 14px; gap: 6px; }
    .ht-ic { width: 34px; height: 34px; border-radius: 10px; }
    .ht-ic svg { width: 18px; height: 18px; }
    .ht-t { font-size: .8rem; letter-spacing: .8px; }
    .ht-d { font-size: .74rem; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) { .hero-tool { transition: none; } .hero-tool:hover { transform: none; } }

/* Every tool tile the same height, on desktop and on the 2x2 mobile grid; icon, name and line start
   at the same height in each tile (owner, 2026-10-07). */
.homepage-hero-cta.hero-tools { align-items: stretch; grid-auto-rows: 1fr; }
.hero-tools .hero-tool { height: 100%; justify-content: flex-start; }