/* ===========================================================
File: /assets/css/category-dorim-tech.css
説明: 未来‑Tech カテゴリ（/category/dorim-tech/）専用スタイル
      - ヒーロースライダー（Slick）
      - パンくず直下のコンテンツレイアウト
      - 上部サービスグリッド / 下部記事カード
=========================================================== */

/* 未来‑Tech: 固定幅を解除（ヒーローを全幅で使う） */
.container.dorim-tech {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* 内側ラッパ */
.ai-content-wrap{
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px;
}

/* =====================================
   Hero スライダー（16:9）
   ===================================== */

.ai-archive-hero {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto 24px;
  overflow: hidden;
  border-radius: 12px;
}

/* 基準要素（absolute は使わないが副作用回避のため relative） */
.ai-hero-slider {
  width: 100%;
  position: relative;
}

.ai-hero-slide {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.ai-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 12px;
}

/* ▼ ドットは“下”に表示（標準フローで配置） */
.ai-hero-slider .slick-dots{
  position: static;          /* ← absolute をやめる */
  bottom: auto;
  left: auto;
  transform: none;
  margin: 0;
  padding-top: 10px;         /* 画像との間隔 */
  display: flex;
  justify-content: center;
}

/* 視認性（色はテーマのままでもOK。ここでは白系を指定しない） */
.ai-hero-slider .slick-dots li { margin: 0 6px; }

/* Slick が付ける下余白を無効化（間延び防止） */
.ai-hero-slider.slick-initialized.slick-slider { margin-bottom: 0; }

/* ===== 未来‑Tech 専用 ===== */

.dorim-tech *{ box-sizing:border-box }

.dorim-tech .archive-title,
.dorim-tech h1.archive-title,
.dorim-tech .page-title-archive { display:none; }

/* 見出し */
.section-title{
  margin:18px 0 12px;
  font-size:20px;
  font-weight:700;
  letter-spacing:.02em;
}

/* ---------- フィルタバー ---------- */
.ai-filter-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin:10px 0 14px;
}
.ai-filter-form{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  width:100%;
}
.ai-filter-form .form-field{ display:flex; align-items:center; gap:8px; }
.ai-filter-form label{ font-size:13px; color:#666; }
.ai-filter-form select{
  padding:8px 10px; border:1px solid #e1e1ea; border-radius:8px;
  min-width:220px; font-size:14px; background:#fff;
}
.ai-filter-form input[type="search"]{
  padding:8px 10px; border:1px solid #e1e1ea; border-radius:8px;
  min-width:240px; font-size:14px; line-height:1.2; background:#fff;
}
.ai-filter-form button{
  padding:8px 12px; border:1px solid #e1e1ea; border-radius:8px;
  background:#fff; cursor:pointer; font-size:14px; line-height:1;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ai-filter-form button:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.ai-filter-form .filter-clear{ text-decoration:underline; font-size:14px; }

/* ---------- 上部：AIサービス グリッド ---------- */
.service-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 220px));
  gap:10px; justify-content:start; margin-bottom:10px;
}
.service-card{
  position:relative; display:flex; flex-direction:column;
  border:1px solid #e6e6ea; border-radius:12px; background:#fff; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.service-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.10); border-color:#e3e3ee; }
.logo-wrap{ display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1 / 1; background:#f7f8fc; overflow:hidden; }
.service-logo{ width:100%; height:100%; object-fit:contain; display:block; padding:8px; background:#fff; }
.service-logo.ph{ width:100%; height:100%; background:linear-gradient(180deg,#f7f8fc,#eff2f8); }
.service-open-btn{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:999px;
  background:#fff; border:1px solid #e6e6ef; display:grid; place-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none; transition:transform .12s ease;
}
.service-open-btn:hover{ transform:translateY(-1px); }
.service-open-btn .arrow{ width:9px; height:9px; border-right:2px solid #333; border-bottom:2px solid #333; transform:rotate(-45deg); }
.service-card .meta{ padding:8px 10px 10px; display:flex; flex-direction:column; gap:4px; }
.service-card .name{ margin:0; font-size:15px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.service-card .name a{ color:inherit; text-decoration:none; }
.service-card .name a:hover{ text-decoration:underline; }
.service-card .summary{ margin:0; color:#444; font-size:13px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.service-card .summary:empty{ display:none; }
.section-more-row{ margin-top:6px; text-align:right; }
.section-more{ display:inline-block; text-decoration:none; font-size:14px; }

@media (max-width: 720px){
  .service-list{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:6px; }
}

/* ---------- 下部：カテゴリ記事カード ---------- */
.ai-articles-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 340px));
  justify-content:start; gap:16px; margin-top:10px;
}
.ai-article-card{
  background:#fff; border:1px solid #e9e9ef; border-radius:16px; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ai-article-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.10); border-color:#e3e3ee; }
.ai-article-card .thumb{ display:block; aspect-ratio:16 / 9; overflow:hidden; background:#f6f7fb; }
.ai-article-card .thumb.ph{ background:linear-gradient(180deg,#f7f8fc,#eff2f8); }
.ai-article-card .ai-article-thumb{ width:100%; height:100%; object-fit:cover; display:block; }
.ai-article-card .meta{ padding:12px 14px 14px; }
.ai-article-card .title{ margin:0 0 6px; font-size:16px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ai-article-card .title a{ color:inherit; text-decoration:none; }
.ai-article-card .title a:hover{ text-decoration:underline; }
.ai-article-card .excerpt{ margin:6px 0 0; font-size:14px; line-height:1.7; color:#444; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* 0件メッセージ */
.ai-articles-empty{
  border:1px dashed #e3e3ee; border-radius:12px; padding:16px; background:#fafafe; color:#555;
}

/* ページネーション */
.ai-articles-more{ margin:16px 0 8px; text-align:right; }
.ai-articles-more .page-numbers{
  display:inline-block; min-width:32px; height:32px; line-height:32px; text-align:center;
  margin-left:4px; padding:0 8px; border:1px solid #e1e1ea; border-radius:8px; text-decoration:none; background:#fff; font-size:14px;
}
.ai-articles-more .page-numbers.current{ background:#111; color:#fff; border-color:#111; }
.ai-articles-more .page-numbers:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.10); }

@media (max-width: 720px){
  .ai-articles-list{ grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
}