/* ProCargo Hero - Next.js Exact Match
 * БЕЗ gradient overlay, точна відповідність page.tsx
 */

/* ========================================
   BASE HERO - h-[880px]
   ======================================== */
.procargo-hero {
    position: relative;
    height: 880px;
}

/* Background image container */
.procargo-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.procargo-hero-bg img {
    width: 100%;
    height: 880px;
    object-fit: cover;
    border-radius: 24px;
    margin: 0 auto;
}

/* ========================================
   CONTENT CONTAINER
   ======================================== */
.procargo-hero-container {
    max-width: 1400px; /* container mx-auto */
    margin: 0 auto;
    padding: 0 1rem; /* px-4 */
    padding-top: 10rem; /* pt-40 */
    position: relative;
    z-index: 20;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .procargo-hero-container {
        padding-left: 2.25rem; /* sm:px-9 */
        padding-right: 2.25rem;
    }
}

@media (min-width: 768px) {
    .procargo-hero-container {
        padding-bottom: 3rem; /* md:pb-12 */
    }
}

@media (min-width: 1024px) {
    .procargo-hero-container {
        justify-content: flex-end; /* lg:justify-end */
    }
}

/* ========================================
   CONTENT WRAPPER
   ======================================== */
.procargo-hero-content {
    max-width: 40rem; /* max-w-xl = 640px */
    text-align: center;
    margin-top: 5rem; /* mt-20 */
    flex-shrink: 0;
}

/* Reset WordPress/Elementor default margins on headings inside hero */
.procargo-hero-content h1,
.procargo-hero-content h2,
.procargo-hero-content p {
    margin-top: 0;
    padding: 0;
}

@media (min-width: 640px) {
    .procargo-hero-content {
        text-align: left; /* sm:text-left */
        margin-top: 10rem; /* sm:mt-40 */
    }
}

@media (min-width: 768px) {
    .procargo-hero-content {
        max-width: 879px; /* md:max-w-[879px] */
    }
}

/* On lg+, justify-end handles vertical positioning, use margin-top:auto */
@media (min-width: 1024px) {
    .procargo-hero-content {
        margin-top: auto;
        margin-bottom: 0;
    }
}

/* On xl+ (card visible), limit content width so CTA doesn't overlap the card */
@media (min-width: 1280px) {
    .procargo-hero-content {
        max-width: 55%; /* ~770px at 1400px container, leaves room for card */
    }
}

/* ========================================
   LOGO / PRO CARGO
   ======================================== */
.procargo-hero-logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem; /* text-5xl */
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0;
    line-height: 1.1;
}

@media (min-width: 640px) {
    .procargo-hero-logo {
        font-size: 4.5rem; /* sm:text-7xl */
    }
}

@media (min-width: 768px) {
    .procargo-hero-logo {
        font-size: 100px; /* md:text-[100px] */
    }
}

@media (min-width: 1024px) {
    .procargo-hero-logo {
        font-size: 120px; /* lg - reduced to avoid card overlap */
    }
}

/* ========================================
   TITLE
   ======================================== */
.procargo-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.25rem; /* mb-5 */
    text-transform: uppercase;
    line-height: 1.1;
}

@media (min-width: 640px) {
    .procargo-hero-title {
        font-size: 2.25rem; /* sm:text-4xl */
    }
}

@media (min-width: 768px) {
    .procargo-hero-title {
        font-size: 3.75rem; /* md:text-6xl */
    }
}

@media (min-width: 1024px) {
    .procargo-hero-title {
        font-size: 4.5rem; /* lg:text-7xl */
    }
}

/* ========================================
   CTA SECTION
   ======================================== */
.procargo-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 640px) {
    .procargo-hero-cta {
        flex-direction: row; /* sm:flex-row */
        align-items: flex-start; /* sm:items-start */
    }
}

/* Subtitle (description) */
.procargo-hero-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem; /* text-base */
    color: #ffffff;
    max-width: 435px;
    text-align: center;
    margin-bottom: 1rem; /* mb-4 */
}

@media (min-width: 640px) {
    .procargo-hero-subtitle {
        font-size: 1.125rem; /* sm:text-lg */
        text-align: left; /* sm:text-left */
        margin-bottom: 0; /* sm:mb-0 */
        margin-right: 1.25rem; /* sm:mr-5 */
    }
}

/* ========================================
   BUTTON
   ======================================== */
.procargo-btn-hero {
    font-family: 'Montserrat', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    color: #ffffff;
    text-decoration: none;
    border-radius: 0.75rem; /* rounded-xl */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s;
    background: linear-gradient(88deg, #5368B9 -25.12%, #5EC7F2 107.96%);
    border: 2px solid rgba(255, 255, 255, 0.4); /* border-white/40 border-2 */
    white-space: nowrap;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .procargo-btn-hero {
        width: auto; /* sm:w-auto */
        font-size: 1rem; /* sm:text-base */
    }
}

body.dark-theme .procargo-btn-hero {
    background: #374151; /* bg-gray-800 */
}

.procargo-btn-hero:hover {
    background: linear-gradient(88deg, #5EC7F2 -25.12%, #5368B9 107.96%);
}

body.dark-theme .procargo-btn-hero:hover {
    background: #4b5563; /* hover:bg-gray-900 */
}

.procargo-btn-icon {
    margin-left: 0.5rem; /* ml-2 */
    width: 1rem;
    height: 1rem;
}

/* ========================================
   LOGISTICS CARD
   ======================================== */
.procargo-hero-info-card {
    position: absolute;
    bottom: 3rem; /* bottom-12 */
    right: 2.25rem; /* right-9 */
    max-width: 340px; /* reduced from 429px */
    display: none;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
    z-index: 25;
}

@media (min-width: 1280px) {
    .procargo-hero-info-card {
        display: flex; /* xl:block */
    }
}

.procargo-hero-info-card-inner {
    display: flex;
    flex-direction: column;
    color: #ffffff;
    padding: 0.75rem; /* reduced */
    border-radius: 0.75rem; /* rounded-xl */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background: linear-gradient(88deg, rgba(255, 255, 255, 0.20) -3.03%, rgba(70, 177, 229, 0.20) 97.88%);
}

@media (min-width: 768px) {
    .procargo-hero-info-card-inner {
        padding: 1rem; /* md */
    }
}

.procargo-hero-info-header {
    display: flex;
    align-items: center;
    padding: 0.25rem 0;
    margin-bottom: 0.5rem;
}

.procargo-hero-info-header svg,
.procargo-hero-info-header img {
    width: 1rem;
    height: 1rem;
    margin-right: 0.375rem;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .procargo-hero-info-header svg,
    .procargo-hero-info-header img {
        width: 1.125rem;
        height: 1.125rem;
    }
}

.procargo-hero-info-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem; /* text-sm */
    font-weight: 700;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .procargo-hero-info-title {
        font-size: 1.125rem; /* md:text-lg */
    }
}

.procargo-hero-info-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem; /* reduced from text-xl */
    color: #5EC7F2; /* text-primary-blue from tailwind.config */
    margin-bottom: 0.25rem;
    font-weight: 600;
    text-transform: uppercase;
}

.procargo-hero-info-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem; /* ~13px, reduced from text-lg */
    color: #ffffff;
    line-height: 1.4;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 639px) {
    .procargo-hero {
        height: auto;
        min-height: 600px;
    }
    
    .procargo-hero-bg img {
        height: 100%;
        min-height: 600px;
    }
}