/* 光明堂介紹頁 ("business card" page) — mobile/tablet-first.
   Shares design tokens (colors/fonts) with style.css via data-theme on <html>,
   set dynamically in about.js once /api/about tells us which theme is active. */

.about-body{ margin:0; background:var(--body-bg); font-family:'Noto Sans TC',sans-serif; color:var(--ink); }

/* ---------- cover ---------- */
.about-cover{
  position:relative;
  min-height:46vh;
  display:flex; align-items:center; justify-content:center;
  background:var(--body-bg) center/cover no-repeat;
  padding:60px 20px 40px;
  text-align:center;
}
.about-cover-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,15,0.15), rgba(10,10,15,0.55));
}
.about-cover-content{ position:relative; z-index:1; }
.about-logo{ width:72px; height:72px; object-fit:contain; border-radius:50%; background:#fff; padding:6px; margin-bottom:14px; }
.about-cover-content h1{
  font-family:var(--font-display); font-weight:900; color:#fff;
  font-size:clamp(30px,7vw,48px); margin:8px 0 0; text-shadow:0 2px 12px rgba(0,0,0,0.4);
  line-height:1.35;
}

/* ---------- page layout (sidebar nav + main content) ---------- */
.about-page-layout{
  max-width:900px; margin:-24px auto 0; padding:0 16px 40px; position:relative; z-index:1;
  display:flex; align-items:flex-start; gap:24px;
}
.about-sidebar{
  display:flex; flex-direction:column; gap:2px; width:150px; flex-shrink:0;
  position:sticky; top:20px; background:var(--paper); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:10px;
}
.about-sidebar button{
  text-decoration:none; color:var(--ink-soft); font-size:13.5px; font-weight:600;
  padding:10px 12px; border-radius:var(--radius-sm); border:none; background:none;
  text-align:left; cursor:pointer; font-family:'Noto Sans TC',sans-serif;
  /* no explicit width — the desktop column layout stretches children to fill
     it by default (align-items:stretch); on mobile's horizontal row layout
     (see the max-width:767px block below) a button must NOT be width:100%
     or each one fights to fill the whole strip and only the first one shows */
}
.about-sidebar button:hover{ background:var(--paper-dim); color:var(--ink); }
.about-sidebar button.active{ background:var(--accent); color:#fff; }

/* ---------- sections ---------- */
.about-wrap{ flex:1; min-width:0; max-width:720px; padding:0; }
.about-section{
  background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:24px 20px; margin-bottom:18px;
}
.about-section-title{ font-family:var(--font-display); font-weight:700; font-size:18px; margin-bottom:14px; color:var(--ink); }
.about-intro{ white-space:pre-wrap; line-height:1.9; font-size:15px; color:var(--ink-soft); margin:0; }

/* ---------- events (本月活動) ----------
   big photo cards in a grid, on every screen size (a thin list row looked
   sparse/empty on phone too when a category only has one or two items —
   this was originally desktop-only, user asked for it on mobile as well) */
#about-events-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; }
.about-event-row{
  display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0;
  border:1.5px solid var(--line); border-radius:var(--radius-md); overflow:hidden; position:relative;
}
.about-event-row-link{ display:flex; flex-direction:column; align-items:stretch; gap:0; text-decoration:none; color:inherit; }
.about-event-thumb{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:0; background:var(--paper-dim); }
.about-event-thumb.empty{ display:flex; }
.about-event-main{ padding:10px 12px 12px; min-width:0; }
.about-event-label{ font-weight:700; font-size:14.5px; line-height:1.4; }
.about-event-amount{ font-size:13.5px; color:var(--brass); font-weight:600; margin-top:5px; }
.about-event-badge{
  position:absolute; top:8px; right:8px; font-size:10.5px; padding:3px 9px; border-radius:999px;
  font-weight:700; white-space:nowrap; background:var(--paper); color:var(--ink-soft);
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
}
.about-event-badge.open{ background:var(--paper); color:var(--green-ok); }
.about-empty-hint{ font-size:13.5px; color:var(--ink-soft); text-align:center; padding:12px 0; }
.about-cta{ display:block; text-decoration:none; text-align:center; }
.about-cta-bottom{ margin:6px 0 0; }

/* ---------- gallery ---------- */
.about-gallery{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.about-gallery-item{
  position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; cursor:pointer;
  background:var(--paper-dim); border:none; padding:0;
}
.about-gallery-item img, .about-gallery-item video{ width:100%; height:100%; object-fit:contain; display:block; }
.about-gallery-item .play-badge{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff; background:rgba(0,0,0,0.18); text-shadow:0 1px 6px rgba(0,0,0,0.5);
}

/* ---------- info ---------- */
.about-info-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.about-info-item{ display:flex; gap:10px; font-size:14.5px; line-height:1.7; }
.about-info-item .ic{ flex-shrink:0; }
.about-info-item .txt{ white-space:pre-wrap; color:var(--ink); }
.about-info-buttons{ display:flex; flex-direction:column; gap:10px; }
.about-info-buttons a{
  display:block; text-align:center; text-decoration:none; padding:12px; border-radius:var(--radius-md);
  font-size:14px; font-weight:600; border:1.5px solid var(--accent); color:var(--accent);
}
.about-info-buttons a.line{ background:#06C755; border-color:#06C755; color:#fff; }
.about-info-buttons a.ig{ background:#C13584; border-color:#C13584; color:#fff; }

.about-social-row{ display:flex; gap:12px; justify-content:center; margin-top:18px; }
.about-social-icon{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11.5px; font-weight:700; text-decoration:none; letter-spacing:.02em;
}
.about-social-icon.line{ background:#06C755; }
.about-social-icon.ig{ background:#C13584; }
.about-social-icon.fb{ background:#1877F2; font-size:18px; font-family:Georgia,serif; font-style:italic; }

.about-footer{ text-align:center; font-size:12px; color:var(--ink-soft); padding:18px 0 4px; }

/* 服務內容 as a price list (category pills + one row per service, name on
   the left, price on the right) — same look as the 價目表 on the 美業 menu
   page the user pointed to as the reference */
.about-price-list{ border:1.5px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:#fff; }
.about-price-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  padding:16px 18px; border:none; border-bottom:1.5px solid var(--line); background:none;
  text-align:left; font-family:inherit; color:inherit; text-decoration:none; cursor:pointer;
}
.about-price-row:last-child{ border-bottom:none; }
.about-price-row:hover{ background:var(--paper-dim); }
.about-price-row .left{ min-width:0; flex:1; }
.about-price-row .t{ font-size:16px; font-weight:700; color:var(--ink); line-height:1.4; }
.about-price-row .sub{
  font-size:12.5px; color:var(--ink-soft); margin-top:4px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.about-price-row .right{ flex-shrink:0; text-align:right; }
.about-price-row .p{ font-size:16px; font-weight:700; color:var(--ink); }
.about-price-row .go{ font-size:11.5px; color:var(--accent); font-weight:700; margin-top:3px; }
.about-service-option{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
.about-service-option:last-child{ border-bottom:none; }
.about-service-option .op{ color:var(--brass); font-weight:700; flex-shrink:0; }

/* ---------- lightbox ---------- */
.about-lightbox-card{ max-width:640px; padding:12px; background:transparent; box-shadow:none; }
.about-lightbox-card img, .about-lightbox-card video{ width:100%; max-height:75vh; object-fit:contain; border-radius:12px; display:block; }
.about-lightbox-caption{ color:#fff; text-align:center; margin-top:10px; font-size:13.5px; }
.about-lightbox-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.about-lightbox-nav button{
  border:1.5px solid rgba(255,255,255,0.5); background:rgba(255,255,255,0.08); color:#fff;
  border-radius:999px; width:38px; height:38px; font-size:16px; cursor:pointer;
}
.about-lightbox-nav button:disabled{ opacity:.3; cursor:default; }
.about-lightbox-nav .count{ color:#fff; font-size:12.5px; opacity:.8; }

@media (min-width:600px){
  .about-gallery{ grid-template-columns:repeat(4, 1fr); }
  #about-events-list{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (max-width:767px){
  .about-page-layout{ flex-direction:column; }
  .about-sidebar{
    position:sticky; top:0; z-index:5; width:100%; flex-direction:row; overflow-x:auto;
    padding:8px; border-radius:0; box-shadow:0 4px 12px rgba(0,0,0,0.06);
  }
  .about-sidebar button{ flex:0 0 auto; white-space:nowrap; }
}

/* ---------- event detail page (about-event.html) ---------- */
.about-event-brandbar{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 16px; background:var(--body-bg); color:var(--hero-text);
}
.about-event-brand-logo{ width:32px; height:32px; border-radius:50%; object-fit:contain; background:#fff; padding:2px; }
.about-event-brandbar span{ font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.02em; }
.about-back-link{ display:inline-block; margin-bottom:14px; font-size:13.5px; color:var(--ink-soft); text-decoration:none; }

/* multi-photo gallery at the top of the detail page — horizontal snap-scroll
   on all screen sizes (works fine with a mouse-wheel/trackpad too, not just
   touch), small dots under it when there's more than one photo */
.about-event-gallery{ margin-bottom:16px; }
.about-event-gallery .strip{
  display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory;
  border-radius:var(--radius-md); -webkit-overflow-scrolling:touch;
}
/* detail page shows each photo whole (posters carry text right down to the
   bottom edge — a fixed 1:1 crop cut it off); list thumbnails elsewhere
   stay square crops */
.about-event-gallery .strip img{
  flex:0 0 100%; scroll-snap-align:start; align-self:flex-start; width:100%; height:auto;
  max-height:85vh; object-fit:contain; background:var(--paper-dim);
  border-radius:var(--radius-md); display:block;
}
.about-event-gallery .dots{ display:flex; justify-content:center; gap:6px; margin-top:8px; }
.about-event-gallery .dots span{ width:6px; height:6px; border-radius:50%; background:var(--line); }
.about-event-gallery .dots span.active{ background:var(--accent); }
/* "相關活動" (related activities) at the bottom of the detail page —
   deliberately its own compact-row classes, not shared with the main
   本月活動 card grid above, since a "you might also like" shelf should stay
   a small list even where the main browser is big photo cards */
.related-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.related-row:last-child{ border-bottom:none; }
.related-row-link{ display:flex; text-decoration:none; color:inherit; flex:1; min-width:0; align-items:center; gap:12px; }
.related-thumb{ width:52px; height:52px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--paper-dim); }
.related-main{ flex:1; min-width:0; }
.related-label{ font-weight:700; font-size:14px; }
.related-amount{ font-size:12.5px; color:var(--brass); font-weight:600; margin-top:2px; }
.about-event-title{ font-family:var(--font-display); font-size:22px; margin:0 0 8px; color:var(--ink); }
.about-event-detail-price{ font-size:16px; font-weight:700; color:var(--brass); margin-bottom:10px; }
.about-event-countdown{
  display:inline-block; font-size:13px; font-weight:700; color:var(--accent);
  background:rgba(178,58,46,0.08); border:1px solid rgba(178,58,46,0.25);
  border-radius:999px; padding:6px 14px; margin-bottom:18px;
}
.about-event-tabbox{ border:1.5px solid var(--line); border-radius:var(--radius-md); overflow:hidden; margin-bottom:22px; }
.about-event-tabbar{ display:flex; border-bottom:1.5px solid var(--line); background:var(--paper-dim); }
.about-event-tabbar button{
  border:none; background:none; padding:10px 18px; font-size:13.5px; font-weight:700; cursor:default;
  color:var(--ink-soft);
}
.about-event-tabbar button.active{ color:var(--accent); background:var(--paper); }
.about-event-tabpanel{ padding:16px 18px; white-space:pre-wrap; line-height:1.9; font-size:14.5px; color:var(--ink); }