/* =========================================================
   services.css — เฉพาะหน้าบริการของเรา
   ========================================================= */

/* ---------- Service styles ---------- */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,.025); border: 1px solid var(--c-line);
  transition: border-color .3s, transform .3s var(--ease), background .3s;
}
.service-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 26px 30px 24px; }

/* รูปตัวอย่าง: รูปใหญ่ 1 + รูปเล็ก 2 (ดึงจากผลงานในหมวดนั้น) */
.service-media {
  /* minmax(0, …) = ไม่ให้ขนาดจริงของรูปดันแถว/คอลัมน์ให้ใหญ่เกินกล่อง 4:3 */
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px;
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-charcoal);
}
.service-media img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; transition: transform .7s var(--ease), filter .4s; }
.service-media img:first-child { grid-row: 1 / 3; }
.service-media.count-1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.service-media.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.service-media.count-2 img:first-child { grid-row: auto; }
.service-card:hover .service-media img { transform: scale(1.05); filter: brightness(1.08); }

.service-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto; padding-top: 6px;
  font-size: .9rem; font-weight: 500; color: var(--c-gold);
}
.service-link .icon { transition: transform .3s var(--ease); }
.service-link:hover .icon, .service-card:hover .service-link .icon { transform: translateX(4px); }
.service-card:hover { border-color: var(--c-gold); background: rgba(201,161,74,.06); transform: translateY(-4px); }
.service-no { display: block; font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--c-gold); opacity: .85; margin-bottom: 10px; }
.service-card h3 { margin-bottom: .35em; }
.service-card p { color: var(--c-muted); }

/* ---------- Process ---------- */
.process-box {
  --heading-color: var(--c-white);
  --text-color: var(--c-text);
  --strong-color: var(--c-gold-light);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center;
  padding: clamp(28px, 5vw, 64px);
  background: var(--c-black) url("../../images/ui/grunge.svg") center / 600px;
  border: 1px solid var(--c-line);
  box-shadow: 0 30px 60px rgba(0,0,0,.25);
}
.brush-frame-sm { padding: 18px; background: url("../../images/ui/brush-frame.svg") center / 100% 100% no-repeat; }
.brush-frame-sm img { width: 100%; aspect-ratio: 9 / 7; object-fit: cover; }
.process-content .ornament { margin-left: 0; }
.process-content h2 { margin-bottom: 0; }

.steps { position: relative; display: grid; gap: 26px; margin: 26px 0 32px; }
.steps::before { content: ""; position: absolute; left: 24px; top: 10px; bottom: 10px; width: 1px; background: var(--c-gold); opacity: .5; }
.steps li { position: relative; display: grid; grid-template-columns: 50px 1fr; gap: 18px; align-items: start; }
.step-no {
  display: grid; place-items: center; width: 50px; height: 50px;
  background: var(--c-black); border: 1px solid var(--c-gold);
  font-family: var(--font-display); font-size: 1.6rem; color: var(--c-white);
}
.steps h3 { margin-bottom: 2px; }
.steps p { font-size: .92rem; color: var(--c-muted); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; align-items: start; }
.faq-col { display: grid; gap: 14px; }
.faq-item { border: 1px solid #3a3730; background: rgba(10,10,10,.6); transition: border-color .3s; }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 15px 20px; cursor: pointer; list-style: none;
  font-weight: 500; color: var(--c-white);
  transition: background .3s, color .3s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { transition: transform .3s var(--ease); }
.faq-item[open] { border-color: var(--c-gold); }
.faq-item[open] summary { background: var(--c-gold); color: var(--c-black); }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-item summary:hover { color: var(--c-gold-light); }
.faq-item[open] summary:hover { color: var(--c-black); }
.faq-answer { padding: 16px 20px 20px; }
.faq-answer p { font-size: .93rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .service-body { padding: 22px 24px 20px; }
}
/* Tablet: การ์ด 2 คอลัมน์ / ขั้นตอนและ FAQ เรียงแนวตั้ง */
@media (max-width: 991px) {
  .service-grid { grid-template-columns: 1fr 1fr; }
  .process-box { grid-template-columns: 1fr; }
  .process-media { max-width: 560px; width: 100%; margin-inline: auto; }
  .faq-grid { grid-template-columns: 1fr; }
}
/* มือถือ: การ์ด 1 คอลัมน์ */
@media (max-width: 767px) {
  .service-grid { grid-template-columns: 1fr; gap: 14px; }
  .service-body { padding: 20px 20px 16px; }
  .service-no { font-size: 2.2rem; margin-bottom: 10px; }
  .process-box { padding: 24px 16px 28px; }
  .brush-frame-sm { padding: 12px; }
  .process-content .btn { width: 100%; }
  .faq-item summary { padding: 14px 16px; }
  .faq-answer { padding: 14px 16px 18px; }
}
@media (max-width: 375px) {
  .steps li { grid-template-columns: 44px 1fr; gap: 14px; }
  .step-no { width: 44px; height: 44px; font-size: 1.4rem; }
  .steps::before { left: 21px; }
}