/**
 * Cosamirai Property Nav
 *
 * Colonnes égales de --property-nav-col (réduites si la place manque), centrées,
 * séparées par un filet vertical ; chaque colonne :
 * titre + lien "Discover →" vers la page de l'étage / propriété fille.
 * Filets uniquement entre les éléments (aucun sur les bords extérieurs).
 */

.cosamirai-property-nav {
    --property-nav-border: rgba(112, 78, 45, 0.55);
    --property-nav-col: 24rem;

    width: 100%;
    /* Marges propres au bloc : priment sur le block-gap WP (sélecteur :where) */
    margin-block-start: clamp(1rem, 2vw, 2rem);
    margin-block-end: clamp(3rem, 6vw, 6rem);
}

.cosamirai-property-nav .property-nav__list {
    /* --property-nav-count posé inline par le template */
    display: grid;
    grid-template-columns: repeat(var(--property-nav-count, 1), minmax(0, 1fr));
    width: min(100%, calc(var(--property-nav-count, 1) * var(--property-nav-col)));
    margin-inline: auto;
}

.cosamirai-property-nav .property-nav__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
    padding: 1.75rem 1.25rem 2rem 1.75rem;
    border-left: 1px solid var(--property-nav-border);
}

.cosamirai-property-nav .property-nav__item:first-child {
    border-left: none;
}

/* ============================================
   TITRE
   ============================================ */

.cosamirai-property-nav .property-nav__title {
    font-family: "PP Fragment Glare", serif;
    font-size: var(--fs-22, 1.375rem);
    font-weight: 300;
    line-height: 1.25;
    color: var(--c-oak-text);
    margin: 0;
}

/* ============================================
   LIEN "Discover →" : opacité réduite au repos, pleine au survol
   ============================================ */

.cosamirai-property-nav .property-nav__link {
    --property-nav-link-opacity: 0.5;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "PP Fragment Sans", sans-serif;
    font-size: var(--fs-14, 0.875rem);
    font-weight: 400;
    line-height: 1;
    color: var(--c-oak-text);
    text-decoration: none;
    opacity: var(--property-nav-link-opacity);
    transition: opacity 0.25s ease;
}

.cosamirai-property-nav .property-nav__link:hover,
.cosamirai-property-nav .property-nav__link:focus-visible {
    opacity: 1;
}

/* arrow.svg pointe vers la gauche → retournée horizontalement (scaleX(-1)).
   Le translateX négatif ci-dessous = déplacement visuel vers la droite. */
.cosamirai-property-nav .property-nav__link-arrow {
    flex: 0 0 auto;
    width: 1.5em;
    height: 1em;
    background-image: url("../../assets/images/arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: scaleX(-1);
    transition: transform 0.25s ease;
}

.cosamirai-property-nav .property-nav__link:hover .property-nav__link-arrow,
.cosamirai-property-nav .property-nav__link:focus-visible .property-nav__link-arrow {
    transform: scaleX(-1) translateX(-0.3em);
}

/* ============================================
   PLACEHOLDER / BACKEND
   ============================================ */

.cosamirai-property-nav .property-nav__placeholder {
    text-align: center;
    color: #999;
    padding: 2rem;
}

.cosamirai-property-nav .property-nav__placeholder-small {
    color: #999;
    font-style: italic;
    font-size: 0.875rem;
}

.cosamirai-property-nav.property-nav--backend {
    background: #f9f9f9;
    border: 2px dashed #ddd;
    padding: 1rem;
}

.cosamirai-property-nav.property-nav--backend .property-nav__title {
    font-size: 1rem;
}

.cosamirai-property-nav.property-nav--backend .property-nav__link {
    font-size: 0.8rem;
    cursor: default;
}

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

@media (max-width: 1024px) {
    .cosamirai-property-nav .property-nav__item {
        padding: 0.9rem 1rem 1rem 1.25rem;
    }
}

@media (max-width: 768px) {
    /* Une colonne par étage : les filets verticaux (séparateurs de colonnes)
       deviennent des filets horizontaux entre les étages */
    .cosamirai-property-nav .property-nav__list {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .cosamirai-property-nav .property-nav__item {
        padding: 1rem 0;
        border-left: none;
    }

    .cosamirai-property-nav .property-nav__item:not(:first-child) {
        border-top: 1px solid var(--property-nav-border);
    }
}