/* Page bio — layout bento ; styles visuels délégués au design system portfolios */

#portfolio_page.biolink-body {
    color: var(--portfolios-body-text-color, inherit);
}

#biolink.biolink-page {
    box-sizing: border-box;
}

#biolink .biolink-shell {
    width: min(100%, 760px);
    margin-left: auto;
    margin-right: auto;
}

#biolink .biolink-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1rem);
}

#biolink .biolink-tile {
    min-height: 140px;
}

#biolink .biolink-tile--1x1 {
    grid-column: span 1;
}

#biolink .biolink-tile--2x1 {
    grid-column: span 2;
}

#biolink .biolink-tile--2x2 {
    grid-column: span 2;
    min-height: 280px;
}

#biolink .biolink-tile__inner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    box-sizing: border-box;
    padding: 1.1rem;
    background: var(--portfolios-content-bg-color, var(--portfolios-theme-bg-main, transparent));
    color: inherit;
    overflow: hidden;
}

#biolink .biolink-tile__heading {
    margin: 0;
    font-size: var(--portfolios-heading-secondary-size, 1rem);
    color: var(--portfolios-heading-secondary-color, inherit);
}

/* Alignement About (réglage « Alignement » du profil About) : tuile profil. */
#biolink .biolink-tile--profile .biolink-tile__inner.title-align-left {
    align-items: flex-start;
    text-align: left;
}

#biolink .biolink-tile--profile .biolink-tile__inner.title-align-center {
    align-items: center;
    text-align: center;
}

#biolink .biolink-tile--profile .biolink-tile__inner.title-align-right {
    align-items: flex-end;
    text-align: right;
}

/* Titres de section (réglage global d'alignement des titres). */
#biolink .biolink-tile__heading.title-align-left {
    text-align: left;
    align-self: flex-start;
}

#biolink .biolink-tile__heading.title-align-center {
    text-align: center;
    align-self: center;
}

#biolink .biolink-tile__heading.title-align-right {
    text-align: right;
    align-self: flex-end;
}

/* Réseaux sociaux : alignement About (comme sur la page About). */
#biolink .biolink-tile--socials .biolink-tile__inner.about-align-left .social-medias {
    justify-content: flex-start;
}

#biolink .biolink-tile--socials .biolink-tile__inner.about-align-center .social-medias {
    justify-content: center;
}

#biolink .biolink-tile--socials .biolink-tile__inner.about-align-right .social-medias {
    justify-content: flex-end;
}

/* Lisibilité : le contenu des cartes (aperçus réseaux…) reste aligné à gauche. */
#biolink .biolink-preview-grid,
#biolink .biolink-preview-grid * {
    text-align: left;
}

#biolink .biolink-tile--profile .biolink-tile__inner {
    justify-content: center;
    padding: 1.5rem;
}

#biolink .biolink-profile__avatar {
    width: 96px;
    height: 96px;
    background-size: cover;
    background-position: center;
}

#biolink .biolink-profile__title {
    margin: 0;
    font-size: var(--portfolios-heading-primary-size, 1.5rem);
    color: var(--portfolios-heading-primary-color, inherit);
}

#biolink .biolink-profile__tagline,
#biolink .biolink-profile__description {
    margin: 0;
    line-height: var(--portfolios-text-line-height, 1.5);
}

#biolink .biolink-tile--creation-module {
    min-height: 0;
}

#biolink .biolink-creation-module {
    gap: 0.75rem;
}

#biolink .biolink-creation-module .blog-list,
#biolink .biolink-creation-module .horizontal-elements,
#biolink .biolink-creation-module .vertical-elements,
#biolink .biolink-creation-module .square-elements,
#biolink .biolink-creation-module .biolink-creation-gallery-grid {
    width: 100%;
    margin: 0;
}

#biolink .biolink-creation-blog.blog-list {
    display: grid;
}

#biolink .biolink-creation-horizontal.horizontal-elements,
#biolink .biolink-creation-vertical.vertical-elements,
#biolink .biolink-creation-square.square-elements {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-gap: 0.75rem;
}

#biolink .biolink-creation-horizontal .horizontal-grid-item,
#biolink .biolink-creation-vertical .vertical-grid-item,
#biolink .biolink-creation-square .square-grid-item {
    width: 100%;
    min-height: 140px;
}

#biolink .biolink-creation-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

#biolink .biolink-creation-gallery-grid a {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    text-decoration: none;
    transition:
        box-shadow 0.3s ease-in-out,
        border 0.3s ease-in-out,
        filter 0.3s ease-in-out,
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s linear;
}

#biolink .biolink-creation-gallery-grid a:hover {
    transform: var(--portfolios-thumbnail-hover-transform, none);
    filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}

#biolink .biolink-creation-gallery-grid a img {
    display: none;
}

@media screen and (max-width: 640px) {
    #biolink .biolink-creation-horizontal.horizontal-elements,
    #biolink .biolink-creation-vertical.vertical-elements,
    #biolink .biolink-creation-square.square-elements,
    #biolink .biolink-creation-gallery-grid {
        grid-template-columns: 1fr !important;
    }
}

#biolink .biolink-preview-grid {
    display: grid;
    gap: 0.75rem;
}

#biolink .biolink-preview-card {
    display: flex;
    gap: 0.85rem;
    text-decoration: none;
    color: inherit;
    padding: 0.75rem;
    transition: var(--portfolios-button-transition, transform 0.18s ease, filter 0.18s ease);
}

#biolink .biolink-preview-card:hover {
    transform: var(--portfolios-thumbnail-hover-transform, translateY(-2px));
    filter: var(--portfolios-thumbnail-hover-filter, none);
}

#biolink .biolink-preview-card:active {
    transform: var(--portfolios-thumbnail-click-transform, none);
}

#biolink .biolink-preview-card__media {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    background-size: cover;
    background-position: center;
    background-color: color-mix(in srgb, var(--portfolios-ui-border-color, #666) 20%, transparent);
}

#biolink .biolink-preview-card__media--icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

#biolink .biolink-preview-card__media--icon svg {
    width: 28px;
    height: 28px;
}

#biolink .biolink-preview-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

#biolink .biolink-preview-card__network {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--portfolios-ui-label-color, inherit);
    opacity: 0.72;
}

#biolink .biolink-preview-card__title {
    font-weight: 600;
    line-height: var(--portfolios-heading-secondary-line-height, 1.35);
}

#biolink .biolink-preview-card__description {
    font-size: 0.92rem;
    line-height: var(--portfolios-text-line-height, 1.4);
    opacity: 0.85;
}

#biolink .biolink-content-card {
    display: flex;
    gap: 0.85rem;
    text-decoration: none;
    color: inherit;
    padding: 0.75rem;
    height: 100%;
    box-sizing: border-box;
    text-align: left;
    transition: var(--portfolios-button-transition, transform 0.18s ease, filter 0.18s ease);
}

#biolink .biolink-content-card:hover {
    transform: var(--portfolios-thumbnail-hover-transform, translateY(-2px));
    filter: var(--portfolios-thumbnail-hover-filter, none);
}

#biolink .biolink-content-card:active {
    transform: var(--portfolios-thumbnail-click-transform, none);
}

#biolink .biolink-content-card__media {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    background-size: cover;
    background-position: center;
}

#biolink .biolink-content-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

#biolink .biolink-content-card__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--portfolios-ui-label-color, inherit);
    opacity: 0.72;
}

#biolink .biolink-content-card__title {
    font-weight: 600;
    line-height: var(--portfolios-heading-secondary-line-height, 1.35);
}

#biolink .biolink-content-card__excerpt {
    font-size: 0.92rem;
    line-height: var(--portfolios-text-line-height, 1.4);
    opacity: 0.85;
}

#biolink .biolink-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

#biolink .biolink-contact-list a {
    color: var(--portfolios-color-one, inherit);
    text-decoration: none;
    word-break: break-word;
}

#biolink .biolink-cta-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: var(--portfolios-button-padding-y, 1.25rem) var(--portfolios-button-padding-x, 1.25rem);
    text-decoration: none;
    text-align: center;
}

#biolink .biolink-tile--showreel .youtube,
#biolink .biolink-tile--showreel .vimeo,
#biolink .biolink-tile--showreel .dailymotion {
    width: 100%;
}

@media screen and (max-width: 640px) {
    #biolink .biolink-grid {
        grid-template-columns: 1fr;
    }

    #biolink .biolink-tile--1x1,
    #biolink .biolink-tile--2x1,
    #biolink .biolink-tile--2x2 {
        grid-column: span 1;
    }

    #biolink .biolink-preview-card,
    #biolink .biolink-content-card {
        flex-direction: column;
    }

    #biolink .biolink-preview-card__media,
    #biolink .biolink-content-card__media {
        width: 100%;
        height: 160px;
        flex-basis: auto;
    }
}