/* ===================================
   HOME-HUB.CSS
   Vlož do: assets/css/root/home-hub.css
   Nový "hub" dizajn hlavnej stránky:
   hero s fotkou, ikonky vlastností, karty (Menu/O nás/Galéria/Kontakt), pätička.
=================================== */

/* ===== LOGO (oficiálne logo, obrázok) ===== */
.nav-logo-img {
    display: flex;
    align-items: center;
}
.nav-logo-img .logo-img {
    height: 46px;
    width: auto;
    display: block;
}

@media (min-width: 560px) {
    .nav-logo-img .logo-img { height: 54px; }
}

/* ===== HERO V2 ===== */
.hero-v2 {
    position: relative;
    height: 78vh;
    min-height: 480px;
    max-height: 700px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.hero-v2-bg { position: absolute; inset: 0; }
.hero-v2-bg img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}

/* Mobile: nižšia hero sekcia = menší zoom fotky = logo sa zmestí do záberu,
   + posun výrezu mierne doľava, aby bolo logo vidno */
@media (max-width: 767px) {
    .hero-v2 {
        height: 58vh;
        min-height: 420px;
    }
    .hero-v2-bg img,
    #heroImg {
        object-position: 15% 10% !important;
    }
}

.hero-v2-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(39,23,9,0.05) 0%,
        rgba(30,17,6,0.35) 45%,
        rgba(20,11,4,0.88) 100%);
}
.hero-v2-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 28px 56px;
}
.hero-v2-title {
    font-family: var(--display);
    color: var(--white);
    font-weight: 700;
    font-size: clamp(2.4rem, 10vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.hero-v2-sub {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    color: rgba(246,239,227,0.9);
    font-size: 1.15rem;
    line-height: 1.5;
    margin-bottom: 26px;
    max-width: 340px;
}
.hero-v2-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ===== CREAM PANEL (prekrýva spodok hero) ===== */
.hub-panel {
    position: relative;
    background: var(--cream);
    border-radius: 28px 28px 0 0;
    margin-top: -28px;
    z-index: 3;
    padding: 40px 0 48px;
}

/* ===== FEATURE ICONS ROW (9 položiek: mriežka 3×3 na mobile, jeden riadok na desktope) ===== */
.feature-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0 0 36px;
    border-top: 1px solid rgba(184,136,42,0.18);
    border-left: 1px solid rgba(184,136,42,0.18);
}
.feature-item {
    text-align: center;
    padding: 14px 6px;
    border-right: 1px solid rgba(184,136,42,0.18);
    border-bottom: 1px solid rgba(184,136,42,0.18);
}
.feature-item .feature-icon {
    width: 40px; height: 40px;
    margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(184,136,42,0.4);
    color: var(--gold);
}
.feature-item .feature-icon svg { width: 20px; height: 20px; }
.feature-item span {
    display: block;
    font-family: var(--body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--brown);
    text-transform: uppercase;
    line-height: 1.25;
}

@media (min-width: 992px) {
    .feature-row {
        grid-template-columns: repeat(9, 1fr);
        max-width: 1080px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 44px;
    }
    .feature-item { padding: 16px 10px; }
}

/* ===== FEATURE CARDS GRID (2 columns, aj na mobile) ===== */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.feature-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.feature-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.feature-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--cream-warm);
}
.feature-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.feature-card-icon {
    position: absolute;
    top: 10px; left: 10px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(39,23,9,0.72);
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid rgba(255,255,255,0.85);
    color: var(--cream);
    backdrop-filter: blur(2px);
}
.feature-card-icon svg { width: 17px; height: 17px; }
.feature-card-body {
    padding: 20px 12px 14px;
    flex: 1 1 auto;
}
.feature-card-body h3 {
    font-family: var(--display);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--brown);
    margin-bottom: 6px;
    line-height: 1.2;
}
.feature-card-body p {
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0;
}
.quicklinks-more {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 4px 0 28px;
}
.quicklinks-more a {
    color: var(--gold);
    font-weight: 600;
    text-decoration: underline;
}

@media (min-width: 560px) {
    .feature-card-body h3 { font-size: 1.05rem; }
    .feature-card-body p { font-size: 0.8rem; }
}

@media (min-width: 992px) {
    .feature-cards { grid-template-columns: repeat(4, 1fr); max-width: 1080px; margin-left: auto; margin-right: auto; gap: 18px; }
    .feature-card-body { padding: 22px 16px 16px; }
}

/* ===== CTA BUTTON (full width) ===== */
.hub-cta-wrap { text-align: center; }
.hub-cta-wrap .btn { width: 100%; max-width: 420px; justify-content: center; }

/* ===== FOOTER V2 (kompaktná pätička) ===== */
.footer-v2 {
    background: var(--brown-deep);
    color: var(--cream);
    text-align: center;
    padding: 26px 24px;
}
.footer-v2-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.footer-v2-row a {
    color: var(--cream);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0.9;
    transition: var(--transition);
}
.footer-v2-row a:hover { opacity: 1; color: var(--gold-light); }
.footer-v2-row svg { width: 16px; height: 16px; flex: 0 0 auto; }
.footer-v2-row a.footer-address {
    align-items: flex-start;
    text-align: left;
}
.footer-v2-row a.footer-address svg { margin-top: 3px; }

.footer-legal {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(246,239,227,0.12);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.footer-legal-name {
    font-family: var(--display);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gold-light);
    margin-bottom: 8px;
}
.footer-legal p {
    font-size: 0.72rem;
    line-height: 1.6;
    color: rgba(246,239,227,0.55);
    margin: 0 0 3px;
}
.footer-legal a {
    color: rgba(246,239,227,0.7);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.footer-legal a:hover { color: var(--gold-light); }

.footer-v2-copy {
    margin-top: 14px;
    font-size: 0.72rem;
    color: rgba(246,239,227,0.5);
}

@media (min-width: 640px) {
    .hero-v2 { align-items: center; text-align: center; }
    .hero-v2-content { padding-bottom: 0; }
    .hero-v2-sub { max-width: 480px; margin-left: auto; margin-right: auto; }
    .feature-row { max-width: 640px; margin-left: auto; margin-right: auto; }
    .quicklinks { max-width: 640px; margin-left: auto; margin-right: auto; }
    .hub-cta-wrap .btn { max-width: 360px; }
}

@media (min-width: 992px) {
    .feature-row { max-width: 900px; }
    .quicklinks { max-width: 760px; }
}

/* ===================================
   PODSTRÁNKY (O nás, Menu, Záhradkárstvo, Mini ZOO, Pekáreň,
   Regionálny obchodník, Kariéra...) — jednotná šablóna
=================================== */
.page-hero {
    background: var(--brown);
    padding: 140px 0 60px;
    text-align: center;
    position: relative;
}
.page-hero .eyebrow { color: var(--gold-light); }
.page-hero h1 { color: var(--cream); }
.page-hero p { color: rgba(246,239,227,0.72); margin-top: 14px; font-size: 1.05rem; max-width: 560px; margin-left: auto; margin-right: auto; }

.page-body {
    position: relative;
    background: var(--white);
    border-radius: 28px 28px 0 0;
    margin-top: -28px;
    z-index: 2;
    padding: 48px 0 72px;
}

.page-photos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 36px;
}
.page-photos img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.page-photos .photo-wide {
    grid-column: 1 / -1;
    height: 280px;
}

.page-content h2 { margin-bottom: 18px; color: var(--brown); }
.page-content p { margin-bottom: 14px; color: var(--text-muted); }
.page-content p strong { color: var(--brown); font-weight: 700; }

/* ===== MENU PAGE: karta so stiahnutím PDF ===== */
.menu-card-big {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    background: var(--cream);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}
.menu-card-left { flex: 0 0 auto; width: 140px; }
.menu-card-left img { width: 100%; border-radius: var(--radius-md); display: block; box-shadow: var(--shadow-sm); }

@media (max-width: 480px) {
    .menu-card-big { justify-content: center; }
    .menu-card-left { margin: 0 auto; }
}
.menu-card-right { flex: 1 1 240px; min-width: 0; }
.menu-card-right h3 { font-family: var(--display); color: var(--brown); font-size: 1.2rem; margin-bottom: 8px; }
.menu-card-right p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin-bottom: 14px; }

@media (max-width: 480px) {
    .menu-card-right .btn {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        white-space: normal;
        text-align: center;
        padding: 14px 12px;
        font-size: 0.85rem;
    }
}

/* ===== MENU PAGE: highlight karty ===== */
.highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.highlight-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 20px 16px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.highlight-card .hl-icon { font-size: 1.8rem; margin-bottom: 10px; }
.highlight-card h4 { font-family: var(--display); color: var(--brown); font-size: 0.95rem; margin-bottom: 6px; }
.highlight-card p { color: var(--text-muted); font-size: 0.78rem; line-height: 1.4; margin: 0; }

@media (min-width: 768px) {
    .highlights-grid { grid-template-columns: repeat(4, 1fr); }
}

.page-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}
.page-back:hover { color: var(--gold); }

@media (min-width: 768px) {
    .page-photos { grid-template-columns: repeat(3, 1fr); }
    .page-photos .photo-wide { grid-column: auto; height: 220px; }
}

/* ===== KONTAKT: zarovnanie tlačidla "Otvoriť v Google Maps" s mapou na mobile ===== */
@media (max-width: 767px) {
    .map-cta {
        width: 100%;
        text-align: center;
    }
    .map-cta .btn {
        display: inline-flex;
        margin: 0 auto;
    }
}