/*
 * フィードカード（components/feed-card.blade.php）
 *
 * feed.css から分割した（spec/2026/09/20260915-06-330_いいねしたページ_実装計画.md § 4.4）。
 * フィード以外のページ（マイページの一覧）でもカードを使うため、検索ヘッダーなどフィード固有の
 * ルールと分けている。カードを使うページは、このファイルを `<link>` で読み込む。
 * フィードでは feed.css の前に読み込む。
 *
 * 色のカスタムプロパティ（--maincolor 等）は app.css の :root を使う。
 *
 * **レイアウトは viewport ではなくカードの幅（コンテナクエリ）で切り替える。**
 * マイページはサイドバーの分だけ本文がフィードより狭く、viewport 基準では PC 1280px（本文 728px）で
 * PC 用の広いレイアウトになってタイトル列が詰まるため（FEATUPROJECT-330 S01 追補）。
 * コンテナはカードのルート（.feed-card。名前 feed-card）で、呼び出し側のページで設定する必要はない。
 *
 * **カードは親の幅いっぱいに伸びる置き場所（ブロック、または align-items: stretch の縦並び flex）に置く。**
 * container-type: inline-size のため、カードの幅は中身から決まらない。幅が内容で決まる置き場所
 * （横並び flex、align-items が stretch 以外の縦並び flex、inline-block、float、絶対配置、
 * grid の auto 列）ではカードの幅が 0 になる。
 *
 * **枠線・背景・角丸は呼び出し側から変えられる。** 地と罫線は 1 段内側の .feed-card__frame が持つため、
 * 子孫セレクタを書かずに済むよう、ルート（<x-feed-card class="...">）に付けたクラスで
 * 次のカスタムプロパティを指定する（未指定ならフィードと同じ見た目）。
 *   --feed-card-frame-border      罫線（border の一括指定。既定 solid 1px #dddce1。消すなら none）
 *   --feed-card-frame-background  背景色（既定 #fff。ホバー時の #f6f6f6 は変えない）
 *   --feed-card-frame-radius      角丸（既定 幅 610px 以下 4px / それより広い 6px。指定すると全幅で同じ値）
 *
 * 閾値は、フィードでの「viewport 幅 → カードの幅」の対応から換算している。フィードのカードの幅は
 * .feed-container（max-width 1150px・左右 padding 15px・border-box）の中身の幅で、
 * min(viewport, 1150px) - 30px になる（viewport に対して単調増加）。
 *
 *   フィードの viewport の条件  → @container feed-card の条件
 *   (min-width: 641px)          → (width > 610px)
 *   (max-width: 921px)          → (width <= 891px)
 *   (max-width: 480px)          → (width <= 450px)
 *
 * 小数の幅で両側の条件から漏れないよう、範囲の構文（> / <=）で書く。
 * 横幅を取るスクロールバーのある環境では、コンテナの幅がスクロールバーの分だけ狭くなるため、
 * フィードで切り替わる viewport 幅はスクロールバーの幅だけ広い側へずれる。
 */

/* ============================================================
   カード（SP をベースに書き、幅 611px 以上で PC の 3 カラムへ切り替える）

   升目は .feed-card__link が grid-template-areas で持つ。
   SP は「バッジ行 / 投稿者 | サムネイル / 本文（全幅）」、PC は「バッジ行 / 投稿者 | 本文 | サムネイル」。
   ============================================================ */

/*
 * カードのルート。コンテナクエリの基準（コンテナ）だけを持ち、地・罫線・余白は .feed-card__frame が持つ。
 * コンテナの要素自身に掛かるルールはそのコンテナを @container で参照できないため、
 * 幅で変わる見た目（角丸・下の余白）を 1 つ内側の要素へ移してある。
 */
.feed-card {
    container: feed-card / inline-size;
    /*
     * カード間の余白。幅 450px 以下で 12px、それより広いと 20px。
     * 上の理由で @container を使えないため、margin の % が包含ブロックの幅（一覧の中身の幅。
     * ブロックで縦に並べる限りカードの幅と同じ）を指すことを使って段階的に切り替える。
     * 内側の要素へ移さないのは、コンテナは子の margin を外へ相殺させず、
     * 最後のカードと後続の要素（ページネーション等）の間隔が広がるため。
     */
    margin-bottom: clamp(12px, calc(12px + (100% - 450px) * 1000), 20px);
}

.feed-card__frame {
    /* 右上のスロット（.feed-card__header-end）の絶対配置の基準。罫線の内側から測るため、罫線を持つこの要素に置く */
    position: relative;
    padding-bottom: 12px;
    background-color: var(--feed-card-frame-background, #fff);
    border: var(--feed-card-frame-border, solid 1px #dddce1);
    border-radius: var(--feed-card-frame-radius, 4px);
    transition: background-color .2s;
}

/* リンクを外したカード（.feed-card__link--static）はホバーしても背景色を付けない */
.feed-card__frame:has(.feed-card__link:not(.feed-card__link--static):hover) {
    background-color: #f6f6f6;
}

/*
   アクション以外をまとめて包む投稿へのリンク。カードの升目を持つのはこの要素で、
   .feed-card__frame は地・罫線・余白だけを持つ（アクションはリンクの外の兄弟）。
*/
.feed-card__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 48%);
    grid-template-rows: 20px auto auto;
    grid-template-areas:
        "badges badges"
        "author thumb"
        "main   main";
    column-gap: 8px;
    row-gap: 8px;
    color: inherit;
    text-decoration: none;
    padding: 16px 15px 12px;
}

/* ---------- バッジ行 ---------- */
.feed-card__badges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    grid-area: badges;
    flex-wrap: wrap;
    /* header-end スロット（鉛筆ボタン）の分だけ右を空け、相対時刻をその左に並べる。スロットがなければ 0 */
    padding-right: var(--feed-card-header-end-space, 0px);
}

.feed-card__badge {
    display: inline-block;
    border-radius: 4px;
    padding: 4px 6px;
    background-color: #fff;
    border: solid 1px var(--maincolor);
    color: var(--maincolor);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: .04em;
}

/* STORY のカテゴリバッジ（20260826-01スペック）。配色は .feed-filter__item に合わせ、種別バッジと区別する */
.feed-card__badge--category {
    background-color: #f0eff4;
    border: 1px solid #f0eff4;
    color: inherit;
}

.feed-card__time {
    margin-left: 4px;
    font-size: 10px;
    color: var(--fontgray);
}

/* ---------- 右上のスロット（header-end。マイページの鉛筆ボタン） ----------
   リンクの入れ子を避けるため、鉛筆ボタンは .feed-card__link の外に置き、
   カード右上へ重ねる。位置はバッジ行の縦中央・リンクの右の padding に合わせ、
   カードの幅ごとに top / right を変える。 */
.feed-card--has-header-end {
    --feed-card-header-end-space: 32px; /* 鉛筆ボタン 30px + 相対時刻との間隔 8px */
}

.feed-card__header-end {
    position: absolute;
    top: 13px;
    right: 15px;
    display: flex;
    align-items: center;
}

/* 鉛筆ボタン（カードへ置き換える前のマイストーリーの鉛筆ボタンの値を引き継いだ） */
.feed-card__edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: none;
    color: #0e0e0e;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .2s;
}

.feed-card__edit-btn:hover {
    opacity: .8;
}

/* 鉛筆ボタンのアイコン（draft_orders）。.material-symbols-outlined の 24px を上書きするため span に直接付ける */
.feed-card__edit-icon {
    font-size: 30px;
}

/* ---------- 投稿者ブロック ---------- */
.feed-card__author,
.feed-card__author--nobody {
    grid-area: author;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 48px minmax(0, 1fr) ;
    grid-template-areas:
        "avater"
        "names";
    align-items: start;
    gap: 12px;
    min-width: 0;
}

.feed-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    grid-area: avater;
    border: solid 1px #f2f2f2;
}

.feed-card__author-body {
    grid-area: names;
    min-width: 0;
}

.feed-card__name {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.feed-card__affiliation-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* ← flexアイテムとしての最小幅を解除 */
    line-height: 1;
    padding-top: 1px;
    }
.feed-card__affiliation {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    color: var(--fontgray);
}

.feed-card__affiliation-icon {
    flex: none;
    font-size: 14px;
    font-weight: 300;
}

.feed-card__tags {
    display: flex;
    gap: 4px;
    list-style: none;
    align-items: center;
}

.feed-card__tag {
    font-size: 12px;
    line-height: 1;
    padding: 7px 0px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* ← flexアイテムとしての最小幅を解除 */
}
.feed-card__tag.feed-card__tag--more{
    border-radius: 999px;
    padding: 6px 4px 5px;
    background: #f0eff4;
    font-size: 9px;
    overflow: visible; 
    text-overflow: clip;
    min-width: auto; 
}

/* ---------- 本文ブロック ---------- */
.feed-card__main {
    grid-area: main;
}

.feed-card__title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
}

.feed-card__icon {
    width: 20px;
    height: 20px;
    margin-top: 4px;
}

.feed-card__excerpt {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ---------- サムネイル ---------- */
.feed-card__thumb {
    grid-area: thumb;
    position: relative; /* 子要素の基準点にする */
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 16 / 9;
}

/* 画像はトリミングして枠いっぱいに敷く（レターボックスにしない） */
.feed-card__thumb-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- アクション ----------
   並びは いいね → コメント → シェア → メッセージ。右揃えのままにし、
   種別でボタン数が 2〜4 個と変わるぶんの横位置のずれは許容する（実装計画 § 2.6）。 */
.feed-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin: 0 15px;
}

/*
 * アイコンの色と塗りはカスタムプロパティで渡す。
 * 状態のクラス（is-liked / is-following）が付くのはボタン側で、色を変えたいのは
 * 中のアイコンだが、子孫セレクタを使わずに済ませるため継承を使う。
 */
.feed-card__action {
    --feed-action-color: var(--fontcolor);
    --feed-action-fill: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.feed-card__action.is-liked,
.feed-card__action.is-following {
    --feed-action-color: var(--btncolor);
    --feed-action-fill: 1;
}

.feed-card__action:disabled {
    --feed-action-color: #c8c5cc;
    cursor: default;
}

/* リンクを外したカードのコメント（押せない件数表示） */
.feed-card__action--static {
    cursor: default;
}

/* リアクションボタン（actions-end スロット。マイページの自分の投稿のみ。PDF 1・6 ページ） */
.feed-card__reactions-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px 3px; 
    background-color: #fff;
    border: solid 1px #dddce1;
    border-radius: 6px;
    color: var(--fontcolor);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .08em;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity .2s;
    font-feature-settings: "palt" 1;
}

.feed-card__reactions-btn:hover {
    background-color: #f6f6f6;
}

/*
 * PC ではこの要素自体が丸ボタンの枠になり、数字は枠の外に出る。
 * 枠のためのラッパを挟まず、他ページのアクションボタン（ストーリー詳細のいいねボタンなど）と
 * 同じ「ボタン > アイコン + 数字」の 2 階層に揃える。
 */
.feed-card__action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--feed-action-color);
    font-variation-settings: 'FILL' var(--feed-action-fill);
}

/*
 * text-align と letter-spacing を明示するのは、アクションが <button>（いいね・フォロー）と
 * <a>（コメント）の 2 種類あるため。ブラウザの既定スタイルは <button> に対してだけ
 * text-align: center / letter-spacing: normal を当てるので、指定しないと同じクラスでも
 * <a> の数字だけが左寄せ・字送りありになり、アイコンとの間隔が 4px ずれる。
 * 中央寄せは他ページの .js-likes-count（stories.css）と同じ扱い。
 */
.feed-card__action-count {
    font-family: "Google Sans Flex", 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
    font-size: 14px;
    /* 1 桁のときの桁揃え用。固定幅にすると 2 桁以上で折り返す */
    min-width: 18px;
    white-space: nowrap;
    text-align: center;
    letter-spacing: normal;
}

/* ============================================================
   PC 版（PDF 1〜2 ページ目）。カードの幅 611px 以上（フィードの viewport 641px 以上）で 3 カラム。
   実測の 355 / 385 / 300px と一致する比率にしてあり、比率指定のため幅 611〜1120px でも崩れずに縮む。

   PC の 3 カラムはフィードの viewport 641px まで維持する（デザイナー PR tate9-3 で 781px から変更）。
   961px を境目にしていた旧実装では、780〜960px の帯で SP 版の
   固定幅サムネイル（162px）に対して本文が横に伸び切ってしまっていた（実測 854px）。
   ============================================================ */
@container feed-card (width > 610px) {
    .feed-card__frame {
        padding-bottom: 20px;
        border-radius: var(--feed-card-frame-radius, 6px);
    }

    .feed-card__header-end {
        top: 29px;
        right: 30px;
    }

    .feed-card__link {
        grid-template-columns: minmax(0, 15%) minmax(0, 1fr) minmax(0, 27%);
        grid-template-rows: 22px auto;
        grid-template-areas:
            "badges badges badges"
            "author main   thumb";
        padding: 32px 32px 12px;
        row-gap: 16px;
        column-gap: 36px;
    }

    /* 直前の .feed-card__badge の color:#fff で塗り替わらないよう、同じ詳細度でこの順に置く */
    .feed-card__badge--category {
        color: inherit;
    }
    /* バッジ行はサムネイルの列まで伸ばし、相対時刻をカード右端（＝サムネイルの右端）へ寄せる */
    .feed-card__time {
        font-size: 12px;
    }

    .feed-card__avatar {
        width: 48px;
        height: 48px;
    }

    .feed-card__name {
        margin-bottom: 6px;
        font-size: 14px;
        line-height: 1;
    }

    .feed-card__affiliation-icon {
        font-size: 16px;
    }

    .feed-card__main {
        margin-top: 0;
    }

    .feed-card__title {
        margin-bottom: 12px;
        line-height: 1.5;
        letter-spacing: .03em;
        font-feature-settings: "palt" 1;
    }

    .feed-card__icon {
        width: 24px;
        height: 24px;
        margin-top: 5px;
    }

    .feed-card__excerpt {
        font-size: 14px;
        line-height: 1.75;
        /* PC は折り返して 3 行まで出す */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        white-space: normal;
        color: var(--fontcolor2);
        letter-spacing: .05em;
    }

    .feed-card__thumb {
        margin-top: 0;
        border: 1px solid #f6f6f9;
    }

    .feed-card__action-count {
        font-size: 15px;
    }
    .feed-card__actions{
        margin: 0 32px;
    }
}

/* 本文タイトルタブレット用（カードの幅 891px 以下。フィードの viewport 921px 以下） */
@container feed-card (width <= 891px) {
     .feed-card__title {
        font-size: 20px;
     }
}

/* ============================================================
   カードの幅 450px 以下（フィードの viewport 480px 以下）。サムネイルとアバターを一段小さくする。
   カード間の余白（12px）は .feed-card の margin-bottom が持つ。
   ============================================================ */
@container feed-card (width <= 450px) {
    .feed-card__actions{
        gap: 8px;
    }
    .feed-card__header-end {
        top: 8px;
    }
    .feed-card__link{
        padding-top: 12px;
        row-gap: 12px;
    }
    .feed-card__badges{
        margin-bottom: 0px;
        justify-content: space-between;
    }
    .feed-card__badge{
        font-size: 10px;
        font-weight: 600;
    }
    .feed-card__avatar {
        width: 32px;
        height: 32px;
    }
    .feed-card__tag{
        padding-top: 4px;
        padding-bottom: 3px;
        font-size: 10px;
    }
    .feed-card__tag.feed-card__tag--more{
        font-size: 8px;
        padding: 4px 3px 3px;
    }
    /* 投稿者はアバターと名前を横に並べる */
    .feed-card__author {
        grid-template-columns: 32px minmax(0, 1fr);
        grid-template-rows: 1fr;
        grid-template-areas:  "avater names";
        column-gap: 8px;
        align-self: center;
    }
    .feed-card__title{
        font-size: 16px;
    }
    .feed-card__title-text{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        white-space: normal;
        overflow: hidden;
    }
    .feed-card__excerpt {
        margin-top: 4px;
    }
    .feed-card__affiliation{
        font-size: 10px;
    }
    .feed-card__action-count{
        font-size: 13px;
    }
    .feed-card__action-icon{
        font-size: 20px;
    }
    .feed-card__reactions-btn {
        padding: 2px 10px;
        font-size: 11px;
    }

}