/* =========================================================
   main.css – animations, responsive fine-tuning,
   utilities cho Ha Giang Motorventures child theme
   ========================================================= */

/* ---------- Smooth reveal on scroll ---------- */
@keyframes hg-fade-up {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hg-section .hg-tour-card,
.hg-section .hg-tribe__card,
.hg-section .hg-feedback__card,
.hg-section .hg-value,
.hg-story__row {
    animation: hg-fade-up .8s ease both;
}
.hg-section .hg-tour-card:nth-child(2)    { animation-delay: .08s; }
.hg-section .hg-tour-card:nth-child(3)    { animation-delay: .16s; }
.hg-section .hg-tour-card:nth-child(4)    { animation-delay: .24s; }
.hg-section .hg-tour-card:nth-child(5)    { animation-delay: .32s; }
.hg-section .hg-tour-card:nth-child(6)    { animation-delay: .40s; }

/* ---------- Hero parallax-like ---------- */
.hg-hero__bg {
    transition: transform 30s ease-out;
}
.hg-hero:hover .hg-hero__bg {
    transform: scale(1.12);
}

/* ---------- Decoration: orange underline accent ---------- */
.hg-section__head h2 {
    position: relative;
    display: inline-block;
}
.hg-section__head h2::after {
    content:"";
    display: block;
    width: 64px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 999px;
    margin: 14px auto 0;
}

/* ---------- Tour card ribbon corner ---------- */
.hg-tour-card__media::before {
    content:"";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.45));
    z-index: 1;
    pointer-events: none;
}
.hg-tour-card__tag { z-index: 2; }

/* ---------- Tribe card text shadow ---------- */
.hg-tribe__card .meta strong { text-shadow: 0 2px 6px rgba(0,0,0,.5); }

/* ---------- Story row decorative number ---------- */
.hg-story__row {
    position: relative;
}
.hg-story__row::before {
    content: counter(story);
    counter-increment: story;
    position: absolute;
    top: -40px;
    left: -10px;
    font-family: var(--font-display);
    font-size: 8rem;
    color: var(--color-primary);
    opacity: .08;
    line-height: 1;
    z-index: 0;
}
.hg-story { counter-reset: story; }

/* ---------- Booking sidebar mobile ---------- */
@media(max-width:992px){
    .hg-booking { position: static; margin-top: 32px; }
    .hg-tour-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .hg-tour-tabs a { white-space: nowrap; }
    .hg-tour-body > .hg-tour-main { order: 1; }
    .hg-tour-body > .hg-booking   { order: 2; }
}

/* ---------- Print/safety: long words break ---------- */
.hg-tour-card__title,
.hg-tour-card__excerpt,
.hg-feedback__text { overflow-wrap: anywhere; }

/* ---------- Footer logo invert ---------- */
.hg-footer .hg-header__logo img { max-width: 180px; }

/* ---------- Skip link / accessibility ---------- */
.hg-skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    background:#000;
    color:#fff;
    padding: 8px 14px;
    border-radius: 6px;
    z-index: 1000;
}
.hg-skip-link:focus { left: 8px; }

/* ---------- Loader for slider ---------- */
.hg-skeleton {
    background: linear-gradient(90deg, #f0ece4 25%, #faf6ee 50%, #f0ece4 75%);
    background-size: 200% 100%;
    animation: hg-shimmer 1.4s infinite;
    border-radius: 8px;
}
@keyframes hg-shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* ---------- Mobile menu overlay ---------- */
.hg-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
    z-index: 55;
}
.hg-overlay.is-open { opacity:1; pointer-events:auto; }

/* ---------- Checkout: ad-info hiển thị theo chiều dọc ---------- */
/* Mặc định theme gốc xếp label/value ngang (flex space-between).
   Override để label nằm trên, value nằm dưới. */
.st-checkout-page .cart-info .info-section ul li.ad-info ul li,
.page-template-template-checkout-packages-new .cart-info .info-section ul li.ad-info ul li {
    flex-direction: column !important;
    align-items: flex-start;
    gap: 2px;
}
.st-checkout-page .cart-info .info-section ul li.ad-info ul li .label,
.st-checkout-page .cart-info .info-section ul li.ad-info ul li .value,
.st-checkout-page .cart-info .info-section ul li.ad-info ul li span.label,
.st-checkout-page .cart-info .info-section ul li.ad-info ul li span.value,
.page-template-template-checkout-packages-new .cart-info .info-section ul li.ad-info ul li .label,
.page-template-template-checkout-packages-new .cart-info .info-section ul li.ad-info ul li .value {
    width: 100% !important;
}