/**
 * Styles: importateurs
 * Accordion by continent > country, importer cards.
 *
 * @package Triennes
 */

/* ============================================
   HEADER
   ============================================ */

.tri-importateurs__header {
    text-align: center;
}

.tri-importateurs__header.section {
    padding-top: var(--tri-space-lg);
    padding-bottom: var(--tri-space-lg);
}

.tri-importateurs__title {
    text-align: center;
    margin-bottom: var(--tri-space-sm);
    padding-bottom: var(--tri-space-sm);
    position: relative;
    display: inline-block;
}

.tri-importateurs__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 2px;
    background: var(--tri-gold);
}

.tri-importateurs__lead {
    color: var(--tri-text-light);
    font-style: italic;
    font-family: var(--tri-font-heading);
    font-size: 1.05rem;
    max-width: 640px;
    margin: var(--tri-space-sm) auto var(--tri-space-md);
    display: block;
}

/* ============================================
   WORLD MAP BACKGROUND
   ============================================ */

.tri-importateurs__list {
    position: relative;
}

.tri-importateurs__list::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/world-map.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 90% auto;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

.tri-importateurs__list > .container {
    position: relative;
    z-index: 1;
}

/* ============================================
   ACCORDION
   ============================================ */

.tri-accordion {
    border-bottom: 1px solid var(--tri-border);
}

.tri-accordion:first-child {
    border-top: 1px solid var(--tri-border);
}

.tri-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--tri-space-md) 0;
    /* Override Astra's button styles (background-color, border-radius, etc.) */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    text-align: left;
    color: var(--tri-text);
    transition: color var(--tri-transition);
}

.tri-accordion__header:hover,
.tri-accordion__header:focus {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tri-gold);
}

.tri-accordion__header:focus-visible {
    outline: 2px solid var(--tri-gold);
    outline-offset: 2px;
}

.tri-accordion__title {
    font-size: 1.5rem;
    margin: 0;
}

.tri-accordion__chevron {
    flex-shrink: 0;
    transition: transform var(--tri-transition);
}

.tri-accordion__header[aria-expanded="true"] .tri-accordion__chevron {
    transform: rotate(180deg);
}

/* ============================================
   ACCORDION BODY
   ============================================ */

.tri-accordion__body {
    padding-bottom: var(--tri-space-lg);
}

.tri-accordion__country {
    margin-bottom: var(--tri-space-md);
}

.tri-accordion__country:last-child {
    margin-bottom: 0;
}

.tri-accordion__country-name {
    font-family: var(--tri-font-nav);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tri-gold);
    margin-bottom: var(--tri-space-sm);
    padding-bottom: var(--tri-space-xs);
    border-bottom: 1px solid var(--tri-border);
}

/* ============================================
   IMPORTER CARDS
   ============================================ */

.tri-importateurs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tri-space-md);
}

.tri-importateur-card {
    display: flex;
    flex-direction: column;
    gap: var(--tri-space-xs);
    padding: var(--tri-space-sm);
    background: var(--tri-white);
    border-radius: var(--tri-radius-sm);
    border: 1px solid var(--tri-border);
}

.tri-importateur-card__name {
    font-size: 1.05rem;
    color: var(--tri-charcoal);
}

.tri-importateur-card__address {
    font-size: 0.85rem;
    color: var(--tri-text-light);
    line-height: 1.5;
}

.tri-importateur-card__email,
.tri-importateur-card__phone,
.tri-importateur-card__website,
.tri-importateur-card__instagram {
    font-size: 0.9rem;
    color: var(--tri-text-light);
}

.tri-importateur-card__phone,
.tri-importateur-card__email,
.tri-importateur-card__website,
.tri-importateur-card__instagram {
    text-decoration: none;
    transition: color var(--tri-transition);
}

.tri-importateur-card__phone:hover,
.tri-importateur-card__email:hover,
.tri-importateur-card__website:hover,
.tri-importateur-card__instagram:hover {
    color: var(--tri-gold);
}

.tri-importateur-card__instagram::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.3em;
    vertical-align: -0.1em;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.tri-accordion__empty {
    font-style: italic;
    color: var(--tri-text-light);
    font-family: var(--tri-font-heading);
    font-size: 1rem;
    padding: var(--tri-space-sm) 0;
    margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .tri-importateurs-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tri-importateurs-list {
        grid-template-columns: 1fr;
    }

    .tri-accordion__title {
        font-size: 1.25rem;
    }
}