/**
 * Okruh Hero Component
 * Univerzálny hero banner pre všetky okruhy
 *
 * @package Srz_Rada
 */

/* ========================================
   Base Hero Styles
   ======================================== */
.okruh-hero {
    padding: 12px 24px;
    position: relative;
    overflow: hidden;
}

.okruh-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}

.okruh-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}

.okruh-hero-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.okruh-hero-content {
    color: white;
    display: flex;
    align-items: center;
    gap: 40px;
    flex: 1;
}

.okruh-hero-text {
    flex: 1;
}

.okruh-hero-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin: 0 0 6px 0;
    line-height: 1.2;
    color: white;
}

.okruh-hero-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
    color: white;
}

.okruh-hero-logo {
    flex-shrink: 0;
    height: 100px;
    display: flex;
    align-items: center;
}

.okruh-hero-logo img {
    height: 100%;
    width: auto;
}

/* ========================================
   Okruh: Ústredné orgány (#FF9800)
   ======================================== */
.okruh-hero--ustredne-organy {
    background: linear-gradient(135deg, #FFA726 0%, #FF9800 50%, #E65100 100%);
}

.okruh-hero--ustredne-organy::after {
    background: rgba(230, 81, 0, 0.15);
}

/* ========================================
   Okruh: Odbory SRZ (#1EAACE)
   ======================================== */
.okruh-hero--odbory {
    background: linear-gradient(135deg, #4DD0E1 0%, #1EAACE 50%, #0097A7 100%);
}

.okruh-hero--odbory::after {
    background: rgba(0, 151, 167, 0.15);
}

/* ========================================
   Okruh: SRZ v médiách (#0693E3)
   ======================================== */
.okruh-hero--srz-v-mediach {
    background: linear-gradient(135deg, #29B6F6 0%, #0693E3 50%, #0277BD 100%);
}

.okruh-hero--srz-v-mediach::after {
    background: rgba(2, 119, 189, 0.15);
}

/* ========================================
   Okruh: Primárny (#018763)
   ======================================== */
.okruh-hero--primarny {
    background: linear-gradient(135deg, #26A69A 0%, #018763 50%, #00695C 100%);
}

.okruh-hero--primarny::after {
    background: rgba(0, 105, 92, 0.15);
}

/* ========================================
   Okruh: Právo a legislatíva (#CF2E2E)
   ======================================== */
.okruh-hero--legislativa {
    background: linear-gradient(135deg, #EF5350 0%, #CF2E2E 50%, #B71C1C 100%);
}

.okruh-hero--legislativa::after {
    background: rgba(183, 28, 28, 0.15);
}

/* ========================================
   Okruh: Detský (#e3651c)
   ======================================== */
.okruh-hero--detsky {
    background: linear-gradient(135deg, #FF8A50 0%, #e3651c 50%, #BF360C 100%);
}

.okruh-hero--detsky::after {
    background: rgba(191, 54, 12, 0.15);
}

/* ========================================
   Okruh: Kontakty (#1e1e1e)
   ======================================== */
.okruh-hero--contacts {
    background: linear-gradient(135deg, #424242 0%, #1e1e1e 50%, #000000 100%);
}

.okruh-hero--contacts::after {
    background: rgba(0, 0, 0, 0.15);
}

/* ========================================
   Okruh: Verejné obstarávanie (#7BDCB5)
   ======================================== */
.okruh-hero--verejne-obstaravanie {
    background: linear-gradient(135deg, #A5E8D7 0%, #7BDCB5 50%, #4DB6AC 100%);
}

.okruh-hero--verejne-obstaravanie::after {
    background: rgba(77, 182, 172, 0.15);
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
    .okruh-hero {
        padding: 16px;
    }

    .okruh-hero-inner {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .okruh-hero-content {
        flex-direction: column;
        gap: 16px;
    }

    .okruh-hero-logo {
        height: 80px;
    }

    .okruh-hero-title {
        font-size: 1.5rem;
    }
}