// ==========================================================================
// Contact Page Layout Styles
// Figma: node-id=275:253
// Sections: hero (page title), divider, two-column content
//   - left: "torn paper" card with the contact form (Ecrivez-nous)
//   - right: address block, embedded map, instagram follow button
// BEM Methodology: .contact-page (Block) → .contact-page__element,
//   plus two standalone blocks scoped to this page: .contact-card
//   (the torn-paper form card), .contact-form (fields inside the card)
//   and .contact-address (right column).
// ==========================================================================

@use '../base/variables' as *;

// --------------------------------------------------------------------------
// Block: .contact-page
// --------------------------------------------------------------------------
.contact-page {
    width: 100%;
    position: relative;
}

.contact-page__hero-wrap {
    position: relative;
}

.contact-page__alert {
    padding: $spacing-sm;
    border-radius: $radius-sm;
    margin-bottom: $spacing-md;
    font-family: $font-family-sans;

    &--success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    &--error {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
}

.contact-page__columns {
    display: flex;
    flex-direction: column;
    gap: $spacing-xl;
    padding-bottom: $spacing-xl;

    @media (min-width: $breakpoint-lg) {
        flex-direction: row;
        align-items: flex-start;
        gap: $spacing-xl;
    }
}

// --------------------------------------------------------------------------
// Block: .contact-card (left column - white "torn paper" card)
//
// Torn/deckled top & bottom edges via SVG mask-image (same technique as
// .site-footer's mountain mask, see components/_footer.scss).
// --------------------------------------------------------------------------
.contact-card {
    position: relative;
    flex: 0 0 60%;
    max-width: 60%;
    background-color: $color-light;
    padding: $spacing-xl $spacing-lg;

    @media (max-width: $breakpoint-lg) {
        flex: 1 1 auto;
        max-width: 100%;
    }

    @media (max-width: $breakpoint-md) {
        padding: $spacing-lg $spacing-md;
    }

    &::before,
    &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: $contact-card-mask-height;
        background-color: $color-light;
        mask-size: 100% 100%;
        mask-repeat: repeat-x;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: repeat-x;
        animation: contact-card-mask-shift 2s ease-in-out forwards;
    }

    &::before {
        top: -#{$contact-card-mask-height - 1px};
        mask-image: url('../../images/contact/top.svg');
        mask-position: center bottom;
        -webkit-mask-image: url('../../images/contact/top.svg');
        -webkit-mask-position: center bottom;
    }

    &::after {
        bottom: -#{$contact-card-mask-height - 1px};
        mask-image: url('../../images/contact/bottom.svg');
        mask-position: center top;
        -webkit-mask-image: url('../../images/contact/bottom.svg');
        -webkit-mask-position: center top;
    }

    @media (prefers-reduced-motion: reduce) {
        &::before,
        &::after {
            animation: none;
        }
    }
}

@keyframes contact-card-mask-shift {
    from {
        mask-size: 100% 0%;
        -webkit-mask-size: 100% 0%;
    }
    to {
        mask-size: 100% 100%;
        -webkit-mask-size: 100% 100%;
    }
}

.contact-card__title {
    font-family: $font-family-serif;
    font-size: $font-size-h3;
    font-weight: 400;
    color: $color-primary-dark;
    margin: 0 0 $spacing-lg 0;
}

// --------------------------------------------------------------------------
// Block: .contact-form
// --------------------------------------------------------------------------
.contact-form {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
}

.contact-form__row {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;

    @media (min-width: $breakpoint-sm) {
        flex-direction: row;
    }

    .contact-form__group {
        flex: 1 1 0;
    }
}

.contact-form__group {
    display: flex;
    flex-direction: column;
    gap: $spacing-xs;

    &[hidden] {
        display: none;
    }

    label,
    .contact-form__label {
        font-family: $font-family-sans;
        font-size: $font-size-sm;
        font-weight: 700;
        color: $color-primary-dark;
    }
}

.contact-form__group--consent {
    margin-top: $spacing-xs;
}

.contact-form__hint {
    font-family: $font-family-sans;
    font-size: 12px;
    color: $color-primary-lighter;
}

.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form input[type='tel'],
.contact-form input[type='file'],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: $spacing-sm;
    border: 1px solid $color-primary-lighter;
    border-radius: $radius-sm;
    background-color: color-mix(in srgb, $color-primary-lighter 15%, transparent);
    font-family: $font-family-sans;
    font-size: $font-size-base;
    color: $color-primary-dark;

    &::placeholder {
        color: $color-primary-lighter;
    }

    &:focus {
        outline: none;
        border-color: $color-primary;
    }
}

.contact-form select {
    width: auto;
    padding-right: $spacing-lg;
}

.contact-form textarea {
    min-height: 140px;
    resize: vertical;
}

.contact-form__select {
    width: auto !important;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235e4331' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right $spacing-sm center;
    padding-right: $spacing-lg !important;
}

.contact-form__checkboxes {
    display: flex;
    flex-direction: column;
    gap: $spacing-xs;

    @media (min-width: $breakpoint-sm) {
        flex-direction: row;
        flex-wrap: wrap;
        gap: $spacing-md;
    }
}

.contact-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: $spacing-xs;
    font-family: $font-family-sans;
    font-size: $font-size-sm;
    color: $color-primary-dark;
    cursor: pointer;

    input[type='checkbox'] {
        margin-top: 2px;
        accent-color: $color-primary;
        flex-shrink: 0;
    }
}

.contact-form__phone {
    display: flex;
    align-items: stretch;
    border: 1px solid $color-primary-lighter;
    border-radius: $radius-sm;
    background-color: color-mix(in srgb, $color-primary-lighter 15%, transparent);
    overflow: hidden;

    &:focus-within {
        border-color: $color-primary;
    }
}

.contact-form__phone-country {
    flex: 0 0 auto;
    border: none;
    border-right: 1px solid $color-primary-lighter;
    background: transparent;
    padding: $spacing-sm;
    font-family: $font-family-sans;
    font-size: $font-size-base;
    color: $color-primary-dark;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235e4331' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right $spacing-xs center;
    padding-right: $spacing-lg;

    &:focus {
        outline: none;
    }
}

.contact-form__phone-input {
    flex: 1 1 auto;
    border: none !important;
    background: transparent !important;

    &:focus {
        outline: none;
    }
}

.contact-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form__submit {
    align-self: flex-start;
    margin-top: $spacing-sm;
    margin-left: auto;
    margin-right: auto;
}

// --------------------------------------------------------------------------
// Block: .contact-address (right column)
// --------------------------------------------------------------------------
.contact-address {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
}

.contact-address__title {
    font-family: $font-family-serif;
    font-size: $font-size-h3;
    font-weight: 400;
    color: $color-primary-dark;
    margin: 0;
}

.contact-address__block {
    display: flex;
    align-items: flex-end;
    gap: $spacing-xs;
    justify-content: space-between;
}

.contact-address__text {
    font-family: $font-family-sans;
    font-size: $font-size-base;
    line-height: $line-height-base;
    color: $color-primary-dark;
    margin: 0;
}

.contact-address__itinerary {
    display: inline-flex;
    align-items: center;
    gap: $spacing-xs;
    font-family: $font-family-sans;
    font-size: $font-size-sm;
    font-weight: 700;
    color: $color-primary-dark;
    text-decoration: none;

    svg {
        fill: none;
        stroke: currentColor;
    }

    &:hover {
        color: $color-primary;
    }
}

.contact-address__map {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;

    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    &:hover img {
        transform: scale(1.03);
    }
}

.contact-address__social {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    gap: $spacing-sm;
    margin-top: $spacing-xs;
}

.contact-address__social-label {
    font-family: $font-family-sans;
    font-size: $font-size-lg;
    font-weight: 700;
    color: $color-primary-dark;
    font-style: bold;
    line-height: 160%;
    letter-spacing: 0%;
}

.contact-address__instagram-btn {
    --padding-y: 12px;
    --padding-x: 12px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: $color-primary-dark;
}