/* ============================================================
   home.css — Home page specific styles
   Loaded in addition to site.css on index.php only.
============================================================ */

/* ============================================================
   HERO SECTION
   Full viewport height, background image with parallax via
   background-attachment:fixed. The Main Page Title Logo is
   centered. Logo overflow from header sits over top of this.
============================================================ */
#hero
{
    position:   relative;
    width:      100%;
    min-height: 100vh;
    display:    flex;
    align-items: center;
    justify-content: center;
    overflow:   hidden;

    /* Counteract the #main-content padding-top so hero fills
       from behind the header, not below the logo overflow */
    margin-top: calc(-1 * var(--logo-overflow));
}

/* Parallax background layer */
.hero-bg
{
    position:            absolute;
    inset:               0;
    background-image:    url('/assets/images/hero-bg.png');
    background-size:     cover;
    background-position: center center;
    background-attachment: fixed;
    z-index:             0;
}

/* Subtle dark vignette so text reads well */
.hero-bg::after
{
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(
                    to bottom,
                    rgba(0,0,0,0.15) 0%,
                    rgba(0,0,0,0.05) 40%,
                    rgba(0,0,0,0.25) 100%
                );
}

.hero-content
{
    position:        relative;
    z-index:         1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             2rem;
    padding:         8rem 1rem 4rem; /* top padding clears the logo overhang */
    text-align:      center;
    width:           100%;
}

/* Main Page Title Logo.png — the big "DAKOTA POINT BREWING" wordmark */
.hero-title-logo
{
    max-width:  min(780px, 90vw);
    width:      100%;
    height:     auto;
    filter:     drop-shadow(0 4px 24px rgba(0,0,0,0.5));
}

/* "SEE WHAT'S BREWING" CTA button
   Matches Wix original: white border, transparent bg,
   white text, Jockey One font */
.btn-cta
{
    display:        inline-block;
    border:         2px solid #ffffff;
    color:          #ffffff;
    background:     transparent;
    font-family:    var(--font-display);
    font-size:      1.1rem;
    letter-spacing: 0.12em;
    padding:        0.65rem 2rem;
    transition:     background-color 0.4s ease, color 0.4s ease;
    white-space:    nowrap;
}

.btn-cta:hover
{
    background-color: rgba(255,255,255,0.15);
    color:            #ffffff;
}

/* Scroll-down chevron */
.hero-scroll-down
{
    display:    block;
    color:      rgba(255,255,255,0.8);
    width:      40px;
    transition: color 0.3s ease, transform 0.3s ease;
    animation:  bounce 2s ease-in-out infinite;
}

.hero-scroll-down:hover
{
    color:     #ffffff;
    transform: translateY(4px);
}

.hero-scroll-down svg
{
    width:  40px;
    height: auto;
}

@keyframes bounce
{
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}


/* ============================================================
   BREWERY SECTION
   Two-column: left text, right parallax photo.
   Background is dark olive (--col-bg).
============================================================ */
#brewery
{
    background-color: var(--col-bg);
}

.brewery-inner
{
    display:   grid;
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
}

.brewery-text
{
    padding:    4rem 3rem 4rem 2rem;
    max-width:  560px;
    justify-self: end;
}

.brewery-text h2
{
    font-family:    var(--font-display);
    font-size:      clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: 0.06em;
    color:          var(--col-body-text);
    margin-bottom:  1.5rem;
    text-transform: uppercase;
}

.brewery-text p
{
    font-size:     0.95rem;
    font-weight:   700;
    line-height:   1.7;
    color:         var(--col-body-text);
    margin-bottom: 1rem;
}

.brewery-text p:last-child
{
    margin-bottom: 0;
}

/* Right column: parallax photo */
.brewery-photo
{
    position: relative;
    overflow: hidden;
    min-height: 420px;
}

.brewery-photo-parallax
{
    position:              absolute;
    inset:                 -60px 0;    /* extend top/bottom for parallax travel */
    background-size:       cover;
    background-position:   center center;
    background-attachment: fixed;
}


/* ============================================================
   MERCH BANNER
   Full-width strip with text left, image right.
   Dark background matching the site palette.
============================================================ */
#merch-banner
{
    background-color: var(--col-bg-header);
    background-image: linear-gradient(var(--col-bg-header-tint), var(--col-bg-header-tint));
    padding:          2rem 0;
}

.merch-banner-inner
{
    max-width:   var(--site-width);
    margin:      0 auto;
    padding:     0 1rem;
    display:     flex;
    align-items: center;
    gap:         2rem;
}

.merch-text
{
    flex: 1;
}

.merch-eyebrow
{
    font-family:    var(--font-display);
    font-size:      1rem;
    color:          var(--col-nav-text);
    letter-spacing: 0.15em;
    margin-bottom:  0.25rem;
}

.merch-headline
{
    font-family:    var(--font-display);
    font-size:      0.9rem;
    letter-spacing: 0.1em;
    color:          var(--col-body-text);
    margin-bottom:  0.25rem;
}

.merch-product
{
    font-family:    var(--font-display);
    font-size:      clamp(1.2rem, 3vw, 1.8rem);
    letter-spacing: 0.08em;
    color:          var(--col-body-text);
    margin-bottom:  0.5rem;
}

.merch-link
{
    font-family:    var(--font-nav);
    font-size:      1.1rem;
    color:          var(--col-nav-text);
    text-decoration: underline;
    transition:     color 0.3s ease;
}

.merch-link:hover { color: var(--col-nav-hover); }

.merch-image
{
    flex-shrink: 0;
    max-width:   50%;
}

.merch-image img
{
    width:     100%;
    height:    auto;
    max-width: 500px;
}


/* ============================================================
   FEATURED BREWS SECTION
============================================================ */
#featured-brews
{
    background-color: var(--col-bg);
    padding:          4rem 1rem;
}

.featured-brews-inner
{
    max-width: var(--site-width);
    margin:    0 auto;
}

.section-heading
{
    font-family:    var(--font-display);
    font-size:      clamp(1.4rem, 3vw, 2rem);
    letter-spacing: 0.1em;
    color:          var(--col-body-text);
    text-align:     center;
    margin-bottom:  0.5rem;
}

.section-rule
{
    border:           none;
    border-top:       1px solid var(--col-gold);
    max-width:        600px;
    margin:           0 auto 3rem;
}

/* Beer grid: 4 columns on wide screens */
.brew-grid
{
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   2rem 1.5rem;
    margin-bottom:         3rem;
}

.brew-card
{
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
}

/* Beer image container.
   Fixed height box — all cards the same height regardless of
   image orientation. Images scale DOWN to fit (max-width/height:100%)
   but never scale UP past their natural size. object-fit:contain
   keeps the whole image visible with no cropping.
   The dark background fills empty space for landscape images. */
.brew-card-image
{
    width:            100%;
    height:           280px;
    margin-bottom:    1rem;
    background-color: rgba(0, 0, 0, 0.25);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    overflow:         hidden;
}

.brew-card-image img
{
    max-width:  100%;
    max-height: 100%;
    width:      auto;
    height:     auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.brew-card:hover .brew-card-image img
{
    transform: scale(1.04);
}

.brew-card-body
{
    flex: 1;
}

/* Horizontal rule between image and text — matches Wix card separator */
.brew-card-body::before
{
    content:       '';
    display:       block;
    border-top:    1px solid var(--col-gold);
    margin-bottom: 0.75rem;
}

.brew-name
{
    font-family:    var(--font-display);
    font-size:      1rem;
    letter-spacing: 0.05em;
    color:          var(--col-body-text);
    margin-bottom:  0.25rem;
    text-transform: uppercase;
    line-height:    1.2;
}

.brew-award
{
    font-family:    var(--font-nav);
    font-size:      0.85rem;
    color:          var(--col-nav-text);
    margin-bottom:  0.25rem;
    line-height:    1.3;
}

.brew-meta
{
    font-size:      0.75rem;
    letter-spacing: 0.08em;
    color:          var(--col-gold);
    text-transform: uppercase;
    margin-bottom:  0.2rem;
}

.brew-stats
{
    font-size:     0.8rem;
    color:         var(--col-gold);
    margin-bottom: 0.6rem;
    letter-spacing: 0.03em;
}

.brew-description
{
    font-size:   0.8rem;
    color:       var(--col-muted);
    line-height: 1.6;
}

/* CTA below the grid */
.featured-brews-cta
{
    text-align: center;
}

.btn-outline
{
    display:        inline-block;
    border:         2px solid var(--col-nav-text);
    color:          var(--col-nav-text);
    background:     transparent;
    font-family:    var(--font-display);
    font-size:      1rem;
    letter-spacing: 0.12em;
    padding:        0.65rem 2.5rem;
    transition:     background-color 0.4s ease, color 0.4s ease;
}

.btn-outline:hover
{
    background-color: var(--col-nav-text);
    color:            var(--col-bg);
}


/* ============================================================
   SOCIAL STRIP
============================================================ */
#social-strip
{
    background-color: var(--col-bg-header);
    background-image: linear-gradient(var(--col-bg-header-tint), var(--col-bg-header-tint));
    padding:          2.5rem 1rem;
}

.social-strip-inner
{
    max-width:       var(--site-width);
    margin:          0 auto;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             1rem;
}

.social-tagline
{
    font-family:    var(--font-nav);
    font-size:      2rem;
    color:          var(--col-nav-text);
    letter-spacing: 0.01em;
}

.social-links
{
    display:     flex;
    align-items: center;
    gap:         1.5rem;
}

.social-links a
{
    opacity:    1;
    transition: opacity 0.3s ease;
}

.social-links a:hover { opacity: 0.7; }

.social-links img
{
    width:      40px;
    height:     40px;
    object-fit: cover;
}


/* ============================================================
   Responsive
============================================================ */
@media (max-width: 900px)
{
    .brew-grid
    {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px)
{
    .brewery-inner
    {
        grid-template-columns: 1fr;
    }

    .brewery-text
    {
        padding:   2.5rem 1.5rem;
        max-width: none;
        justify-self: auto;
    }

    .brewery-photo
    {
        min-height: 280px;
    }

    .merch-banner-inner
    {
        flex-direction: column;
        text-align:     center;
    }

    .merch-image
    {
        max-width: 100%;
    }

    .brew-grid
    {
        grid-template-columns: 1fr;
        max-width:             360px;
        margin-left:           auto;
        margin-right:          auto;
    }

    /* Fixed parallax doesn't work well on mobile — fall back to scroll */
    .hero-bg,
    .brewery-photo-parallax
    {
        background-attachment: scroll;
    }
}