/* Database-free static conversion overrides */
body { color:#333; background:#fff; }
.navbar-brand { padding-top: 7px; }
.page-main { padding-top: 0; }
.page-hero { padding: 110px 0 50px; background:#f4f4f4 url("images/main.gif") center/cover; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.55); }
.page-hero h1 { font-weight:700; margin:0 0 8px; }
.page-hero p { font-size:18px; margin:0; }
.content-section { padding: 50px 0; }
.home-intro { padding: 55px 0; }
.rich-content { line-height:1.85; font-size:16px; overflow-wrap:anywhere; }
.rich-content img { max-width:100%; height:auto; }
.rich-content p { margin-bottom:16px; }
.static-card { margin-bottom:30px; }
.static-card-link { display:block; height:100%; color:#333; text-decoration:none; background:#fff; box-shadow:0 1px 9px rgba(0,0,0,.15); transition:transform .2s,box-shadow .2s; }
.static-card-link:hover,.static-card-link:focus { color:#333; text-decoration:none; transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.18); }
/* 封面圖改為直版(3:4)比例並完整顯示，不再被固定高度裁切 */
.static-card img { width:100%; height:auto; aspect-ratio:3/4; object-fit:contain; display:block; background:#fff; }
.media-gallery img { width:100%; height:210px; object-fit:cover; display:block; }
.static-card h3 { font-size:18px; margin:0; padding:16px 16px 8px; font-weight:700; }
.static-card p { padding:0 16px 16px; margin:0; color:#666; }
.image-placeholder { height:auto; aspect-ratio:3/4; background:#e8edf1; color:#6b7280; display:flex; align-items:center; justify-content:center; }
.services-grid { margin-top:25px; display:flex; flex-wrap:wrap; }
.service-card { min-height:210px; text-align:center; padding:18px 12px; }
.service-card img { max-width:84px; max-height:84px; margin:0 auto 14px; }
.service-card h3 { font-size:17px; min-height:44px; }
.service-card p { color:#555; line-height:1.6; }
.media-gallery figure { margin-bottom:25px; }
.detail-page { padding-top:100px; padding-bottom:40px; }
.breadcrumb { margin-top:0; }
.page-title { margin-bottom:25px; font-weight:700; }
.item-meta { color:#777; border-bottom:1px solid #ddd; padding-bottom:12px; }
.job-item { padding:20px 0; border-bottom:1px solid #ddd; }
.job-item h2 { font-size:22px; }
.contact-panel { max-width:850px; }
.form-notice { margin:25px 0; padding:14px 16px; border-left:4px solid #d29b35; background:#fff8e7; }
.video-empty { min-height:260px; display:flex; align-items:center; justify-content:center; color:#fff; background:#222; }
.video-carousel-container .carousel-inner { height:auto; padding-bottom:0; max-height:none; }
.video-carousel-container .item { position:relative; height:auto; }
.video-carousel-container video { display:block; width:100%; height:auto; max-height:520px; object-fit:cover; }
.empty-state { text-align:center; color:#777; padding:35px; }
footer { margin-top:0; }

/* Homepage header correction: keep navigation above, not on top of, the hero video. */
.navbar-wrapper {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  z-index: 50;
  margin: 0 !important;
  background: #fff;
}
.navbar-wrapper > .container { padding-right: 0; padding-left: 0; }
.navbar-wrapper .navbar { margin-bottom: 0; border-radius: 0; }
.navbar-wrapper .navbar.navbar-fixed-top {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
}
.video-carousel-container {
  clear: both;
  height: auto !important;
  margin-bottom: 0 !important;
}
.video-carousel-container .carousel-inner,
.video-carousel-container .item { height: auto !important; }

@media (max-width: 767px) {
  .page-hero { padding:90px 0 35px; }
  .static-card img { height:auto; }
  .media-gallery img { height:190px; }
  .services-grid { display:block; }
  .navbar-wrapper .navbar { min-height: 50px; }
}

/* CASE-GRID-ALIGNMENT-FIX-2026-09-03 */
/*
 * Bootstrap 3 columns float by default. Cards with different title or excerpt
 * heights therefore wrap around one another and leave a ragged layout.
 * This scoped flex grid keeps every row aligned without altering global columns.
 */
.card-grid,
.media-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.card-grid > .static-card,
.media-gallery-grid > figure {
  float: none;
  display: flex;
}
.card-grid > .static-card {
  margin-bottom: 30px;
}
.card-grid .static-card-link {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.card-grid .static-card-link > img,
.card-grid .static-card-link > .image-placeholder {
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
}
.card-grid .static-card h3 {
  min-height: 57px;
  line-height: 1.42;
}
.card-grid .static-card p {
  flex: 1 0 auto;
  min-height: 42px;
}
.media-gallery-grid > figure {
  margin-bottom: 30px;
}
.media-gallery-grid > figure > img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
.image-placeholder.image-recovery-note {
  flex-direction: column;
  gap: 7px;
  padding: 18px;
  text-align: center;
  line-height: 1.45;
}
.image-placeholder.image-recovery-note strong { color: #4d5e67; }
.image-placeholder.image-recovery-note small { color: #77848b; }
@media (max-width: 767px) {
  .card-grid,
  .media-gallery-grid { display: block; }
  .card-grid > .static-card,
  .media-gallery-grid > figure { display: block; }
  .card-grid .static-card h3 { min-height: 0; }
  .card-grid .static-card p { min-height: 0; }
  .card-grid .static-card-link > img,
  .card-grid .static-card-link > .image-placeholder { height: auto; }
  .media-gallery-grid > figure > img { height: 200px; }
}