/*
 * public 画面の個別スタイル。共通のトークン・部品は site.css を使う。単位は rem (16px = 1rem)。
 * 型: 一覧で並ぶもの = .dh-card (+ .dh-card-grid)、ページの中身・フォーム = .dh-panel (いずれも site.css)。
 * 文字サイズは var(--dh-fs-*)、角丸は var(--dh-radius-*)、余白は var(--dh-pad-*) を使う。
 */

/* ---------- ページ幅 ---------- */
.dh-pub-narrow,
.dh-article-page,
.dh-auth {
    max-width: 40rem;
}

.dh-cast-show {
    max-width: 48rem;
}

/* ---------- 一覧ページ (キャスト・みんなの投稿・ブログ) ---------- */
.dh-pub-list__title {
    margin: 0 0 1.5rem;
}

.dh-pub-back {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: var(--dh-fs-small);
    font-weight: 700;
}

.dh-pub-back p {
    margin: 0 !important;
}

/* トップのカード (components/top/cast-card) をトップ以外で使うときのリンク色 */
.dh-pub-cards .top-card,
.dh-pub-cards .top-card:hover {
    color: var(--dh-foreground);
    line-height: normal;
    text-decoration: none;
}

.dh-pub-cards .top-card p {
    margin: 0;
}

/* .row で並べる既存画面用の col を、.dh-card-grid の中では打ち消す */
.dh-card-grid > .dh-article-card-col,
.dh-card-grid > .dh-blog-card-col {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
}

/* ---------- 投稿カード (layouts/article_card) ---------- */
.dh-article-card-col {
    display: flex;
    padding: 0.5rem;
}

.dh-card-grid > .dh-article-card-col {
    display: flex;
}

.dh-article-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    line-height: normal;
}

.dh-article-card__link,
.dh-article-card__link:hover {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    color: var(--dh-foreground);
    text-decoration: none;
}

.dh-article-card .dh-article-card__img {
    height: auto;
    border-radius: 0;
}

.dh-article-card__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dh-article-card__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.dh-article-card__actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
}

.dh-article-card__actions form {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
}

/* ---------- ブログカード (layouts/blog_card) ---------- */
.dh-blog-card-col {
    display: flex;
    padding: 0.5rem;
}

.dh-blog-card,
.dh-blog-card:hover {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--dh-foreground);
    line-height: normal;
    text-decoration: none;
}

.dh-blog-card .dh-blog-card__img {
    height: auto;
    border: none;
}

.dh-blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dh-blog-card__meta {
    display: flex;
    gap: 0.5rem;
}

.dh-blog-card__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ---------- キャスト詳細 ---------- */
.dh-cast-show__private.not_public_text {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--dh-radius-md);
    background: #fdecea;
    color: #8a2a24;
    font-size: var(--dh-fs-body);
    font-weight: 700;
    text-align: center;
}

.dh-cast-show__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.dh-cast-show .dh-cast-show__avatar {
    width: 8rem;
    height: 8rem;
    border-radius: var(--dh-radius-pill);
    background: var(--dh-yellow);
    object-fit: cover;
}

.dh-cast-show__name {
    margin: 0;
    font-size: var(--dh-fs-h1);
    overflow-wrap: anywhere;
}

.dh-cast-show__cta {
    max-width: 100%;
    white-space: normal;
}

.dh-cast-show .dh-cast-show__catch {
    margin-bottom: 1rem;
    font-size: var(--dh-fs-h3);
}

.dh-cast-show__desc,
.dh-cast-show__text {
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.dh-cast-show__photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.dh-cast-show__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--dh-radius-md);
    background: var(--dh-yellow);
    object-fit: cover;
}

.dh-cast-show__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dh-cast-show__tag {
    padding: 0.25rem 0.75rem;
    border: 0.0625rem solid var(--dh-pink);
    border-radius: var(--dh-radius-pill);
    background: var(--dh-white);
    color: var(--dh-pink);
    font-size: var(--dh-fs-small);
    font-weight: 700;
}

.dh-cast-show__bottom {
    margin-top: 2rem;
    text-align: center;
}

/* ---------- 投稿詳細 (layouts/article。/articles/{id} と /cast/articles/{id}) ---------- */
.dh-article {
    margin: 0 auto;
}

.dh-article__title {
    margin: 0 0 1.5rem;
    font-size: var(--dh-fs-h1);
    overflow-wrap: anywhere;
}

.dh-article__media {
    margin-bottom: 1.5rem;
}

.dh-article__slider {
    overflow: hidden;
    border-radius: var(--dh-radius-md);
    --swiper-navigation-color: var(--dh-pink);
    --swiper-navigation-size: 1.5rem;
}

.dh-article .dh-article__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--dh-yellow);
    object-fit: cover;
}

.dh-article__top-photo {
    max-width: 12.5rem;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--dh-radius-md);
}

.dh-article__body {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.dh-article__label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--dh-muted);
    font-size: var(--dh-fs-small);
}

.dh-article .dh-article__cast-card {
    border: none;
    border-radius: var(--dh-radius-md);
    background: var(--dh-background);
}

.dh-article__cast-link,
.dh-article__cast-link:hover {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: var(--dh-pad-card);
    color: var(--dh-foreground-thin);
    text-decoration: none;
}

.dh-article .dh-article__cast-avatar {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: var(--dh-radius-pill);
    background: var(--dh-white);
    object-fit: cover;
}

.dh-article__cast-name {
    min-width: 0;
    font-size: var(--dh-fs-h3);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.dh-article__comments .dh-article__comments-title {
    margin-bottom: 1rem;
}

.dh-article__comment-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dh-article__comment {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem var(--dh-pad-card);
    border-radius: var(--dh-radius-md);
    background: var(--dh-background);
}

.dh-article__comment-avatar {
    flex-shrink: 0;
    width: 2.5rem;
}

.dh-article__comment-avatar .article_company_logo {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--dh-radius-pill);
    background: var(--dh-white);
    object-fit: cover;
}

.dh-article__comment-text {
    min-width: 0;
    padding-top: 0.5rem;
    overflow-wrap: anywhere;
}

.dh-article__comment-label {
    margin: 1.5rem 0 0.5rem;
    color: var(--dh-foreground-thin);
    font-weight: 700;
}

.dh-article__comment-form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

/* ---------- ブログ詳細 (share/blogs/show) ---------- */
.dh-blog-show__breadcrumbs {
    font-size: var(--dh-fs-small);
}

.dh-blog-show__crumb-current {
    overflow-wrap: anywhere;
}

.dh-blog-show__title {
    margin: 0 0 0.5rem;
    font-size: var(--dh-fs-h1);
}

.dh-blog-show .dh-blog-show__meta {
    margin-bottom: 1.5rem;
    color: var(--dh-muted);
    font-size: var(--dh-fs-caption);
}

.dh-blog-show__photo {
    margin-bottom: 1.5rem;
}

.dh-blog-show__photo img {
    display: block;
    border-radius: var(--dh-radius-md);
}

.dh-blog-show__body img {
    border-radius: var(--dh-radius-md);
}

/* ---------- お知らせ詳細 ---------- */
.dh-notice-show {
    text-align: center;
}

.dh-notice-show__title {
    margin: 0 0 1.5rem;
}

.dh-notice-show__photo img {
    display: block;
    width: 100%;
    border-radius: var(--dh-radius-md);
}

.dh-notice-show__body {
    margin-top: 1.5rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* ---------- お問い合わせ ---------- */
.dh-contact__title {
    margin: 0 0 1.5rem;
    text-align: center;
}

.dh-contact__choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dh-contact .form-check-label {
    color: var(--dh-foreground);
    font-weight: 400;
}

.dh-contact .dh-contact__body {
    min-height: 18.75rem;
}

.dh-contact__actions {
    margin-top: 2rem;
    text-align: center;
}

.dh-contact__actions .btn {
    min-width: 12rem;
}

/* ---------- 認証 (ログイン・会員登録・パスワード再設定・メール確認) ---------- */
.dh-auth .dh-auth__title {
    font-size: var(--dh-fs-h1);
    text-align: center;
}

.dh-auth__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.dh-auth__link {
    font-size: var(--dh-fs-small);
    font-weight: 700;
}

.dh-auth__text {
    margin: 0;
    line-height: 1.8;
}

/* ---------- share/articles/index (投稿一覧表) ---------- */
.dh-share-article-index__back {
    margin-bottom: 1rem;
}

.dh-share-article-index__table {
    overflow-x: auto;
}

.dh-share-article-index__ops {
    display: inline-flex;
    gap: 0.5rem;
}

@media screen and (max-width: 47.9375rem) {
    .dh-cast-show .dh-cast-show__avatar {
        width: 6rem;
        height: 6rem;
    }

    .dh-cast-show__photos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dh-article-card-col,
    .dh-blog-card-col {
        padding: 0.25rem;
    }
}

/* ログイン・会員登録の行き来のリンク */
.dh-auth__switch {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 0.0625rem solid var(--dh-border);
    font-size: var(--dh-fs-small);
    text-align: center;
}