/* Longtai Pro Audio draft v3 — inner pages (services, case, about).
   Loaded after site.css; uses the same tokens and hairline frame. The homepage does not load it. */

/* ---------- page head ---------- */
.page-head { padding-block: calc(var(--pad-y) * 1.1); }
.page-title { font-size: clamp(2.25rem, 1rem + 2.9vw, 4rem); line-height: 1.25; word-break: keep-all; }
.page-title.is-long { font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3.25rem); }
.page-lead { margin-top: 1.5rem; font-size: var(--step-lead); line-height: 1.75; color: var(--muted); max-width: 32em; }
.page-head .actions { margin-top: 2rem; }

/* ---------- detail band: number, icon, title left; text right ---------- */
.detail-side { display: grid; gap: 1rem; align-content: start; }
.detail-side .icon { width: 48px; height: 48px; }
.detail-kicker { font-size: var(--step-body); font-weight: 500; }
.split > .detail-side { grid-column: 1; }
.split .detail-side .head { grid-column: auto; }
/* 服務頁：桌機時左欄圖示與小標在欄內置中 */
@media (min-width: 40.0625em) {
  .split > .detail-side { justify-items: center; align-self: center; text-align: center; }
}

/* list with hairline rows */
.rows { margin-top: 1.75rem; border-top: var(--line); }
.rows li { padding: 0.75rem 0; border-bottom: var(--line); }
.rows strong { font-weight: 500; }
.rows-title { margin-top: 1.75rem; font-size: var(--step-small); letter-spacing: 0.12em; color: var(--faint); }
.rows-title + .rows { margin-top: 0.5rem; }

/* ---------- hairline table ---------- */
.table { width: 100%; border-collapse: collapse; border-top: var(--line); }
.table th, .table td { text-align: left; vertical-align: baseline; padding: 1rem 1.5rem 1rem 0; border-bottom: var(--line); font-weight: 400; }
.table tbody th { font-weight: 500; width: 36%; }
.table td { color: var(--muted); }
.table thead th { font-size: var(--step-small); letter-spacing: 0.12em; color: var(--faint); padding-block: 0.6rem; }

/* ---------- pros: two framed columns ---------- */
.lead-text { font-size: var(--step-lead); line-height: 1.75; color: var(--muted); max-width: 32em; margin-bottom: clamp(2rem, 4vw, 3rem); }
.pros-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--line); border-left: var(--line); }
.pros-col { padding: 2rem 1.75rem; border-right: var(--line); border-bottom: var(--line); }
.pros-col h3 { font-size: var(--step-lead); font-weight: 500; line-height: 1.4; margin-bottom: 0.75rem; }
.pros-col p { color: var(--muted); }
.pros-col .rows { margin-top: 1.25rem; }
.pros-col .rows li { color: var(--muted); }
.pros-col .rows strong { color: var(--ink); margin-right: 0.5em; }
.pros-col .rows + p { margin-top: 1.25rem; }

/* highlighted line (services: interior designers) */
.pull { font-size: var(--step-lead); font-weight: 500; line-height: 1.5; color: var(--ink); padding-left: 1rem; border-left: 1.5px solid var(--ink); margin-bottom: 1rem; }
.pros-col .pull { color: var(--ink); }

/* centred band (services: venues table + case link) */
.band--center .band-head { justify-items: center; text-align: center; }
.band--center .table { max-width: 46rem; margin-inline: auto; }
.band--center .band-foot { text-align: center; margin-inline: auto; }

/* three steps */
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.after-steps { margin-top: 2rem; color: var(--muted); }

/* ---------- placeholders 【待確認】【待補】: grey, dashed, easy to find ---------- */
.tbd {
  padding: 0.1em 0.45em; margin: 0 0.1em;
  background: #ebebeb; color: #666; outline: var(--hair-w) dashed rgba(0, 0, 0, 0.4); outline-offset: -1px;
  font-size: 0.9375em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- case page ---------- */
.case-meta { margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--line); border-left: var(--line); }
.case-meta--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
.case-meta div { padding: 0.9rem 1.1rem 1rem; border-right: var(--line); border-bottom: var(--line); }
.case-meta dt { font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--faint); }
.case-meta dd { margin: 0.25rem 0 0; }

.shot { margin: 0; min-width: 0; }
.shot img { display: block; width: 100%; height: auto; border: var(--line); background: var(--surface); }
.shot figcaption { margin-top: 0.6rem; font-size: var(--step-small); color: var(--muted); line-height: 1.6; }
.shot-hero { margin-top: clamp(2rem, 4vw, 3rem); }
.shot-hero img { aspect-ratio: 16 / 9; object-fit: cover; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.shots--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split > .shots { grid-column: 1 / -1; }
.shots .shot img, .gallery .shot img { aspect-ratio: 4 / 3; object-fit: cover; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.gallery-note { margin-top: 1.5rem; }

/* ---------- about page ---------- */
.founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); }
.founder .shot img { filter: grayscale(1); }
.timeline { border-top: var(--line); }
.timeline li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; padding: 1rem 0; border-bottom: var(--line); }
.timeline .yr { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.timeline p { color: var(--muted); }
.sub-block { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: 1.75rem; border: var(--line); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(2rem, 4vw, 4rem); }
.sub-block h3 { font-size: var(--step-lead); font-weight: 500; }
.contact-list { margin: 0; border-top: var(--line); }
.contact-list div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: var(--line); }
.contact-list dt { color: var(--faint); font-size: var(--step-small); letter-spacing: 0.12em; padding-top: 0.3rem; }
.contact-list dd { margin: 0; font-size: var(--step-lead); overflow-wrap: anywhere; }
.contact-list a { text-decoration: underline; text-decoration-color: var(--hair); }
.checklist { margin-top: 0; }
.checklist li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; }
.checklist li span { color: var(--muted); }
.faq { display: grid; gap: 0.5rem; max-width: 52rem; }
.faq details { background: var(--bg); border: var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 1.25px solid var(--ink); border-bottom: 1.25px solid var(--ink); transform: translateY(-3px) rotate(45deg); transition: transform var(--t-ui) var(--ease-out); }
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq .answer { padding: 0 1.25rem 1.25rem; color: #474747; }
.faq summary:focus-visible { outline-offset: -2px; }

/* ---------- tablet ---------- */
@media (max-width: 64em) {
  .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery, .shots--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founder, .sub-block { grid-template-columns: minmax(0, 1fr); }
  .founder .shot { max-width: 36rem; }
}

/* three steps stay in one row on tablet (site.css wraps the homepage's four) */
@media (min-width: 40.0625em) and (max-width: 64em) {
  .steps--3 li:nth-child(3) { padding-left: 1.5rem; border-left: var(--line); margin-top: 0; border-top: 0; }
}

/* ---------- phone ---------- */
@media (max-width: 40em) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split > .detail-side { grid-column: 1; }
  .pros-grid, .steps--3, .shots, .shots--3, .gallery { grid-template-columns: minmax(0, 1fr); }
  .pros-col { padding: 1.5rem 1.25rem; }
  .case-meta { grid-template-columns: 1fr; }
  .table, .table tbody, .table tr { display: block; }
  .table thead { display: none; }
  .table tr { padding: 0.9rem 0; border-bottom: var(--line); }
  .table th, .table td { display: block; width: auto; padding: 0; border: 0; }
  .table td { margin-top: 0.25rem; }
  .timeline li, .contact-list div, .checklist li { grid-template-columns: 1fr; gap: 0.2rem; }
  .sub-block { padding: 1.25rem; }
}

/* about: one line above the contact list */
.contact-lead { margin-bottom: 1.5rem; color: var(--muted); }

/* lecture case: 800x600 photos are never shown wider than their natural size */
.shot-native { max-width: 800px; }
.shot-hero.shot-native img { aspect-ratio: 4 / 3; }
.shots-native { max-width: calc(800px * 2 + 1.5rem); }
.links-stack { display: grid; justify-items: start; gap: 0.5rem; }

/* back link on case pages */
.back { margin-bottom: 1.5rem; font-size: var(--step-small); }

/* case list: framed cards, grid grows with more cases */
.case-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.5rem; }
.case-card { display: flex; flex-direction: column; height: 100%; border: var(--line); background: var(--sheet); text-decoration: none; transition: background-color var(--t-hover) ease; }
.case-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: var(--line); background: var(--surface); }
.case-card-body { display: grid; gap: 0.4rem; padding: 1.25rem 1.25rem 1.5rem; }
.case-card-type { font-size: var(--step-small); letter-spacing: 0.12em; color: var(--faint); }
.case-card-title { font-size: var(--step-lead); font-weight: 500; line-height: 1.4; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color var(--t-hover) ease; }
.case-card-text { color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .case-card:hover { background: var(--bg); }
  .case-card:hover .case-card-title { text-decoration-color: currentColor; }
}
.case-card:focus-visible { outline-offset: 2px; }

/* AD36 case: portrait product shots; text after a .rows list */
.shots--portrait .shot img { aspect-ratio: 3 / 4; }
.after-rows { margin-top: 1.25rem; }

/* case card that opens another site */
.case-card-ext { margin-top: 0.35rem; font-size: var(--step-small); color: var(--ink); letter-spacing: 0.04em; }