/**
 * staff.css - スタッフ紹介ページ専用スタイル
 *
 * カラーパレット（デザインカンプより）:
 *   メイン背景:  #f5e6da（ベージュピンク）
 *   カード背景:  #ffffff
 *   見出しライン: #f6eee6（テラコッタ）
 *   テキスト:    #333333
 *   サブテキスト: #888888
 */

:root {
    --ainos-bg:         #fcf9f7;
    --ainos-card-bg:    #ffffff;
    --ainos-accent:     #d4a88c;
    --ainos-accent-light: #e8cbb8;
    --ainos-text:       #333333;
    --ainos-text-sub:   #888888;
    --ainos-radius:     8px;
}


/* ========================================
   ページ全体の背景色 ★追加
   ======================================== */

body.post-type-archive-staff,
body.single-staff,
body.post-type-archive-staff #content,
body.single-staff #content {
    background-color: var(--ainos-bg) !important;
}


/* ========================================
   サイドバー非表示・全幅レイアウト ★追加
   ======================================== */

body.post-type-archive-staff #sidebar,
body.single-staff #sidebar,
body.post-type-archive-staff .l-sidebar,
body.single-staff .l-sidebar {
    display: none !important;
}

body.post-type-archive-staff .l-mainContent,
body.single-staff .l-mainContent {
    max-width: 100% !important;
    flex: 1 !important;
}

body.post-type-archive-staff .l-content,
body.single-staff .l-content {
    max-width: 900px;
    margin: 0 auto;
}


/* ========================================
   SWELL h3 デフォルト装飾をリセット ★追加
   ======================================== */

.ainos-staff-section__heading {
    border: none !important;
    padding-left: 0 !important;
    background: none !important;
}

.ainos-staff-section__heading::before,
.ainos-staff-section__heading::after {
    display: none !important;
}


/* ========================================
   ページヘッダー（ABOUT背景テキスト付き）
   ======================================== */

.ainos-page-header {
    position: relative;
    text-align: center;
    padding: 0px 0 40px;
    overflow: hidden;
}

.ainos-page-header__bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(60px, 12vw, 140px);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.04);
    letter-spacing: 0.1em;
    white-space: nowrap;
    margin: 0;
    pointer-events: none;
    line-height: 1;
}

.ainos-page-header__title {
    position: relative;
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 700;
    color: var(--ainos-text);
    margin: 0;
    z-index: 1;
}
.ainos-flow .ainos-page-header__img,
.ainos-page-header .ainos-page-header__img {
    display: block;
    max-width: 60% !important;
    height: auto;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .ainos-page-header__img {
        max-width: 100% !important;
    }
}
/* ========================================
   一覧ページ（archive-staff.php）
   ======================================== */

.ainos-staff-archive {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.ainos-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
}

/* -- スタッフカード -- */

.ainos-staff-card {
    display: flex;
    flex-direction: column;
    background: var(--ainos-card-bg);
    border-radius: var(--ainos-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--ainos-text);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ainos-staff-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.ainos-staff-card__img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.ainos-staff-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ainos-staff-card__img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    color: #bbb;
    font-size: 14px;
}

.ainos-staff-card__body {
    padding: 20px;
    flex: 1;
}

.ainos-staff-card__name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 !important;
}

.ainos-staff-card__name-en {
    font-size: 12px;
    color: var(--ainos-text-sub);
    letter-spacing: 0.1em;
    margin: 0 0 12px;
}

.ainos-staff-card__qualifications {
    font-size: 13px;
    line-height: 1.8;
    color: var(--ainos-text-sub);
    margin: 0;
}

.ainos-staff-card__link-text {
    display: block;
    padding: 12px 20px;
    font-size: 13px;
    color: var(--ainos-accent);
    text-align: right;
}

.ainos-staff-archive__empty {
    text-align: center;
    color: var(--ainos-text-sub);
    padding: 60px 0;
}


/* ========================================
   詳細ページ（single-staff.php）
   ======================================== */

.ainos-staff-single {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* -- プロフィールセクション -- */

.ainos-staff-profile__inner {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.ainos-staff-profile__photo {
    flex: 0 0 260px;          /* ★ 280px → 260px に調整 */
    max-width: 260px;
}

.ainos-staff-profile__photo img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.ainos-staff-profile__info {
    flex: 1;
    padding-top: 4px;
}

.ainos-staff-profile__label {
    font-size: 14px;
    font-weight: 700;
    color: #5c3a1e;
    margin: 0 0 8px;
}

.ainos-staff-profile__name {
    font-size: 28px;
    font-weight: 700;
    margin: 10px 0 5px !important;
    color: #5c3a1e;
}

.ainos-staff-profile__name-en {
    font-size: 13px;
    color: var(--ainos-text-sub);
    letter-spacing: 0.1em;
    margin: 0 0 16px;         /* ★ 20px → 16px に縮小 */
}

.ainos-staff-profile__qualifications-label {
    font-size: 13px;
    color: var(--ainos-text-sub);
    margin: 0 0 4px;
}

.ainos-staff-profile__qualifications p {
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}


/* -- 共通セクション（飼育歴・ごあいさつ） -- */

.ainos-staff-section {
    margin-top: 40px;         /* ★ 50px → 40px に縮小 */
}

.ainos-staff-section__heading {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #5c3a1e;
    margin: 0 0 24px;
    position: relative;
}

.ainos-staff-section__heading span {
    display: block;
    background: #f6eee6;
    padding: 14px 20px;
    border-radius: 30px;
    max-width: 80%;
    margin: 0 auto;
}

.ainos-staff-section__content {
    font-size: 15px;
    line-height: 2;
    color: var(--ainos-text);
}

.ainos-staff-section__content p {
    margin: 0 0 1em;
}


/* -- お世話の記録セクション -- */

.ainos-staff-records {
    margin-top: 60px;
}

.ainos-staff-records__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ainos-staff-records__card {
    display: block;
    text-decoration: none;
    color: var(--ainos-text);
    transition: opacity 0.3s ease;
}

.ainos-staff-records__card:hover {
    opacity: 0.8;
}

.ainos-staff-records__card-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--ainos-radius);
    margin-bottom: 10px;
}

.ainos-staff-records__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ainos-staff-records__card-noimg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ddd;
    color: #999;
    font-size: 12px;
}

.ainos-staff-records__card-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    color: #5c3a1e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ainos-staff-records__card-title::before,
.ainos-staff-records__card-title::after {
    display: none !important;
}

.ainos-staff-records__card-date {
    font-size: 12px;
    color: var(--ainos-text-sub);
}

.ainos-staff-records__card-cat {
    display: none;
}


/* -- 一覧に戻るボタン -- */

.ainos-staff-single__back {
    text-align: center;
    margin: 50px 0 60px;
}

.ainos-btn {
    display: inline-block;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.ainos-btn--outline {
    color: var(--ainos-accent);
    border: 2px solid var(--ainos-accent);
    background: #ffffff;
}

.ainos-btn--outline:hover {
    background: var(--ainos-accent);
    color: #fff;
}

/* ========================================
   お問い合わせセクション
   ======================================== */

/* .ainos-contact-section {
    background: #ffffff;
    padding: 60px 20px;
    margin-top: 60px;
} */

/* ========================================
   レスポンシブ
   ======================================== */

@media (max-width: 768px) {

    .ainos-page-header {
        padding: 40px 0 30px;
    }

    /* 一覧: 1カラム */
    .ainos-staff-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    /* 詳細: プロフィールを縦積み */
    .ainos-staff-profile__inner {
        flex-direction: column;
        padding: 24px;
        gap: 20px;
    }

    .ainos-staff-profile__photo {
        flex: none;
        max-width: 100%;
    }

    .ainos-staff-profile__name {
        font-size: 24px;
    }

    /* お世話の記録: 2カラム */
    .ainos-staff-records__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .ainos-staff-section__heading span {
        padding: 8px 24px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {

    .ainos-staff-records__grid {
        grid-template-columns: 1fr;
    }

    .ainos-staff-single {
        padding: 0 16px 40px;
    }
}

.post-type-archive-staff #content,
.single-staff #content {
    background-color: #fcf9f7 !important;
}
body.post-type-archive-staff,
body.single-staff,
body {
    background-color: var(--ainos-bg) !important;
}