/* ================================
   POLYGON BUTTON – GLOBAL
   ================================ */

.polygon-btn {
    position: relative;
    width: 286px;
    height: 170px;

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

    background: transparent url('../images/Polygon-1.png') center center no-repeat;
    background-size: contain;

    border: 5px solid #A48A8A;
    opacity: 1;

    text-decoration: none;
    cursor: pointer;

    /* Flip effect from design */
    transform: scale(-1, -1);
}

/* Inner text */
.polygon-btn__text {
    transform: scale(-1, -1); /* flips text back correctly */

    font-family: 'Cinzel', serif;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #A48A8A;

    text-align: center;
    pointer-events: none;
}

/* Hover state */
.polygon-btn:hover {
    border-color: #ffffff;
}

.polygon-btn:hover .polygon-btn__text {
    color: #ffffff;
}

/* ================================
   SIZE VARIANTS
   ================================ */

.polygon-btn--sm {
    width: 220px;
    height: 130px;
}

.polygon-btn--lg {
    width: 340px;
    height: 200px;
}

/* ================================
   COLOR THEMING (FUTURE-PROOF)
   ================================ */

.polygon-btn {
    --polygon-color: #A48A8A;
    border-color: var(--polygon-color);
}

.polygon-btn__text {
    color: var(--polygon-color);
}

.hero-dark .polygon-btn {
    --polygon-color: #ffffff;
}