/* ==========================================================================
   corporate-top.css — コーポレート TOP ページ固有スタイル（モバイルファースト）
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout: site-header がヒーロー上にオーバーレイ
   -------------------------------------------------------------------------- */
.page {
    position: relative;
}

/* --------------------------------------------------------------------------
   Section: brand-lineup（Figma: Bland Lineup）
   -------------------------------------------------------------------------- */
.section[data-type="brand-lineup"] {
    .section__inner {
        gap: 22px;
    }
}

/* --------------------------------------------------------------------------
   Block: brand-lineup
   -------------------------------------------------------------------------- */
.brand-lineup {
    --brand-card-media-image-height-desktop: clamp(140px, 18vw, 252px);

    display: flex;
    flex-direction: column;
    margin-top: 70px;
    padding-bottom: 56px;
    /* 飛び出した画像の高さ */

    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
        margin-top: 100px;
        padding-bottom: calc(var(--brand-card-media-image-height-desktop) / 252 * 138);
    }
}

/* --------------------------------------------------------------------------
   Block: brand-card（Figma: Boreca / Seibu Fitness Club）
   -------------------------------------------------------------------------- */
.brand-card {
    position: relative;
    width: 100%;
    color: var(--color-white);

    --brand-card-media-image-height-mobile: clamp(108px, 28vw, 160px);
    --brand-card-media-image-height-desktop: clamp(140px, 18vw, 252px);
    --brand-card-media-image-height-desktop-lg: clamp(270px, 33vw, 428px);

    &+.brand-card {
        margin-top: 103px;
    }

    .brand-card__kicker,
    .brand-card__name,
    .brand-card__location,
    .brand-card__description {
        color: var(--color-white);
    }

    &[data-brand="boreca"] {
        background-color: var(--color-main);
    }

    &[data-brand="seibu-fitness"] {
        background-color: var(--color-seibu-main);
    }

    .text-link {
        color: var(--color-white);
    }

    .text-link:hover {
        color: var(--color-white);
        opacity: 0.9;
    }

    /* モバイル: スタックレイアウト・コンパクトなパディング */
    .brand-card__inner {
        position: relative;
        display: grid;
        max-width: var(--content-max-width);
        margin-inline: auto;
        padding-inline: 20px;
        /* .brand-card__media-image の高さに応じて動的に下paddingを調整（最小値: 画像高さ/2 + 44px） */
        padding-block-start: 40px;
        padding-block-end: max(calc(var(--brand-card-media-image-height-mobile, 0px) / 2 + 44px), 100px);
    }

    &[data-brand="boreca"] .brand-card__inner {
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: start;
    }

    &[data-brand="seibu-fitness"] .brand-card__inner {
        grid-template-rows: auto auto auto;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .brand-card__header {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Figma: H2 ENG 18p — tracking 5.4px */
    .brand-card__kicker {
        margin: 0;
        font-family: var(--font-accent-en);
        font-size: 0.875rem;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--color-white);
    }

    /* wysiwyg h3 の ::before（左ボーダー）を無効化 */
    .brand-card__name::before {
        display: none;
    }

    /* モバイル: 可変フォントサイズ */
    .brand-card__name {
        margin: 0;
        display: block;
        font-family: var(--font-accent-en);
        font-size: 1.75rem;
        font-weight: 400;
        line-height: 1.6;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .brand-card__location {
        font-family: var(--font-heading-jp);
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 1.9;
    }

    .brand-card__description {
        margin-block-start: 8px;
        font-family: var(--font-sans);
        font-size: 0.8125rem;
        font-weight: 400;
        line-height: 1.9;
        letter-spacing: 0;
    }

    /* Figma: BORECA サービスアイコン（44px 枠、gap 12px） */
    .brand-card__service-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        margin: 0;
        margin-block-start: 24px;
        padding: 0;
        list-style: none;
    }

    .brand-card__service-link {
        display: flex;
        align-items: center;
        justify-content: center;
        color: inherit;
        text-decoration: none;
        transition: opacity 0.2s ease;
    }

    .brand-card__service-link:hover,
    .brand-card__service-link:focus-visible {
        opacity: 0.9;
    }

    .brand-card__service-link:focus-visible {
        outline: 2px solid var(--color-white);
        outline-offset: 2px;
    }

    .brand-card__service-link img {
        display: block;
        width: 44px;
        height: 44px;
    }

    .brand-card__body {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .brand-card__actions {
        margin-top: 20px;
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 2px 8px;
        font-family: var(--font-sans);
        font-size: 0.8125rem;
        font-weight: 400;
        line-height: 1.9;
    }

    .brand-card__action .text-link {
        letter-spacing: 0;
        font-size: 0.75rem;
    }

    .brand-card__cta {
        margin-top: 24px;
    }

    .brand-card__media {
        position: absolute;
        right: 0;
        bottom: -56px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-self: start;
    }

    .brand-card__media-row {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 8px;
    }

    .brand-card__media-image {
        width: var(--brand-card-media-image-height-mobile);
        min-width: 0;
        height: var(--brand-card-media-image-height-mobile);
        object-fit: cover;
    }

    .brand-card__media[data-breakpoint="desktop"] {
        display: none;
    }

    /* モバイル: SEIBU ロケーションは1カラム */
    &[data-brand="seibu-fitness"] .brand-card__locations {
        display: grid;
        grid-template-columns: 1fr;
        gap: 48px;
        padding-block-end: 40px;
    }

    .brand-card__location-block {
        display: flex;
        flex-direction: column;
        gap: 0;
    }


    /* タブレット以上: デスクトップレイアウト */
    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
        &+.brand-card {
            margin-top: calc(var(--brand-card-media-image-height-desktop) / 252 * 106 + 80px);
        }

        .brand-card__inner {
            padding-inline: 120px;
            padding-block-end: calc(var(--brand-card-media-image-height-desktop) / 252 * 138 + 80px);
        }

        &[data-brand="boreca"] .brand-card__inner {
            padding-block-end: 100px;
        }

        &[data-brand="seibu-fitness"] .brand-card__inner {
            padding-block-end: calc(var(--brand-card-media-image-height-desktop) / 252 * 114 + 64px);
        }

        .brand-card__body {
            margin-top: 40px;
            flex-direction: row;
            gap: 40px;
        }

        &[data-brand="seibu-fitness"] .brand-card__location-block {
            margin-right: auto;
        }

        .brand-card__location-block {
            max-width: 384px;
        }

        /* モバイル用メディアは非表示、デスクトップ用を表示 */
        .brand-card__media[data-breakpoint="mobile"] {
            display: none;
        }

        .brand-card__media[data-breakpoint="desktop"] {
            display: flex;
        }

        .brand-card__media {
            bottom: calc(var(--brand-card-media-image-height-desktop) / 252 * 138 * -1);
        }

        .brand-card__media-inner {
            display: flex;
            flex-direction: column;
            gap: 32px;
            top: 100px;
        }

        .brand-card__media-row {
            gap: 32px;
        }

        .brand-card__media-image {
            width: auto;
            height: var(--brand-card-media-image-height-desktop);
            aspect-ratio: 414 / 252;
        }

        .brand-card__media-image[data-size="lg"] {
            height: var(--brand-card-media-image-height-desktop-lg);
            aspect-ratio: 290 / 428;
        }

        .brand-card__name {
            line-height: 1.2;
            font-size: 3.125rem;
        }

        .brand-card__location {
            font-size: 1.375rem;
        }

        .brand-card__description {
            font-size: 1rem;
        }

        .brand-card__actions {
            gap: 10px;
        }

        .brand-card__action .text-link {
            font-size: 0.8125rem
        }
    }
}