/* components/rooms-carousel.css — 教室のご紹介 カルーセル（c-rooms）
   PC（>768px）は3カラムグリッド。SP（〜768px）は中央スナップのカルーセル
   （前後カードがチラ見え＋ドット＋左右矢印・無限ループ）。JS=assets/js/rooms-carousel.js。
   トップ（front-page「教室のご紹介」）と教室一覧ページ（kyoshitsu）で共用。
   カード本体は共通コンポーネント c-classroom-card。ここは配置・カルーセル挙動のみ担当。
   ※全幅ブリードは親 inner の SP 左右padding=16px（--space-16）を前提にする。 */

.c-rooms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-rooms-carousel { position: relative; }
/* ドット・矢印は PC では非表示（3カラムグリッドのため） */
.c-rooms__dots { display: none; }
.c-rooms__arrow { display: none; }
/* 埋めイラストはグリッド版のSPでのみ使う。既定（PC 3カラム／カルーセル版）では非表示。 */
.c-rooms__filler { display: none; }

/* SP：中央寄せカルーセル。スワイプ・慣性・軸判定・ループ・中央寄せは Swiper に一任する
   （JS=rooms-carousel.js／iOSで固まらない・縦スクロール誤爆なし）。ここはカードの見た目と
   矢印・ドットの装飾のみを担当する。 */
@media (max-width: 768px) {
  /* カルーセルは親 inner の左右padding（16px）を相殺して画面端まで全幅にする
     （前後カードが端まで覗く）。見出し・ボタンは inner の padding 内のまま。 */
  .c-rooms-carousel {
    margin-inline: calc(-1 * var(--space-16));
  }
  /* トラック＝Swiperの wrapper。横並び（flex）だけ指定し、送り・中央寄せ・間隔（gap）は
     Swiper が制御する（spaceBetween）。overflow/scroll-snap は持たせない。 */
  .c-rooms {
    display: flex;
    grid-template-columns: none;
    gap: 0;
  }
  /* SPカルーセルのカード＝Swiperスライド：幅180px（slidesPerView:'auto' が参照）。
     SP用の手描き枠（classroom-card-border_sp.webp）を border-image で適用。透明の実borderで
     枠帯ぶんのスペースを確保し、写真・テキストはその内側に収める（枠は四辺すべて見える）。 */
  .c-rooms > .c-classroom-card {
    flex: 0 0 180px;
    width: 180px;
    height: auto;
    padding: 0;
    gap: 0;
    border-image: url("../../images/common/classroom-card-border_sp.webp") 20 / 10px round;
    border-radius: 14px;
    overflow: hidden;            /* 角丸で写真の角をクリップ */
  }
  /* カード写真：枠内いっぱい・高さ65pxでトリム（object-fit:cover）。 */
  .c-rooms .c-classroom-card__photo {
    width: calc(100% - 4px);
    height: 65px;
    aspect-ratio: auto;
    margin: 2px 2px 0;
    border-radius: 0;
  }
  /* テキストブロック：Figma p-12 / gap-8。 */
  .c-rooms .c-classroom-card__info { padding: var(--space-12); }
  /* 教室名：Figma 16px / tracking 1.6px(=0.1em)。 */
  .c-rooms .c-classroom-card__name {
    font-size: var(--font-size-body);
    letter-spacing: 0.1em;
  }
  /* 住所：Figma 12.8px。 */
  .c-rooms .c-classroom-card__address { font-size: var(--font-size-h6); }
  /* 「詳細を見る」行：Figma 12.8px。区切り線は info の gap-8 の流れに乗せる。 */
  .c-rooms .c-classroom-card__link {
    margin-top: 0;
    padding-top: var(--space-8);
    font-size: var(--font-size-h6);
  }
  /* 区切り線はSPでは全幅。 */
  .c-rooms .c-classroom-card__link::before { inset-inline: 0; }
  /* 詳細を見るの矢印アイコンはSPでは16px（Figma）。 */
  .c-rooms .c-classroom-card__link-arrow {
    width: 16px; height: 16px;
    background-size: 16px;
  }
  .c-rooms::-webkit-scrollbar { display: none; }

  /* viewport は Swiper のコンテナ。Swiper が overflow:hidden / position:relative を付与する。
     矢印はこのコンテナ基準で配置するため position を保証しておく。 */
  .c-rooms__viewport { position: relative; }

  /* 左右矢印（Swiper初期化後のみ表示）。コンテナ基準で配置＝カード高さの上下中央（top:50%）。
     画面端から12pxに40pxの白丸＋やわらかい影。シェブロンは茶(#674428)の細線・丸キャップ。 */
  .c-rooms__viewport.swiper-initialized .c-rooms__arrow {
    display: block;
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3;
    width: 40px; height: 40px; padding: 0;
    border: none; border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--color-white) 85%, transparent);  /* やや透過 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }
  .c-rooms__arrow--prev {
    left: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14 8L10 12L14 16' stroke='%23674428' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .c-rooms__arrow--next {
    right: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 8L14 12L10 16' stroke='%23674428' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  /* ページネーションドット（PHP出力の<button>。JS=rooms-carousel.js が is-active を同期）。 */
  .c-rooms__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    margin-top: var(--space-24);
  }
  .c-rooms__dots button {
    width: var(--space-8); height: var(--space-8);
    padding: 0; border: none; cursor: pointer;
    border-radius: var(--radius-pill);
    background: var(--color-gray-pale);          /* 不活性ドット #e7e2de */
    transition: background-color 0.2s ease;
  }
  .c-rooms__dots .is-active { background: var(--color-brown-sub); }  /* 活性ドット #89705b */
}

/* --- グリッド版（c-rooms-carousel--grid）: SPでもカルーセル化せず2カラムで並べる ---
   教室一覧ページ（kyoshitsu）で使用。上のSPカルーセル指定を打ち消し、2カラムグリッドに戻す。
   カードのSP用手描き枠・写真トリム等の見た目はカルーセル版と共通のまま流用する。 */
@media (max-width: 768px) {
  /* 全幅ブリード（負マージン）を解除して inner の padding 内に収める。 */
  .c-rooms-carousel--grid { margin-inline: 0; }
  .c-rooms-carousel--grid .c-rooms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
    overflow: visible;
    scroll-snap-type: none;
    padding-inline: 0;
    scroll-padding-inline: 0;
    margin-inline: 0;
  }
  /* カードは固定180px幅をやめ、グリッド列いっぱいに広げる。 */
  .c-rooms-carousel--grid .c-rooms > .c-classroom-card {
    flex: initial;
    width: auto;
    scroll-snap-align: none;
  }
  /* 末尾の空き枠：イラストをセル中央に置いて余白の寂しさを軽減する。 */
  .c-rooms-carousel--grid .c-rooms__filler {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
  }
  .c-rooms-carousel--grid .c-rooms__filler img {
    width: auto;
    height: auto;
    max-width: 45%;
    max-height: 70%;
  }
}