/*
Theme Name: Colorful Creator
Theme URI: https://example.com/colorful-creator
Author: Development Team
Author URI: https://example.com
Description: A vibrant block theme for creative professionals featuring colorful design elements and modern animations.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: colorful-creator
Tags: block-themes, full-site-editing, blog, portfolio, creative
*/

/* ロールバック: aspect-ratio ユーティリティの撤回（従来の絶対配置へ） */

/* WordPress Block Theme Compatibility */
.wp-site-blocks {
  padding: 0;
  margin: 0;
}

.wp-block-group {
  margin: 0;
}

.wp-block-post-template {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Additional WordPress-specific overrides if needed */

/* Header: rollback custom nav spacing and logo sizing */
/* 以前のWordPressブロックのデフォルト挙動へ復帰（明示的なgap/width指定を削除） */

/* Mega Marquee: First View (Hero) */
.mega-marquee__article-panels {
  position: relative;
}
.mega-marquee__article-panels > a.article-panel {
  display: block;
  text-decoration: none;
  color: inherit;
}
.article-panel__inner {
  position: relative;
  width: 100%;
  display: block;
  height: auto;
  /* ロールバック: 最低高さを設定し、絶対配置画像の土台を確保 */
  min-height: 266px;
}
.article-panel__image {
  /* ロールバック: コンテナいっぱいに画像を敷き詰める（旧仕様） */
  position: absolute;
  inset: 0;
  z-index: 0;
}
.article-panel__image img {
  width: 100%;
  /* ロールバック: 画像はコンテナ全体を覆う */
  height: 100%;
  object-fit: cover;
  display: block;
}
/* SPECIAL grid tiles: enforce aspect ratio for stable image layout */
.specials__grid .article-panel__inner {
  aspect-ratio: var(--aspect-ratio, 16/9);
}
.article-panel__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 36px 40px;
  background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0.35), rgba(0,0,0,0));
  color: var(--color, inherit);
  z-index: 1;
}
.article-panel__body h2 {
  font-size: clamp(22px, 4vw, 36px);
  line-height: 1.25;
}
.tags.montserrat.outline { /* 基準スタイルは niewmedia-original.css に委譲 */ }
.meta-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}
.meta-badge__contributor .avator img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
}

@media (max-width: 768px) {
  .article-panel__body {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 20px;
  }
  .article-panel__body h2 {
    font-size: clamp(18px, 6vw, 24px);
  }
}