/**
 * WordPress Core Styles - ブロックライブラリのスタイルを既存CSSに影響を与えずに適用
 * 
 * このCSSは、WordPressのGutenbergエディタで作成されたコンテンツ（段落、見出し、
 * 画像、ボタン、カラムなど）を正しく表示するためのものです。
 * 
 * 既存のサイトデザインを保護するため、.topics クラス内のコンテンツにのみ
 * WordPressスタイルを適用します。
 */

/* ==========================================================================
   WordPress ブロックエディタの基本スタイル
   ========================================================================== */

/* お知らせ本文エリア内でのみWordPressスタイルを適用 */
.topics .wp-block-image,
.topics .wp-block-gallery,
.topics .wp-block-columns,
.topics .wp-block-column,
.topics .wp-block-group,
.topics .wp-block-media-text,
.topics .wp-block-quote,
.topics .wp-block-pullquote,
.topics .wp-block-button,
.topics .wp-block-buttons,
.topics .wp-block-table,
.topics .wp-block-list,
.topics .wp-block-separator {
    /* WordPressブロックのリセット */
    box-sizing: border-box;
}

/* 画像ブロック */
.topics .wp-block-image {
    margin: 0 0 1em 0;
}

.topics .wp-block-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

.topics .wp-block-image.alignleft {
    float: left;
    margin-right: 1em;
}

.topics .wp-block-image.alignright {
    float: right;
    margin-left: 1em;
}

.topics .wp-block-image.aligncenter {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.topics .wp-block-image figcaption {
    font-size: 12px;
    color: #666;
    text-align: center;
    margin-top: 0.5em;
}

/* ギャラリーブロック（WordPress 5.9以降の新しい構造にも対応） */
.topics .wp-block-gallery {
    display: grid;
    /* デフォルトは自動調整（カラム数が指定されていない場合） */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1em;
    list-style-type: none;
    padding: 0;
    margin: 0 0 1em 0;
}

/* WordPress 5.9+ の新しいギャラリー構造 */
.topics figure.wp-block-gallery {
    margin: 0 0 1em 0;
}

.topics .wp-block-gallery.has-nested-images figure.wp-block-image {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    position: relative;
    flex-direction: column;
    margin: 0;
    width: 100%;
}

/* カラム数の動的制御（1〜8カラムに対応） */
/* columns-1 */
.topics .wp-block-gallery.columns-1 {
    grid-template-columns: repeat(1, 1fr);
}

/* columns-2 */
.topics .wp-block-gallery.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* columns-3 */
.topics .wp-block-gallery.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* columns-4 */
.topics .wp-block-gallery.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* columns-5 */
.topics .wp-block-gallery.columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

/* columns-6 */
.topics .wp-block-gallery.columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* columns-7 */
.topics .wp-block-gallery.columns-7 {
    grid-template-columns: repeat(7, 1fr);
}

/* columns-8 */
.topics .wp-block-gallery.columns-8 {
    grid-template-columns: repeat(8, 1fr);
}

/* レガシーギャラリー構造のサポート（フレックスボックスベース） */
.topics ul.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
}

.topics ul.wp-block-gallery .wp-block-image,
.topics ul.wp-block-gallery .blocks-gallery-item {
    margin: 0;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;
    /* レガシー構造のデフォルトは2カラム */
    width: calc(50% - 0.5em);
}

/* レガシー構造のカラム数制御 */
.topics ul.wp-block-gallery.columns-1 .wp-block-image,
.topics ul.wp-block-gallery.columns-1 .blocks-gallery-item {
    width: 100%;
}

.topics ul.wp-block-gallery.columns-2 .wp-block-image,
.topics ul.wp-block-gallery.columns-2 .blocks-gallery-item {
    width: calc(50% - 0.5em);
}

.topics ul.wp-block-gallery.columns-3 .wp-block-image,
.topics ul.wp-block-gallery.columns-3 .blocks-gallery-item {
    width: calc(33.33% - 0.67em);
}

.topics ul.wp-block-gallery.columns-4 .wp-block-image,
.topics ul.wp-block-gallery.columns-4 .blocks-gallery-item {
    width: calc(25% - 0.75em);
}

.topics ul.wp-block-gallery.columns-5 .wp-block-image,
.topics ul.wp-block-gallery.columns-5 .blocks-gallery-item {
    width: calc(20% - 0.8em);
}

.topics ul.wp-block-gallery.columns-6 .wp-block-image,
.topics ul.wp-block-gallery.columns-6 .blocks-gallery-item {
    width: calc(16.66% - 0.83em);
}

.topics ul.wp-block-gallery.columns-7 .wp-block-image,
.topics ul.wp-block-gallery.columns-7 .blocks-gallery-item {
    width: calc(14.28% - 0.86em);
}

.topics ul.wp-block-gallery.columns-8 .wp-block-image,
.topics ul.wp-block-gallery.columns-8 .blocks-gallery-item {
    width: calc(12.5% - 0.88em);
}

/* 画像の表示制御 */
.topics .wp-block-gallery img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 100%;
    object-fit: cover;
}

.topics .wp-block-gallery.is-cropped img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topics .wp-block-gallery figcaption {
    font-size: 12px;
    color: #666;
    text-align: center;
    margin-top: 0.5em;
    padding: 0.5em;
}

/* ギャラリーのレスポンシブ対応 */
@media (max-width: 600px) {
    /* スマートフォンでは最大2カラムに制限 */
    .topics .wp-block-gallery.columns-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .topics .wp-block-gallery.columns-2,
    .topics .wp-block-gallery.columns-3,
    .topics .wp-block-gallery.columns-4,
    .topics .wp-block-gallery.columns-5,
    .topics .wp-block-gallery.columns-6,
    .topics .wp-block-gallery.columns-7,
    .topics .wp-block-gallery.columns-8 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* レガシー構造のレスポンシブ */
    .topics ul.wp-block-gallery .wp-block-image,
    .topics ul.wp-block-gallery .blocks-gallery-item {
        width: calc(50% - 0.5em) !important;
    }
    
    .topics ul.wp-block-gallery.columns-1 .wp-block-image,
    .topics ul.wp-block-gallery.columns-1 .blocks-gallery-item {
        width: 100% !important;
    }
}

/* カラムブロック */
.topics .wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1em;
}

.topics .wp-block-column {
    flex: 1;
    margin: 0 1em 0 0;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.topics .wp-block-column:last-child {
    margin-right: 0;
}

/* 引用ブロック */
.topics .wp-block-quote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 4px solid #ccc;
}

.topics .wp-block-quote p {
    font-style: italic;
    margin: 0.5em 0;
}

.topics .wp-block-quote cite {
    display: block;
    font-size: 0.9em;
    color: #666;
    margin-top: 0.5em;
}

/* プルクオート */
.topics .wp-block-pullquote {
    margin: 1.5em 0;
    padding: 1em 0;
    border-top: 4px solid #ccc;
    border-bottom: 4px solid #ccc;
    text-align: center;
}

.topics .wp-block-pullquote blockquote {
    margin: 0;
    font-size: 1.2em;
    font-style: italic;
}

/* ボタンブロック */
.topics .wp-block-buttons {
    margin: 1em 0;
}

.topics .wp-block-button {
    display: inline-block;
    margin: 0 0.5em 0.5em 0;
}

.topics .wp-block-button__link {
    background-color: #32373c;
    color: #fff;
    padding: 0.7em 1.5em;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    border: none;
}

.topics .wp-block-button__link:hover {
    background-color: #23282d;
}

.topics .wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: 2px solid currentColor;
    color: #32373c;
}

/* テーブルブロック */
.topics .wp-block-table {
    margin: 1em 0;
    border-collapse: collapse;
    width: 100%;
}

.topics .wp-block-table table {
    width: 100%;
}

.topics .wp-block-table td,
.topics .wp-block-table th {
    padding: 0.5em;
    border: 1px solid #ddd;
}

.topics .wp-block-table th {
    font-weight: bold;
    background-color: #f5f5f5;
}

/* リストブロック */
.topics .wp-block-list {
    margin: 1em 0;
    padding-left: 2em;
}

.topics .wp-block-list li {
    margin-bottom: 0.5em;
}

/* 区切りブロック */
.topics .wp-block-separator {
    border: none;
    border-top: 1px solid #ccc;
    margin: 2em auto;
}

.topics .wp-block-separator.is-style-wide {
    width: 100%;
}

.topics .wp-block-separator.is-style-dots {
    border: none;
    text-align: center;
    max-width: 100%;
    line-height: 1;
    height: auto;
}

.topics .wp-block-separator.is-style-dots:before {
    content: '···';
    color: #ccc;
    font-size: 20px;
    letter-spacing: 2em;
    padding-left: 2em;
    font-family: serif;
}

/* メディアとテキストブロック */
.topics .wp-block-media-text {
    display: grid;
    grid-template-rows: auto;
    align-items: center;
    grid-template-areas: "media-text-media media-text-content";
    grid-template-columns: 50% 1fr;
    margin-bottom: 1em;
}

.topics .wp-block-media-text.has-media-on-the-right {
    grid-template-areas: "media-text-content media-text-media";
    grid-template-columns: 1fr 50%;
}

.topics .wp-block-media-text .wp-block-media-text__media {
    grid-area: media-text-media;
    margin: 0;
}

.topics .wp-block-media-text .wp-block-media-text__content {
    grid-area: media-text-content;
    padding: 0 8% 0 8%;
}

/* グループブロック */
.topics .wp-block-group {
    margin: 1em 0;
}

.topics .wp-block-group__inner-container {
    padding: 1em;
}

/* 配置クラス */
.topics .alignleft {
    float: left;
    margin-right: 1em;
}

.topics .alignright {
    float: right;
    margin-left: 1em;
}

.topics .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.topics .alignwide {
    max-width: 100%;
}

.topics .alignfull {
    max-width: 100%;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}

/* WordPress埋め込みコンテンツ */
.topics .wp-block-embed {
    margin: 1em 0;
}

.topics .wp-block-embed iframe,
.topics .wp-block-embed embed,
.topics .wp-block-embed object,
.topics .wp-block-embed video {
    max-width: 100%;
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
    .topics .wp-block-columns {
        flex-direction: column;
    }
    
    .topics .wp-block-column {
        margin-right: 0;
        margin-bottom: 1em;
    }
    
    .topics .wp-block-media-text {
        grid-template-columns: 100% !important;
        grid-template-areas: "media-text-media" "media-text-content" !important;
    }
    
    .topics .wp-block-media-text .wp-block-media-text__content {
        padding: 1em 0;
    }
}

/* ==========================================================================
   WordPress デフォルトクラスのサポート
   ========================================================================== */

/* WordPressの標準的な段落・見出しスタイル（既存のスタイルを尊重） */

.topics .has-text-align-left {
    text-align: left;
}

.topics .has-text-align-center {
    text-align: center;
}

.topics .has-text-align-right {
    text-align: right;
}

/* カラークラス（必要に応じて追加可能） */
.topics .has-background {
    padding: 1em;
}

/* ==========================================================================
   既存の画像リスト（ul.news_photo_list）のサポート
   ========================================================================== */

/* 既存のnews/index.htmlで使用されている画像リストにもギャラリー風のスタイルを適用 */
.topics ul.news_photo_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1em;
    list-style-type: none;
    padding: 0;
    margin: 1em 0;
}

.topics ul.news_photo_list li {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.topics ul.news_photo_list img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 100%;
    object-fit: cover;
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
    .topics ul.news_photo_list {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}