/* ============================================
   IJEE HOME HERO — FLUID / RESPONSIVE
   All spacing, font-size and element sizes scale
   continuously with viewport width via clamp().
   The tallest vertical elements (hero padding, logo
   circle, title) also mix in a small vh term, so a
   short desktop screen (e.g. 1280x720) gets a touch
   less than a tall one at the same width — without a
   hard breakpoint. Media queries below are used ONLY
   to restructure the layout (stacking/centering).
============================================ */

.ijee-home-hero{
    position:relative;
    overflow:hidden;
    background:#111827;

    /*padding-top:140px;*/
     padding-top:clamp(3.125rem,0.63rem + 3.45vw + 3vh,5.625rem);
    padding-right:clamp(1.25rem,0.85rem + 1.72vw,2.5rem);
    padding-left:clamp(1.25rem,0.85rem + 1.72vw,2.5rem);
    padding-bottom:clamp(3.125rem,0.63rem + 3.45vw + 3vh,5.625rem);
}

.ijee-home-hero__background{
    position:absolute;
    inset:0;
    background:url("../images/hero-bg.png") center center/cover no-repeat;
    opacity:.35;
}

.ijee-home-hero__container{
    padding:30px 0px;
    position:relative;
    z-index:2;
    width:100%;
    max-width:1450px;
    margin:auto;

    display:grid;
    grid-template-columns:2fr 1fr;
    align-items:flex-end;
    gap: clamp(1.5rem, 1.02rem + 2.07vw, 3rem);
}

/* LEFT SIDE (Logo + Content) */

.ijee-home-hero__info{
    display:flex;
    align-items:flex-end;
    gap: clamp(1.5rem, 0.87rem + 2.67vw, 3.4375rem);
    min-width:0;
}

/* Logo */

.ijee-home-hero__left{
    flex-shrink:0;
    overflow:hidden;

    width: clamp(10.625rem, 4.625rem + 11.2vw + 6vh, 18.75rem);
    height: clamp(10.625rem, 4.625rem + 11.2vw + 6vh, 18.75rem);
    aspect-ratio: 1 / 1;

    background:#fff;
    border-radius:50%;

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

    padding: clamp(1.5625rem, 0.41rem + 2.15vw + 1.15vh, 3.125rem);
}

.ijee-home-hero__logo{
    width:100%;
    max-width: clamp(8.75rem, 5.06rem + 6.89vw + 3.69vh, 13.75rem);
    height:auto;
}

/* Content */

.ijee-home-hero__content{
    flex:1;
    min-width:0;
    text-align:center;
}

.ijee-home-hero__badge{
    display:inline-block;
    padding:
        clamp(0.4375rem, 0.42rem + 0.09vw, 0.5rem)
        clamp(1rem, 0.92rem + 0.34vw, 1.25rem);
    border-radius:30px;
    background:#324f92;
    color:#fff;
    font-size: clamp(0.8125rem, 0.77rem + 0.17vw, 0.9375rem);
    margin-bottom:20px;
}

.ijee-home-hero__title{
    color:#fff;
    /*font-size: clamp(1.75rem, 0.18rem + 3.1vw + 1.5vh, 4rem);*/
    font-size: clamp(1.125rem, -0.445rem + 3.1vw + 1.5vh, 3.375rem);
    line-height:1.15;
    font-weight:700;
    margin-bottom:20px;
    word-break: break-word;
}

.ijee-home-hero__issn{
    color:#7dd3fc;
    font-size: clamp(1.125rem, 1.04rem + 0.34vw, 1.375rem);
    font-weight:600;
    margin-bottom:25px;
}

.ijee-home-hero__description{
    color:#d1d5db;
    line-height:1.8;
    font-size: clamp(1rem, 0.96rem + 0.17vw, 1.125rem);
}

/* Buttons */

.ijee-home-hero__buttons{
    margin-top:35px;
    display:flex;
    gap: clamp(0.75rem, 0.59rem + 0.69vw, 1.25rem);
    flex-wrap:wrap;
    justify-content:center;
}

.ijee-home-hero__button{
    text-decoration:none;
    padding:
        clamp(0.75rem, 0.71rem + 0.17vw, 0.875rem)
        clamp(1.5rem, 1.34rem + 0.69vw, 2rem);
    border-radius:50px;
    transition:.3s;
    font-weight:600;
    white-space:nowrap;
}

.ijee-home-hero__button--primary{
    background:#6366f1;
    color:#fff;
}

.ijee-home-hero__button--primary:hover{
    background:#4f46e5;
}

.ijee-home-hero__button--secondary{
    color:#fff;
    border:2px solid #fff;
}

.ijee-home-hero__button--secondary:hover{
    background:#fff;
    color:#111827;
}

/* RIGHT */

.ijee-home-hero__right{
    display:flex;
    justify-content:center;
    min-width:0;
}

.ijee-home-hero__wrapper {
  width: 100%;
  max-width: clamp(9rem, 8.3rem + 2.8vw, 11rem);
  box-shadow: 0 5px 18px rgba(255, 255, 255, .45);
  border-radius: 10px;
}


.ijee-home-hero__logo {
    transition: transform 0.2s ease;
}

.ijee-home-hero__left a:hover .ijee-home-hero__logo {
    transform: scale(1.05);
}


/* ============================================
   Top-right floating controls (search / theme / user)
   — replaces the old inline style block in the .tpl
============================================ */

.ijee-hero-controls{
    position:absolute;
    top: clamp(0.75rem, 0.39rem + 1.55vw, 1.875rem);
    right: clamp(0.75rem, 0.19rem + 2.41vw, 2.5rem);
    z-index:9999;

    display:flex;
    align-items:center;
    gap: clamp(0.5rem, 0.34rem + 0.69vw, 1rem);

    background:#fff;
    padding:
        clamp(0.5rem, 0.42rem + 0.34vw, 0.75rem)
        clamp(0.75rem, 0.59rem + 0.69vw, 1.25rem);
    border-radius:9999px;
    box-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* ============================================
   Layout restructuring only — no sizing values here.
   These are the only things that genuinely need a
   hard breakpoint (grid columns / stack direction).
============================================ */

@media (max-width:1200px){

    .ijee-home-hero__container{
        grid-template-columns:1fr;
    }

    .ijee-home-hero__info{
        justify-content:center;
    }

}

@media (max-width:900px){

    .ijee-home-hero__info{
        flex-direction:column;
        text-align:center;
        align-items:center;
    }

    .ijee-home-hero__content{
        text-align:center;
    }

    .ijee-home-hero__buttons{
        justify-content:center;
    }

}

@media (max-width:600px){

    .ijee-home-hero__button{
        width:100%;
        max-width:320px;
        text-align:center;
    }

    .ijee-hero-controls{
        gap: clamp(0.375rem, 0.31rem + 0.34vw, 0.5rem);
    }

}