/*
Theme Name: HSD Piano Auto Theme
Theme URI: https://example.com/
Author: Hyper Speed Design
Description: ピアノ教室向け。Googleフォーム等から教室情報・デザイン・カラー・フォントを自動反映できるGutenberg対応ブロックテーマ。
Version: 1.3.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: hsd-piano-auto
*/

:root {
  --hsd-main: #b76e79;
  --hsd-sub: #fff7f8;
  --hsd-accent: #8f5360;
  --hsd-text: #2f2a2b;
  --hsd-heading-font: "Noto Serif JP", serif;
  --hsd-body-font: "Noto Sans JP", sans-serif;
  --hsd-radius: 18px;
}

body { color: var(--hsd-text); font-family: var(--hsd-body-font); background: #fff; }
h1,h2,h3,h4,h5,h6 { font-family: var(--hsd-heading-font); }
a { color: var(--hsd-main); }
.hsd-section { padding: clamp(48px,7vw,90px) 20px; }
.hsd-soft { background: var(--hsd-sub); }
.hsd-title { color: var(--hsd-main); text-align:center; margin-bottom: 28px; }
.hsd-card { background:#fff; border-radius:var(--hsd-radius); padding:28px; box-shadow:0 10px 30px rgba(0,0,0,.06); }
.hsd-btn .wp-block-button__link { background:var(--hsd-main); border-radius:999px; color:#fff; padding:.9em 1.6em; }
.hsd-hero { min-height:68vh; display:flex; align-items:center; position:relative; overflow:hidden; }
.hsd-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.55)); z-index:0; }
.hsd-hero > * { position:relative; z-index:1; }
.hsd-contact { background:var(--hsd-main); color:#fff; }
.hsd-contact h2 { color:#fff; }
.hsd-meta { display:grid; grid-template-columns: 160px 1fr; gap:12px; max-width:760px; margin:auto; }
.hsd-meta dt { font-weight:700; }
.hsd-meta dd { margin:0; }

body.hsd-design-cute { --hsd-radius:26px; }
body.hsd-design-elegant { --hsd-radius:6px; letter-spacing:.02em; }
body.hsd-design-natural { --hsd-radius:14px; }
body.hsd-design-simple { --hsd-radius:0px; }

@media (max-width: 700px) {
  .hsd-section { padding:42px 18px; }
  .hsd-meta { grid-template-columns:1fr; }
  .hsd-meta dt { margin-top:10px; }
  .hsd-hero { min-height:58vh; }
}

/* Multiple lesson courses */
.hsd-course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:32px}
.hsd-course-card{background:#fff;border:1px solid color-mix(in srgb,var(--hsd-main) 24%,#fff);border-radius:18px;padding:26px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.hsd-course-card h3{font-family:var(--hsd-heading-font);color:var(--hsd-accent);margin-top:0;margin-bottom:18px}
.hsd-course-meta{margin:0 0 18px}.hsd-course-meta div{display:grid;grid-template-columns:80px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid #eee}.hsd-course-meta dt{font-weight:700;color:var(--hsd-main)}.hsd-course-meta dd{margin:0}
.hsd-design-elegant .hsd-course-card{border-radius:4px}.hsd-design-simple .hsd-course-card{border-radius:8px;box-shadow:none}.hsd-design-cute .hsd-course-card{border-radius:24px}.hsd-design-natural .hsd-course-card{border-radius:14px}
@media(max-width:600px){.hsd-course-grid{grid-template-columns:1fr}.hsd-course-meta div{grid-template-columns:72px 1fr}}

/* Multiple teachers */
.hsd-teacher-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;margin-top:32px}
.hsd-teacher-card{background:#fff;border:1px solid color-mix(in srgb,var(--hsd-main) 22%,#fff);border-radius:var(--hsd-radius);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.hsd-teacher-image{aspect-ratio:4/3;background:var(--hsd-sub);overflow:hidden}.hsd-teacher-image img{width:100%;height:100%;object-fit:cover;display:block}
.hsd-teacher-body{padding:24px}.hsd-teacher-card h3{margin:0 0 6px;color:var(--hsd-accent);font-family:var(--hsd-heading-font)}
.hsd-teacher-role{margin:0 0 16px;color:var(--hsd-main);font-weight:700}.hsd-teacher-meta{margin:0 0 16px}.hsd-teacher-meta div{padding:7px 0;border-bottom:1px solid #eee}.hsd-teacher-meta dt{font-weight:700;font-size:.88em;color:var(--hsd-main)}.hsd-teacher-meta dd{margin:2px 0 0}
.hsd-teacher-profile p{margin:.7em 0}.hsd-teacher-message{background:var(--hsd-sub);border-radius:12px;padding:14px 16px;margin:18px 0 0}
.hsd-design-simple .hsd-teacher-card{box-shadow:none}.hsd-design-elegant .hsd-teacher-message{border-radius:2px}.hsd-design-cute .hsd-teacher-message{border-radius:20px}
@media(max-width:600px){.hsd-teacher-grid{grid-template-columns:1fr}.hsd-teacher-body{padding:20px}}

/* Classroom gallery */
.hsd-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.hsd-gallery-item{margin:0;border-radius:var(--hsd-radius);overflow:hidden;background:#fff;aspect-ratio:4/3;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.hsd-gallery-item img{width:100%;height:100%;object-fit:cover;display:block}
.hsd-design-simple .hsd-gallery-item{box-shadow:none}
@media(max-width:800px){.hsd-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.hsd-gallery-grid{grid-template-columns:1fr;gap:14px}}


/* Automatic layouts when customer photos are missing */
body.hsd-no-hero-image .hsd-hero{background:linear-gradient(135deg,var(--hsd-sub) 0%,#fff 48%,color-mix(in srgb,var(--hsd-main) 16%,#fff) 100%);}
body.hsd-no-hero-image .hsd-hero::after{content:"♪";position:absolute;right:clamp(22px,8vw,110px);top:50%;transform:translateY(-50%);font-family:serif;font-size:clamp(110px,22vw,300px);line-height:1;color:color-mix(in srgb,var(--hsd-main) 12%,transparent);z-index:0;pointer-events:none;}
body.hsd-no-hero-image .hsd-hero::before{background:linear-gradient(90deg,rgba(255,255,255,.82),rgba(255,255,255,.35));}
.hsd-teacher-no-image .hsd-teacher-body{padding:clamp(24px,4vw,38px);}
.hsd-teacher-no-image{display:flex;align-items:stretch;}
.hsd-teacher-no-image .hsd-teacher-body{width:100%;}
.hsd-gallery-section{padding:clamp(48px,7vw,90px) 20px;background:var(--hsd-sub);}
.hsd-gallery-inner{max-width:1200px;margin:0 auto;}
@media(max-width:700px){body.hsd-no-hero-image .hsd-hero::after{right:-20px;font-size:150px}.hsd-teacher-no-image .hsd-teacher-body{padding:22px}.hsd-gallery-section{padding:42px 18px}}