/* ============================================================
   YOTHIN STUDIO - Template Variations
   5 layout styles เลือกได้จากหลังบ้าน
   ============================================================ */

/* ============================================================
   TEMPLATE 1: Editorial Classic (default)
   ไม่ต้อง override — ใช้ style.css หลัก
   ============================================================ */


/* ============================================================
   TEMPLATE 2: Magazine Editorial
   Asymmetric · ซ้ายชิด · ตัดทอนตกแต่ง · ตัวเลขกำกับหมวด
   ============================================================ */
body.template-magazine .hero { text-align: left; padding: 140px 0 100px; }
body.template-magazine .hero-content { text-align: left; max-width: 760px; margin: 0; padding: 0 60px; }
body.template-magazine .hero-ornament { display: none; }
body.template-magazine .hero-eyebrow { letter-spacing: 0.4em; }
body.template-magazine .hero-title {
  font-size: clamp(4rem, 11vw, 9rem);
  line-height: 0.95;
}
body.template-magazine .hero-description { margin-left: 0; }
body.template-magazine .hero-cta { justify-content: flex-start; }
body.template-magazine .hero-scroll { left: 60px; transform: none; writing-mode: vertical-rl; }

body.template-magazine .section-header { text-align: left; max-width: 760px; margin-left: 60px; margin-bottom: 60px; }
body.template-magazine .section-header h2::before {
  content: counter(section-num, decimal-leading-zero) ' — ';
  font-size: 0.6em;
  color: var(--tan);
  letter-spacing: 0.2em;
  vertical-align: middle;
}
body.template-magazine main { counter-reset: section-num; }
body.template-magazine .section { counter-increment: section-num; }
body.template-magazine .section-header p { margin-left: 0; }
body.template-magazine .divider-ornament { display: none; }

body.template-magazine .package-card {
  border: none;
  border-top: 1px solid var(--khaki);
  background: transparent;
  border-radius: 0;
}
body.template-magazine .package-card:hover {
  transform: none;
  box-shadow: none;
  border-top-color: var(--tan);
}
body.template-magazine .package-image { aspect-ratio: 16/10; }
body.template-magazine .package-name { font-size: 2.25rem; }

body.template-magazine .albums-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
body.template-magazine .album-card { background: transparent; }
body.template-magazine .album-card:hover { box-shadow: none; transform: translateY(-4px); }
body.template-magazine .album-info { text-align: left; padding: 16px 0; }


/* ============================================================
   TEMPLATE 3: Atelier Minimal
   ที่ว่างเยอะ · เรียบจัด · ไม่มีตกแต่ง · เส้นบาง
   ============================================================ */
body.template-atelier .section { padding: 180px 0; }
body.template-atelier .hero { padding: 180px 24px 140px; }
body.template-atelier .hero-ornament { display: none; }
body.template-atelier .divider-ornament { display: none; }
body.template-atelier .hero-eyebrow { font-size: 0.65rem; letter-spacing: 0.6em; }
body.template-atelier .hero-title { font-weight: 200; letter-spacing: 0.04em; }
body.template-atelier .hero-description { font-size: 1.1rem; max-width: 540px; }

body.template-atelier .section-header { margin-bottom: 100px; }
body.template-atelier .section-header h2 { font-weight: 200; letter-spacing: 0.06em; }

body.template-atelier .package-card {
  border: none;
  background: transparent;
  box-shadow: none;
}
body.template-atelier .package-card:hover {
  transform: none;
  box-shadow: none;
}
body.template-atelier .package-card:hover .package-image img { transform: scale(1.02); }
body.template-atelier .package-body { padding: 32px 0; text-align: center; }
body.template-atelier .package-features li {
  border-bottom: none;
  padding: 6px 0;
  justify-content: center;
}
body.template-atelier .package-features li::before { content: '·'; color: var(--khaki); }
body.template-atelier .package-price { border-top: 1px solid var(--ivory-dark); padding-top: 24px; }

body.template-atelier .album-card { background: transparent; }
body.template-atelier .album-card:hover { box-shadow: none; transform: translateY(-3px); }
body.template-atelier .album-info { padding: 28px 0; }

body.template-atelier .testimonial { border: none; background: transparent; padding: 32px; }
body.template-atelier .testimonial::before { display: none; }


/* ============================================================
   TEMPLATE 4: Parisian Salon
   หรูหราวิจิตร · กรอบลายเส้นคู่ · สมมาตร · มีลวดลาย
   ============================================================ */
body.template-salon .hero { padding: 160px 24px 120px; }
body.template-salon .hero-ornament {
  width: 110px;
  height: 110px;
  border-width: 1px;
  opacity: 0.5;
}
body.template-salon .hero-ornament::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid currentColor;
  opacity: 0.5;
}
body.template-salon .hero-content::before,
body.template-salon .hero-content::after {
  content: '⊹';
  display: block;
  color: var(--tan);
  font-size: 1.5rem;
  margin: 1rem 0;
}

body.template-salon .section-header h2::before {
  content: '~ ';
  color: var(--tan);
  font-style: italic;
}
body.template-salon .section-header h2::after {
  content: ' ~';
  color: var(--tan);
  font-style: italic;
}
body.template-salon .divider-ornament span { font-size: 1.1rem; color: var(--tan); }

body.template-salon .package-card {
  border: 1px solid var(--khaki);
  position: relative;
  padding: 6px;
  background: transparent;
}
body.template-salon .package-card::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--khaki);
  pointer-events: none;
  opacity: 0.4;
}
body.template-salon .package-card > * { background: var(--white); position: relative; }
body.template-salon .package-card:hover { border-color: var(--tan); }

body.template-salon .album-card {
  border: 1px solid var(--khaki);
  padding: 4px;
}
body.template-salon .album-card::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid var(--khaki);
  pointer-events: none;
  opacity: 0.4;
  z-index: 1;
}

body.template-salon .testimonial {
  border: 1px solid var(--khaki);
  position: relative;
  padding: 56px 36px 36px;
}
body.template-salon .testimonial::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--khaki);
  pointer-events: none;
  opacity: 0.4;
}


/* ============================================================
   TEMPLATE 5: Boutique Modern
   ตัวอักษรใหญ่ · ภาพเด่น · กล้าใช้สี · contemporary
   ============================================================ */
body.template-boutique .hero { padding: 100px 24px 80px; }
body.template-boutique .hero-title {
  font-size: clamp(4.5rem, 13vw, 11rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.9;
}
body.template-boutique .hero-ornament { display: none; }
body.template-boutique .hero-eyebrow {
  background: var(--fossil);
  color: var(--ivory);
  padding: 8px 20px;
  letter-spacing: 0.5em;
}

body.template-boutique .section-header .eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.7em;
}
body.template-boutique .section-header h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 400;
}

body.template-boutique .package-card {
  border: none;
  background: var(--ivory);
  border-radius: 0;
  transition: all 0.4s ease;
}
body.template-boutique .package-card:hover {
  background: var(--white);
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(54, 61, 55, 0.15);
}
body.template-boutique .package-image { aspect-ratio: 1/1; }
body.template-boutique .package-name { font-size: 2.5rem; font-weight: 400; }
body.template-boutique .package-body { padding: 40px 32px; }
body.template-boutique .package-price-amount { font-size: 2.6rem; }
body.template-boutique .package-badge {
  background: var(--tan);
  font-size: 0.75rem;
  padding: 8px 18px;
}

body.template-boutique .album-card { border-radius: 0; }
body.template-boutique .album-image { aspect-ratio: 4/5; }
body.template-boutique .album-info h3 { font-size: 1.8rem; }

body.template-boutique .stat-item .number {
  font-size: 5rem;
  color: var(--fossil);
}

body.template-boutique .testimonial {
  background: var(--sand-light);
  border: none;
  padding: 56px 40px 40px;
}
body.template-boutique .testimonial-content { font-size: 1.25rem; }


/* ============================================================
   Responsive adjustments per template
   ============================================================ */
@media (max-width: 768px) {
  body.template-magazine .hero-content { padding: 0 24px; }
  body.template-magazine .section-header { margin-left: 24px; }
  body.template-magazine .hero-scroll { display: none; }

  body.template-atelier .section { padding: 120px 0; }
  body.template-atelier .section-header { margin-bottom: 60px; }
}