/* ============================================================
   AUDIODIMENSION — INTERNAL PAGE HERO
   Shared by Products and Technology
   Wave is generated by CSS as a true external bottom edge.
   ============================================================ */

.ad-page-hero {
    position: relative;
    width: 100%;
    min-height: 350px;
    margin: 0 !important;
    padding: 56px 0 88px;
    display: flex;
    align-items: center;
    background: #0c0914 !important;
    color: #ffffff;
    overflow: visible !important;
    isolation: isolate;
    z-index: 20;
}

/* ------------------------------------------------------------
   INNER
   ------------------------------------------------------------ */

.ad-page-hero-inner {
    position: relative;
    z-index: 5;
    width: min(1320px, calc(100% - 80px));
    margin: 0 auto !important;
}

.ad-page-hero-columns {
    width: 100%;
    margin: 0 !important;
    align-items: center !important;
    gap: clamp(48px, 7vw, 110px);
}

/* ------------------------------------------------------------
   COPY
   ------------------------------------------------------------ */

.ad-page-hero-copy {
    position: relative;
    z-index: 6;
    flex-basis: 68% !important;
}

.ad-page-hero-eyebrow {
    margin: 0 0 17px !important;
    color: #f2762b !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.ad-page-hero-title {
    max-width: 900px;
    margin: 0 0 20px !important;
    color: #ffffff !important;
    font-size: clamp(54px, 6vw, 88px);
    font-weight: 400;
    line-height: .94;
    letter-spacing: -.05em;
}

.ad-page-hero-subtitle {
    max-width: 650px;
    margin: 0 !important;
    color: rgba(255,255,255,.88) !important;
    font-size: clamp(17px, 1.4vw, 21px);
    font-weight: 300;
    line-height: 1.5;
}

/* ------------------------------------------------------------
   IMAGE — EDITABLE IN GUTENBERG
   ------------------------------------------------------------ */

.ad-page-hero-visual {
    position: relative;
    z-index: 6;
    flex-basis: 32% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
}

.ad-page-hero-image {
    width: 100%;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-page-hero-image img {
    display: block;
    width: auto;
    max-width: 190px;
    max-height: 230px;
    height: auto;
    margin: 0 auto !important;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.28));
    animation: ad-page-hero-float 6s ease-in-out infinite alternate;
}

/* ============================================================
   SUBTLE ORANGE SOUND LINES
   ============================================================ */

.ad-page-hero::before {
    content: "";
    position: absolute;
    top: 62px;
    right: -170px;
    z-index: 1;
    width: 520px;
    height: 140px;
    opacity: .38;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 220'%3E%3Cpath d='M0 110 C55 20 95 200 150 110 S245 20 300 110 S395 200 450 110 S545 20 600 110 S695 200 750 110 S845 20 900 110' fill='none' stroke='%23f2762b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    animation: ad-page-wave-one 10s linear infinite;
}

/* ============================================================
   TRUE BOTTOM EDGE
   shape-8.svg rotated 180°
   Entire SVG sits OUTSIDE the black rectangle.
   ============================================================ */

.ad-page-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -92px;
    z-index: 30;
    width: 100%;
    height: 96px;
    margin: 0;
    padding: 0;
    pointer-events: none;

    background-color: transparent;
    background-image: url("https://audiodimension.io/wp-content/uploads/2023/09/shape-8.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;

    transform: rotate(180deg);
    transform-origin: center center;
}

/* ============================================================
   NEXT SECTION — remove Gutenberg gap and pull content upward
   so the wave becomes the actual transition.
   ============================================================ */

.ad-page-hero + * {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

.ad-page-hero + .style-2,
.ad-page-hero + .style-3,
.ad-page-hero + .ad-product-page,
.ad-page-hero + .ad-product-section {
    position: relative !important;
    z-index: 1 !important;
}

/* Generic internal-page containers commonly used after the hero */
.ad-page-hero + .wp-block-group,
.ad-page-hero + .wp-block-columns,
.ad-page-hero + .ad-product-page,
.ad-page-hero + .ad-page-content {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes ad-page-hero-float {
    from { transform: translateY(0); }
    to   { transform: translateY(-7px); }
}

@keyframes ad-page-wave-one {
    0%   { transform: translateX(110px) scaleX(.86) scaleY(.78); opacity: 0; }
    18%  { opacity: .38; }
    55%  { transform: translateX(-250px) scaleX(1.05) scaleY(.52); opacity: .52; }
    100% { transform: translateX(-680px) scaleX(1.22) scaleY(.24); opacity: 0; }
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {
    .ad-page-hero {
        min-height: 320px;
        padding: 50px 0 78px;
    }

    .ad-page-hero-inner {
        width: calc(100% - 60px);
    }

    .ad-page-hero-columns {
        gap: 40px;
    }

    .ad-page-hero-image img {
        max-width: 165px;
        max-height: 205px;
    }

    .ad-page-hero::after {
        bottom: -72px;
        height: 76px;
    }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {
    .ad-page-hero {
        min-height: auto;
        padding: 52px 0 66px;
    }

    .ad-page-hero-inner {
        width: calc(100% - 40px);
    }

    .ad-page-hero-columns {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 28px !important;
    }

    .ad-page-hero-copy,
    .ad-page-hero-visual {
        width: 100%;
        flex-basis: 100% !important;
    }

    .ad-page-hero-eyebrow {
        margin-bottom: 13px !important;
        font-size: 10px;
    }

    .ad-page-hero-title {
        font-size: clamp(46px, 14vw, 66px);
    }

    .ad-page-hero-visual {
        justify-content: center !important;
    }

    .ad-page-hero-image img {
        max-width: 120px;
        max-height: 150px;
    }

    .ad-page-hero::before {
        display: none;
    }

    .ad-page-hero::after {
        bottom: -44px;
        height: 48px;
    }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .ad-page-hero-image img,
    .ad-page-hero::before {
        animation: none !important;
    }
}

/* ============================================================
   INTERNAL PAGE HERO — AUTHORITATIVE HORIZONTAL SAFE AREA
   hero-pages.css loads after pages.css.
   ============================================================ */

.ad-page-hero-inner {
    width: 100% !important;
    max-width: 1270px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 45px !important;
    padding-right: 45px !important;
    box-sizing: border-box !important;
}

@media (max-width: 1000px) {
    .ad-page-hero-inner {
        max-width: none !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

@media (max-width: 700px) {
    .ad-page-hero-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}