/* =========================================================
   Theme C: Hero Gradient (Optimized)
   - 1カラム縦並び・大きめタイル
   - 右側に連結する「追加」ボタン対応（+ アイコン大 / 下部文言）
   - 単独 <a> タイル と .tile-row の混在OK
   ========================================================= */

:root{
  color-scheme: light dark;
  /* Colors */
  --bg-dark: #0b1020;
  --fg-dark: #e5e7eb;
  --muted-dark:#94a3b8;
  --tile-dark:#111827;
  --tile-bd-dark:#1f2937;
  --accent-dark:#38bdf8;

  --bg-light:#fbfdff;
  --fg-light:#0f172a;
  --muted-light:#475569;
  --tile-light:#ffffff;
  --tile-bd-light:#e5e7eb;
  --accent-light:#06b6d4;

  /* Layout */
  --maxw: 1100px;

  /* Tile sizing */
  --tile-radius: 18px;
  --tile-pad-x: clamp(22px, 3.2vw, 28px);
  --tile-pad-t: clamp(28px, 5vw, 44px);
  --tile-pad-b: clamp(56px, 7vw, 72px);
  --tile-minh: clamp(120px, 20vw, 180px);
  --tile-fs: clamp(1.05rem, 1.2vw + 0.6rem, 1.3rem);

  /* Captions */
  --cap-fs: clamp(.9rem, .6vw + .6rem, 1.05rem);
  --cap-bottom: clamp(12px, 2vw, 22px);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: var(--bg-dark);
    --fg: var(--fg-dark);
    --muted: var(--muted-dark);
    --tile: var(--tile-dark);
    --tile-bd: var(--tile-bd-dark);
    --accent: var(--accent-dark);
  }
}
@media (prefers-color-scheme: light){
  :root{
    --bg: var(--bg-light);
    --fg: var(--fg-light);
    --muted: var(--muted-light);
    --tile: var(--tile-light);
    --tile-bd: var(--tile-bd-light);
    --accent: var(--accent-light);
  }
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Noto Sans JP","Yu Gothic","Meiryo",Arial,sans-serif;
  background: var(--bg);
  color: var(--fg);
}

/* ===== Hero (上部帯) ===== */
.hero{
  position:relative;
  padding: 72px 16px 48px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:-20% -10% auto -10%;
  height: 60vh; min-height:420px;
  background:
    radial-gradient(600px 280px at 20% 10%, color-mix(in oklab, var(--accent) 55%, transparent), transparent 60%),
    radial-gradient(700px 320px at 90% 0%,  color-mix(in oklab, var(--accent) 35%, transparent), transparent 70%);
  filter: blur(24px) saturate(120%);
  opacity:.6; pointer-events:none;
}
.wrap{max-width:var(--maxw); margin:0 auto; position:relative}
h1{margin:0 0 8px; font-size: clamp(30px, 5vw, 48px); letter-spacing:.01em;}
p{margin:0; color:var(--muted)}

/* ===== Tiles Section ===== */
.section{padding: 24px 16px 72px;}
.grid.albums{display:grid; gap:18px; grid-template-columns: 1fr;} /* 常に縦1列 */

/* ▼ 単独 <a> タイル（フォールバック） */
h1 ~ a{
  display:block; text-decoration:none; color:inherit;
  background: var(--tile);
  border: 1px solid var(--tile-bd);
  border-radius: var(--tile-radius);
  padding: var(--tile-pad-t) var(--tile-pad-x) var(--tile-pad-b);
  position: relative; overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: var(--tile-minh);
  font-size: var(--tile-fs);
  margin-top:14px;
  max-width: min(1080px, 92vw);
  margin-inline: auto;
}

/* ▼ アルバムグリッド直下の単独 <a>（行頭余白の整合） */
.albums > a { margin-top:0; }

/* ▼ 行コンテナ（メインリンク + 追加ボタン） */
.tile-row{
  display:flex; align-items:stretch; gap:0;
  width:100%;
  max-width: min(1080px, 92vw);
  margin:0 auto; /* グリッド内で中央寄せ */
}

/* ===== メインタイル ===== */
.tile-link{
  display:block; text-decoration:none; color:inherit;
  background: var(--tile);
  border: 1px solid var(--tile-bd);
  border-right: none; /* 右側をボタンに譲る */
  border-radius: var(--tile-radius) 0 0 var(--tile-radius);
  padding: var(--tile-pad-t) var(--tile-pad-x) var(--tile-pad-b);
  position: relative; overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  flex: 1 1 auto;
  min-height: var(--tile-minh);
  font-size: var(--tile-fs);
}

/* メインタイル下部ラベル（追加ボタンは除外） */
h1 ~ a:not(.tile-action)::after,
.albums a:not(.tile-action)::after,
.tile-link::after{
  content: "アルバムを開く";
  position: absolute;
  left: 20px; bottom: var(--cap-bottom);
  font-size: var(--cap-fs);
  opacity: .6;
  pointer-events:none;
}

/* ===== 追加ボタン（右側に連結） ===== */
.tile-action{
  position: relative;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: inherit;

  /* 見た目＋連結境界 */
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--accent) 20%, transparent) 0 100%),
    var(--tile);
  border: 1px solid color-mix(in oklab, var(--accent) 50%, var(--tile-bd) 50%);
  border-radius: 0 var(--tile-radius) var(--tile-radius) 0;
  margin-left: -1px; /* ボーダーを重ねて継ぎ目を消す */

  min-width: clamp(110px, 16vw, 160px);
  padding: var(--tile-pad-t) var(--tile-pad-x) var(--tile-pad-b);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;

  /* 中のテキストは視覚的に隠す（アクセシビリティは aria-label で担保） */
  font-size: 0; line-height: 0;
}

/* 追加ボタン：上部の大きな「+」 */
.tile-action::before{
  content:"+";
  position:absolute;
  top: clamp(10px, 2vw, 16px);
  left:50%; transform: translateX(-50%);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  line-height: 1;
  opacity:.9;
  pointer-events:none;
}

/* 追加ボタン：下部キャプション */
.tile-action::after{
  content:"写真をアルバムに追加";
  position:absolute; left:20px; right:20px; bottom: var(--cap-bottom);
  font-size: var(--cap-fs);
  line-height: 1.2;
  opacity:.78;
  text-align:left;
  pointer-events:none;
}

/* ===== Hover / Focus ===== */
/* 単独タイル */
h1 ~ a:hover,
.albums > a:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 50%, var(--tile-bd) 50%);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

/* 連結タイル（行全体で連動） */
.tile-row:hover .tile-link,
.tile-row:hover .tile-action{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}
.tile-row:hover .tile-link{
  border-color: color-mix(in oklab, var(--accent) 50%, var(--tile-bd) 50%);
}
.tile-row:hover .tile-action{
  border-color: color-mix(in oklab, var(--accent) 65%, var(--tile-bd) 35%);
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--accent) 28%, transparent) 0 100%),
    var(--tile);
}

/* キーボードフォーカス */
a:focus-visible,
.tile-link:focus-visible,
.tile-action:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--accent) 60%, white 40%);
  outline-offset: 3px;
  border-radius: calc(var(--tile-radius) + 2px);
}

/* ===== Optional: PCで2列にしたい場合は有効化 ===== */
/*
@media (min-width: 900px){
  .grid.albums{ grid-template-columns: 1fr 1fr; }
}
*/

/* ── 単独 <a> タイル（追加ボタンなし）の右側を丸く閉じる ── */
/* .albums 直下の <a> を .tile-link と同等の“タイル化”にする */
.albums > a:not(.tile-action) {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--tile);
  border: 1px solid var(--tile-bd);              /* 右枠を含む全辺の枠 */
  border-radius: var(--tile-radius);             /* 右側も丸く */
  padding: var(--tile-pad-t) var(--tile-pad-x) var(--tile-pad-b);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: var(--tile-minh);
  font-size: var(--tile-fs);

  /* 1カラム時の中央寄せ＆幅をタイル行と合わせる */
  max-width: min(1080px, 92vw);
  margin-inline: auto;
}

/* ラベルは従来どおり表示（明示しておくと安心） */
.albums > a:not(.tile-action)::after {
  content: "アルバムを開く";
  position: absolute;
  left: 20px;
  bottom: var(--cap-bottom);
  font-size: var(--cap-fs);
  opacity: .6;
  pointer-events: none;
}

/* ── 安全策：.tile-row を使ったが .tile-action を付けなかった場合 ── */
/* その場合も右側を閉じて“単独タイル”の見た目に戻す */
.tile-row > .tile-link:last-child {
  border-right: 1px solid var(--tile-bd);
  border-radius: var(--tile-radius);
}

/* 単独 <a> タイルの横幅を .tile-row と揃える（グリッド内） */
.albums > a:not(.tile-action) {
  width: 100%;                            /* まずトラック幅いっぱいに */
  max-width: min(1080px, 92vw);           /* .tile-row と同じ上限 */
  margin-inline: auto;                    /* 上限に達したら中央寄せ */
}

/* フォールバック：.albums を使わず h1 直後に並ぶ単独 <a> も揃える */
h1 ~ a:not(.tile-action) {
  width: 100%;
  max-width: min(1080px, 92vw);
  margin-inline: auto;
}