/* =========================================================
   Aurex Cargo AU — HOME page styles (demo2)
   Depends on aurex-common.css (tokens, sections, buttons, animation base).
   ========================================================= */

/* ---------------------- HERO ---------------------- */
.hero {
    /* Grow with content instead of a fixed height so long copy never overflows;
       padding-top reserves space for the fixed header (~118px) so the H1 can't
       slide under it when content is taller than the viewport (laptops < 1920px). */
    min-height: max(640px, 88vh);
    box-sizing: border-box;
    padding: 130px 20px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: safe center; /* on overflow, align to top (safe) instead of clipping the H1 */
    text-align: center;
    color: #fff;
    overflow: hidden;
    background: var(--blue-deep);
}
.hero::before {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    background: url('../images/aurex/hero-pallet-loader.jpg') center 30% / cover no-repeat;
}
/* Slideshow ảnh nền Hero (ảnh Slider admin > Hero Background). Ẩn ảnh fallback khi có slide DB. */
.hero.has-slides::before { display: none; }
.hero > .hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
    position: absolute; inset: 0;
    background-position: center 30%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(3,40,54,.70) 0%, rgba(3,40,54,.52) 35%, rgba(3,40,54,.62) 100%);
}
.hero > * { position: relative; z-index: 2; }
.hero h1 {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 600;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin: 0 0 18px;
    text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.hero .hero-positioning {
    max-width: 860px;
    margin: 0 auto 16px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.9vw, 1.4rem);
    letter-spacing: 1px;
    line-height: 1.4;
    color: rgba(255,255,255,.94);
    text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.hero .hero-positioning span { color: var(--gold); font-weight: 500; }
.hero .hero-sub {
    max-width: 660px;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.7;
    margin: 0 auto;
    color: rgba(255,255,255,.82);
    text-shadow: 0 1px 10px rgba(0,0,0,.45);
}

/* Hero CTAs */
.hero-cta {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 14px; margin: 34px auto 0;
}
.hero-cta .btn { margin: 0; }
.hero-cta .btn + .btn { margin-left: 0; }

@media (max-width: 767px) {
    /* flow from top so the tall hero never clips the H1 under the header */
    .hero { height: auto; min-height: auto; justify-content: flex-start; padding: 118px 18px 54px; }
    .hero-cta { flex-direction: column; align-items: center; width: 100%; }
    .hero-cta .btn { width: 100%; max-width: 340px; text-align: center; }
}

/* Fast navigator */
.fast-nav-label {
    display: flex; align-items: center; justify-content: center;
    gap: 22px; margin: 50px auto 28px; width: min(720px, 80%);
}
.fast-nav-label span {
    font-family: 'Oswald', sans-serif; text-transform: uppercase;
    letter-spacing: 3px; font-size: 14px; font-weight: 300; color: #fff;
}
.fast-nav-label .line { flex: 1; height: 1px; background: rgba(255,255,255,.5); }

.fast-nav {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 30px; width: min(1000px, 92%); margin: 0 auto;
}
.fast-nav a {
    flex: 1 1 0; min-width: 150px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    color: #fff; transition: transform .25s ease, color .25s ease;
}
.fast-nav a i { font-size: 34px; transition: color .25s ease; }
.fast-nav a span {
    font-family: 'Oswald', sans-serif; text-transform: uppercase;
    letter-spacing: 1.5px; font-size: 13px; font-weight: 400; line-height: 1.4;
}
.fast-nav a:hover { transform: translateY(-4px); color: var(--gold-bright); }

.hero-scroll { margin-top: 32px; color: #fff; font-size: 26px; animation: bounce 2s infinite; }

@media (max-width: 991px) {
    .fast-nav a { flex: 1 1 40%; min-width: 120px; }
}

/* ---------------- Services hover tiles (9) ---------------- */
.svc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.svc-tile2 {
    position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: 4px; background: var(--blue-deep);
}
.svc-tile2 img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s ease; }
.svc-tile2::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(3,40,54,.05) 0%, rgba(3,40,54,.5) 55%, rgba(3,40,54,.9) 100%);
    transition: background .35s ease;
}
.svc-tile2:hover img { transform: scale(1.07); }
.svc-tile2:hover::after { background: linear-gradient(180deg, rgba(3,40,54,.45) 0%, rgba(3,40,54,.75) 45%, rgba(3,40,54,.95) 100%); }

.svc-tile2 .t-body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; }
.svc-tile2 .t-name {
    color: #fff; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px;
    font-size: 18px; font-weight: 600; line-height: 1.25;
    padding-bottom: 8px; border-bottom: 2px solid var(--gold); align-self: flex-start;
}
.svc-tile2 .t-desc {
    color: rgba(255,255,255,.88); font-size: 13px; line-height: 1.6;
    max-height: 0; opacity: 0; overflow: hidden; margin: 0;
    transition: max-height .4s ease, opacity .35s ease, margin-top .35s ease;
}
.svc-tile2 .t-more {
    color: var(--gold); font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px;
    font-size: 12px; max-height: 0; opacity: 0; overflow: hidden; margin: 0;
    transition: max-height .35s ease, opacity .35s ease, margin-top .35s ease;
}
.svc-tile2:hover .t-desc { max-height: 120px; opacity: 1; margin-top: 12px; }
.svc-tile2:hover .t-more { max-height: 30px; opacity: 1; margin-top: 10px; }

@media (max-width: 991px) {
    .svc-tiles { grid-template-columns: repeat(2, 1fr); }
    /* No hover on touch: reveal desc + link by default */
    .svc-tile2 .t-desc { max-height: 120px; opacity: 1; margin-top: 12px; }
    .svc-tile2 .t-more { max-height: 30px; opacity: 1; margin-top: 10px; }
    .svc-tile2::after { background: linear-gradient(180deg, rgba(3,40,54,.35) 0%, rgba(3,40,54,.75) 45%, rgba(3,40,54,.95) 100%); }
}
@media (max-width: 575px) { .svc-tiles { grid-template-columns: 1fr; } }

/* (Why Choose Us cards moved to aurex-common.css — shared by Home + About) */

/* (Flight Network map styles moved to aurex-common.css — shared by Home + Airline detail) */

/* Stat chips under the map */
.fn-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 64px; margin-top: 36px; }
.fn-stat { text-align: center; }
.fn-num { display: block; font-family: 'Oswald', sans-serif; font-size: 42px; font-weight: 600; color: var(--blue); line-height: 1; }
.fn-cap { display: block; margin-top: 7px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); }

@media (max-width: 640px) {
    .fn-stats { gap: 18px 40px; }
    .fn-num { font-size: 34px; }
}

/* ---------------- Industries We Serve ---------------- */
.industries .ind-head { max-width: 720px; margin: 0 auto; }
.industries .ind-head .lead { color: var(--gray); margin-top: 8px; }
.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.ind-card {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 30px 18px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ind-card:hover { transform: translateY(-6px); box-shadow: 0 18px 38px -20px rgba(3,40,54,.4); border-color: transparent; }
.ind-ico {
    width: 60px; height: 60px; border-radius: 50%;
    display: grid; place-items: center;
    background: #eaf1f4; color: var(--blue); font-size: 24px;
    transition: background .35s ease, color .35s ease, transform .35s ease;
}
.ind-card:hover .ind-ico { background: var(--blue-deep); color: var(--gold); transform: translateY(-2px); }
.ind-card span {
    font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .5px;
    font-size: 14px; font-weight: 500; color: var(--blue-deep); line-height: 1.3;
}
@media (max-width: 900px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- Hero entrance animation ---------------- */
.anim .hero > * { opacity: 0; animation: fadeUp .8s ease forwards; }
.anim .hero h1               { animation-delay: .15s; }
.anim .hero .hero-positioning{ animation-delay: .28s; }
.anim .hero .hero-sub        { animation-delay: .40s; }
.anim .hero .hero-cta        { animation-delay: .54s; }
.anim .hero .fast-nav-label  { animation-delay: .68s; }
.anim .hero .fast-nav        { animation-delay: .80s; }
.anim .hero .hero-scroll     { animation-delay: .94s; }

.anim .hero::before {
    animation: kenburns 26s ease-in-out infinite alternate;
    transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    .anim .hero > * { opacity: 1 !important; animation: none !important; }
    .anim .hero::before { animation: none !important; }
}