/* =========================================================
   フクブルランキング
   ========================================================= */

.wp-block-fukubull-ranking-list,
.fukubull-ranking-list,
.fukubull-ranking-list-editor,
.fukubull-ranking-editor-preview {
    width:100%;
    margin:0;
    padding:0;
}


/* =========================================================
   1記事
   ========================================================= */

.fukubull-ranking-item {
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr);
    align-items:start;

    gap:var(--fb-item-gap,14px);

    width:100%;
    margin:0;

    padding:
        var(--fb-pt,16px)
        var(--fb-pr,0px)
        var(--fb-pb,16px)
        var(--fb-pl,0px);

    background:
        var(--fb-item-bg,transparent);

    border:0;

    border-bottom:
        var(--fb-item-border-bottom,1px)
        solid
        var(--fb-item-border-color,#eeeeee);

    border-radius:
        var(--fb-item-radius,0);

    box-sizing:border-box;
}


/* =========================================================
   ランキング番号
   ========================================================= */

.fukubull-ranking-number {
    display:inline-flex;
    justify-content:center;
    align-items:center;

    width:
        var(--fb-rank-w,34px);

    min-width:
        var(--fb-rank-w,34px);

    height:
        var(--fb-rank-h,34px);

    padding:0 5px;

    color:
        var(--fb-rank-color,#ffffff);

    background:
        var(--fb-rank-bg,#ffbb00);

    border-color:
        var(--fb-rank-border-color,transparent);

    border-width:
        var(--fb-rank-border-width,0px);

    border-style:
        var(--fb-rank-border-style,solid);

    border-radius:
        var(--fb-rank-radius,0);

    font-size:
        var(--fb-rank-fs,15px);

    font-weight:
        var(--fb-rank-fw,700);

    line-height:1;

    box-sizing:border-box;
}


/* =========================================================
   画像
   ========================================================= */

.fukubull-ranking-image {
    display:block;

    width:
        var(--fb-img-w,90px);

    height:
        var(--fb-img-h,68px);

    overflow:hidden;

    border-radius:
        var(--fb-img-radius,0);
}

.fukubull-ranking-image img {
    display:block;
    width:100%;
    height:100%;
    margin:0;

    object-fit:
        var(--fb-img-fit,cover);
}


/* 編集画面でREST画像URL取得がない場合の領域 */
.fukubull-ranking-image-placeholder {
    display:flex;
    justify-content:center;
    align-items:center;

    background:#eeeeee;
    color:#888888;

    font-size:11px;
}


/* =========================================================
   コンテンツ
   ========================================================= */

.fukubull-ranking-content {
    min-width:0;
}

.fukubull-ranking-meta {
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin:0 0 4px;

    color:
        var(--fb-meta-color,#e87511);

    font-size:
        var(--fb-meta-fs,12px);

    line-height:1.5;
    font-weight:700;
}

.fukubull-ranking-title {
    margin:0 0 5px;
    padding:0;

    color:
        var(--fb-title-color,#333333);

    font-size:
        var(--fb-title-fs,16px);

    font-weight:
        var(--fb-title-fw,700);

    line-height:
        var(--fb-title-lh,1.55);
}

.fukubull-ranking-title a {
    color:inherit;
    text-decoration:none;
}

.fukubull-ranking-excerpt {
    margin:0;

    color:
        var(--fb-excerpt-color,#666666);

    font-size:
        var(--fb-excerpt-fs,13px);

    line-height:
        var(--fb-excerpt-lh,1.7);
}


/* =========================================================
   編集画面
   ========================================================= */

.fukubull-ranking-item-editor {
    width:100%;
}

.fukubull-ranking-empty-item {
    display:flex;
    align-items:center;
    gap:14px;

    min-height:60px;

    padding:12px 0;

    color:#777777;
    font-size:13px;

    border-bottom:1px solid #eeeeee;
}

.fukubull-ranking-color-control {
    margin-bottom:18px;
}

.fukubull-ranking-control-label {
    margin-bottom:8px;
    font-size:11px;
    font-weight:600;
}


/* =========================================================
   スマホ
   ========================================================= */

@media screen and (max-width:600px) {

    .fukubull-ranking-item {
        grid-template-columns:
            auto
            auto
            minmax(0,1fr);

        gap:10px;
    }
}