@charset "UTF-8";
/* CSS Document */

/* ==========================================================
   HLOHOVECKÉ VÍNO
   STYLE.CSS
   Mobile First
========================================================== */

/* ---------- ROOT ---------- */

:root {

    /* Colors */
    --color-primary: #17351F;
    --color-secondary: #F5F3EE;
    --color-accent: #C9A227;

    --color-text: #1F1F1F;
    --color-white: #FFFFFF;
    --color-border: rgba(23,53,31,.12);

    --section-odd: #FFFFFF;
    --section-even: #F7F5F1;

    /* Typography */
    --font-heading: "Cormorant Garamond", serif;
    --font-body: "Inter", sans-serif;

    /* Layout */
    --container-width: 1280px;
    --container-padding: 24px;

    --header-height: 72px;
    --section-spacing: 96px;

    --radius: 20px;

    /* Transition */
    --transition: .35s ease;

}

/* ---------- RESET ---------- */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:var(--font-body);
    color:var(--color-text);
    background:var(--color-white);

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;

    overflow-x:hidden;

}

img{
    display:block;
    width:100%;
    height:auto;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    font-family:inherit;
}

/* ---------- TYPOGRAPHY ---------- */

h1,h2,h3,h4,h5,h6{

    font-family:var(--font-heading);
    font-weight:600;
    line-height:1.05;
    letter-spacing:-0.02em;
    color:var(--color-white);

}

h2{
    color:var(--color-primary);
	font-size: clamp(2.4rem, 10vw, 3.2rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
}

p{

    font-family:var(--font-body);
    line-height:1.8;
    font-size:1rem;
    color:var(--color-text);

}
.cap{
   text-transform: uppercase;
	 margin-bottom: 24px;
}

/* ---------- UTILITIES ---------- */

.container{

    width:100%;
    max-width:var(--container-width);

    margin-inline:auto;
    padding-inline:var(--container-padding);

}

.section{

    padding-block:var(--section-spacing);

}

.section:nth-of-type(odd){
    background:var(--section-odd);
}

.section:nth-of-type(even){
    background:var(--section-even);
}

.section-title{

    text-align:center;
    margin-bottom:56px;
    font-size: clamp(2.8rem, 6vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 500;
    text-transform: uppercase;

}
/* ==========================================================
   HEADER
========================================================== */

.header{

    position:fixed;
    inset:0 0 auto 0;

    height:var(--header-height);

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:999;

    transition:
    background .35s ease,
    backdrop-filter .35s ease;

}

.header.scrolled{

    background:rgba(23,53,31,.96);
    backdrop-filter:blur(14px);

}
.header__logo{
    color: var(--color-white);
    display:flex;
    align-items:center;
    justify-content:center;
}

.header__logo svg{
    height:34px;
    width:auto;
    display:block;
}
.header__logo img{

    height:40px;
    width:auto;

}

/* ==========================================================
   HERO
========================================================== */

.hero{

    position:relative;

    height:100svh;
    min-height:680px;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    background-image: url("../images/hero_image.webp");
    background-size:cover;
    background-position:center;

    overflow:hidden;

}

.hero__overlay{
	
	background:
        linear-gradient(
            to top,
            rgba(0,0,0,.30) 0%,
            rgba(0,0,0,.12) 20%,
            rgba(0,0,0,0) 45%
        );

    position:absolute;
    inset:0;

    background:transparent;

    pointer-events:none;

}

.hero__content{

    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
	 transform: translateY(-6vh);

}

.hero h1{
    font-size: clamp(3rem, 13vw, 4.8rem);
    line-height: 0.92;
    letter-spacing: -0.03em;
    max-width: none;
	font-weight: 400;
}

.hero p{
 color:rgba(255,255,255,.92);

    max-width:620px;

    font-size:1.05rem;
    line-height:1.9;

}

.hero__scroll{

    position:absolute;
    bottom:36px;
    left:50%;

    transform:translateX(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;

    color:var(--color-white);

    font-size:.85rem;
    letter-spacing:.15em;
    text-transform:uppercase;

    transition:opacity var(--transition);

}

.hero__scroll:hover{
    opacity:.65;
}

.hero__scroll svg{
    width:22px;
    height:38px;
}

.hero__event{

    margin-top:20px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 24px;

    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;

    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);

    color:rgba(255,255,255,.95);

    font-size:.78rem;
    font-weight:500;

    letter-spacing:.24em;
    text-transform:uppercase;

    transition:all .3s ease;

}

.hero__event:hover{

    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.45);

    transform:translateY(-2px);

}

/* ==========================================================
   INTRO SECTION
========================================================== */

.intro__grid{

    display:grid;
    gap:40px;

}

.intro__heading h2{
    font-size: clamp(2.4rem, 10vw, 3.4rem);
    line-height: .95;
    letter-spacing: -0.02em;
    font-weight: 500;
    text-transform: uppercase;
}

.intro__divider{

    display:flex;
    justify-content:center;
    align-items:center;

}

.intro__divider span{

    width:120px;
    height:1px;

    background:var(--color-accent);

}

.intro__text{
    max-width:640px;
}
/* ==========================================================
   CONTENT SECTIONS
========================================================== */

.content__grid{

    display:grid;
    gap:48px;
    align-items:center;

}

.content__text{

    display:flex;
    flex-direction:column;
    gap:24px;

}

.content__text h2{
ont-size: clamp(3.8rem, 6vw, 5.8rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 500;
    text-transform: uppercase;

}

.content__image{

    border-radius:var(--radius);
    overflow:hidden;

}

.content__image img{

    aspect-ratio:4/5;
    object-fit:cover;

}
/* ==========================================================
   WINERIES
========================================================== */

.wineries__grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.winery{

    display:flex;
    align-items:center;
    justify-content:center;

   height: 92px;
    padding: 10px;

    background:var(--color-white);
    border-radius:18px;

    transition:transform .25s ease;
	cursor: pointer;
	 overflow:hidden;   /* NOVÉ */

}
.winery:hover img{
    transform:scale(1.55);
}
.winery img{
    max-width: 100%;
    max-height: 72px;
    width: auto;
    height: auto;

    object-fit:contain;

    transform:scale(1.45);   /* NOVÉ */
    transition:transform .25s ease;
}

/* ==========================================================
   FOOTER
========================================================== */

.footer{

    background:var(--color-primary);
    color:rgba(255,255,255,.9);

}

.footer p{

    color:rgba(255,255,255,.85);
    font-size:.95rem;

}

.footer__grid{

    min-height:var(--header-height);

    display:grid;
    gap:12px;

    align-items:center;
    text-align:center;

    padding-block:24px;

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce){

    html{
        scroll-behavior:auto;
    }

    *{
        transition:none !important;
    }

}