/* ===================================================
   Shared CTA Component
   Reusable pill-shaped button with sliding arrow on hover.
   =================================================== */

/* ---------------------------------------------------
   Layout model
   The wrapper is a positioning context with a fixed
   width (its natural width at rest = just the label).
   The arrow pill sits absolutely on the right edge,
   hidden BEHIND the label. On hover the wrapper reserves
   space on the right for the arrow (padding-right), which
   compacts the label, and the arrow rolls into that space.
   --------------------------------------------------- */

/* Arrow track width per size. Overridden by size variants below. */
.dv-cta {
    --dv-cta-arrow-size: 46px;
    /* Horizontal gap between the label and the revealed arrow. */
    --dv-cta-arrow-gap: 0px;
}

/* Base CTA wrapper */
.dv-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    /* Auto-size to each label with NO reserved empty space at rest: the
       wrapper hugs the label. On hover, border-box + padding-right opens the
       arrow slot by eating INTO the wrapper's (now-fixed) width, so the label
       compacts instead of the wrapper growing. The wrapper width is held
       steady because max-content is computed from the label, whose own
       padding shrinks by the same amount the wrapper padding grows. */
    box-sizing: border-box;
    width: max-content;
    padding-right: 0;
    transition: padding-right 0.6s ease;
}

.dv-cta:hover {
    text-decoration: none;
    /* Open the slot the arrow rolls into. */
    padding-right: calc(var(--dv-cta-arrow-size) + var(--dv-cta-arrow-gap));
}

/* CTA label (the pill with text) */
.dv-cta__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Fill whatever space the wrapper leaves after reserving the arrow. */
    flex: 1 1 auto;
    min-width: 0;
    /* Stack above the arrow so the arrow is hidden behind this pill at rest
       and appears to emerge from behind it as it rolls out. */
    position: relative;
    z-index: 1;
    font-family: polymath-display, sans-serif;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 29px;
    color: #ffffff;
    padding: 10px 40px;
    font-size: 1rem;
    font-weight: 300;
    transition: background 0.6s ease, padding 0.6s ease;
}

.dv-cta:hover .dv-cta__label {
    background: rgba(0, 0, 0, 0.55);
    /* Shrink horizontal padding as the arrow rolls out. The total horizontal
       padding lost here (2 x (40 - 17) = 46px = arrow size) exactly matches the
       wrapper's new padding-right, so the wrapper width stays constant. The
       17px left when collapsed keeps the compacted label looking balanced. */
    padding-left: 17px;
    padding-right: 17px;
}

/* CTA arrow (the separate pill that rolls out on hover) */
.dv-cta__arrow {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: calc(var(--dv-cta-arrow-size) / -2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dv-cta-arrow-size);
    height: var(--dv-cta-arrow-size);
    opacity: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 29px;
    color: #ffffff;
    flex-shrink: 0;
    /* Sit behind the label (which is z-index: 1) so the arrow emerges from
       behind the text pill as it rolls out. */
    z-index: 0;
    /* At rest: tucked in behind the label AND rotated back so that, as it
       translates right, unrolling the rotation makes it look like a wheel
       rolling into place. */
    transform: translateX(calc(-1 * (var(--dv-cta-arrow-size) + var(--dv-cta-arrow-gap)))) rotate(-80deg);
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.dv-cta:hover .dv-cta__arrow {
    opacity: 1;
    /* Roll out to the right into the space the wrapper just reserved,
       unrolling the rotation to 0 as it goes. */
    transform: translateX(0) rotate(0deg);
}

/* ===================================================
   Arrow Icon
   The arrow is rendered from a white PNG via CSS mask so it can be
   tinted with the theme color (currentColor): white on the light/dark/
   primary themes, primary color on the outline theme. The inline <svg>
   in the markup is hidden and replaced by this masked pseudo-element.
   =================================================== */

.dv-cta__arrow svg {
    display: none;
}

.dv-cta__arrow::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform 0.6s ease;
}

/* ===================================================
   Arrow Direction Variants
   =================================================== */

/* Top-right arrow (default): up-arrow image rotated slightly to point diagonally */
.dv-cta__arrow--top-right::after {
    -webkit-mask-image: url("https://gig.mx/images/icon-cta-arrow.png");
    mask-image: url("https://gig.mx/images/icon-cta-arrow.png");
    transform: rotate(45deg);
}

/* Right arrow (horizontal) */
.dv-cta__arrow--right::after {
    -webkit-mask-image: url("https://gig.mx/images/icon-cta-arrow-right.png");
    mask-image: url("https://gig.mx/images/icon-cta-arrow-right.png");
}

/* Down arrow */
.dv-cta__arrow--down::after {
    -webkit-mask-image: url("https://gig.mx/images/icon-cta-arrow-bottom.png");
    mask-image: url("https://gig.mx/images/icon-cta-arrow-bottom.png");
}

/* ===================================================
   Theme Variants
   =================================================== */

/* Light theme (for dark backgrounds - default) */
.dv-cta--light .dv-cta__label {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255);
    color: #ffffff;
}

.dv-cta--light:hover .dv-cta__label {
    background: rgba(0, 0, 0, 0.55);
}

.dv-cta--light .dv-cta__arrow {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255);
    color: #ffffff;
}

/* Dark theme (for light backgrounds) */
.dv-cta--dark .dv-cta__label {
    background: #1e1e2f;
    border-color: #1e1e2f;
    color: #ffffff;
}

.dv-cta--dark:hover .dv-cta__label {
    background: #2c2c42;
}

.dv-cta--dark .dv-cta__arrow {
    background: #1e1e2f;
    border-color: #1e1e2f;
    color: #ffffff;
}

/* Outline theme (white bg, primary color border/text/icon) */
.dv-cta--outline .dv-cta__label {
    background: #ffffff;
    border: 1.5px solid var(--color-primary, #4a2c2a);
    color: var(--color-primary, #4a2c2a);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.dv-cta--outline:hover .dv-cta__label {
    background: #f5f5f7;
}

.dv-cta--outline .dv-cta__arrow {
    background: #ffffff;
    border: 1.5px solid var(--color-primary, #4a2c2a);
    color: var(--color-primary, #4a2c2a);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Primary theme (primary color bg, white text/icon) */
.dv-cta--primary .dv-cta__label {
    background: var(--color-primary, #4a2c2a);
    border: 1.5px solid var(--color-primary, #4a2c2a);
    color: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.dv-cta--primary:hover .dv-cta__label {
    background: var(--color-primary-dark, #3a1f1e);
}

.dv-cta--primary .dv-cta__arrow {
    background: var(--color-primary, #4a2c2a);
    border: 1.5px solid var(--color-primary, #4a2c2a);
    color: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ===================================================
   Size Variants
   =================================================== */

/* Small: arrow 32px, so the label must give back 32px total horizontal
   padding on hover (16px per side): 20px -> 4px. */
.dv-cta--sm {
    --dv-cta-arrow-size: 32px;
}

.dv-cta--sm .dv-cta__label {
    padding: 8px 34px;
    font-size: 1rem;
}

/* Give back 32px total (16px per side): 34px -> 18px. */
.dv-cta--sm:hover .dv-cta__label {
    padding-left: 18px;
    padding-right: 18px;
}

/* Large: arrow 46px, so the label must give back 46px total horizontal
   padding on hover (23px per side): 36px -> 13px. */
.dv-cta--lg {
    --dv-cta-arrow-size: 46px;
}

.dv-cta--lg .dv-cta__label {
    padding: 14px 40px;
    font-size: 1rem;
}

/* Give back 46px total (23px per side): 40px -> 17px. */
.dv-cta--lg:hover .dv-cta__label {
    padding-left: 17px;
    padding-right: 17px;
}

/* ===================================================
   Full-width (mobile)
   =================================================== */
.dv-cta--block {
    width: 100%;
    justify-content: center;
}

.dv-cta--block .dv-cta__label {
    width: 100%;
    justify-content: center;
}

/* ===================================================
   Disable hover animation on mobile / touch
   On smaller screens there is no hover, so keep the CTA static:
   no sliding arrow, no padding shift, no transitions.
   =================================================== */
@media (max-width: 991px) {
    .dv-cta,
    .dv-cta__label,
    .dv-cta__arrow,
    .dv-cta__arrow::after {
        transition: none;
    }

    .dv-cta:hover {
        padding-right: 0;
    }

    .dv-cta:hover .dv-cta__label {
        padding-left: 40px;
        padding-right: 40px;
    }

    .dv-cta:hover .dv-cta__arrow {
        opacity: 0;
        transform: translateX(calc(-1 * (var(--dv-cta-arrow-size) + var(--dv-cta-arrow-gap)))) rotate(-80deg);
    }
}