/* 港湾刊：青绿刊头，电脑双栏 / 平板叠栏 / 手机网格，避开金墨与暮色 */

.studio-rail { display: none; }

*,
*::before,
*::after { box-sizing: border-box; }

img,
video { max-width: 100%; height: auto; }

/* —— 顶栏 —— */
.site-header {
  background: #fffdf8;
  border-bottom: 0;
  box-shadow: 0 12px 30px rgba(20, 32, 43, .06);
  padding-top: env(safe-area-inset-top, 0);
}

.site-header:before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, #0e7c7b 0%, #e4574d 22%, #e9b44c 46%, #3d8b6e 70%, #6b4c7a 100%);
}

.header-brand {
  gap: 8px;
  margin-right: 0;
  height: 44px;
  padding: 0 12px 0 8px;
  background: #0e7c7b;
  border-radius: 12px;
  align-self: center;
  min-width: 0;
}

.header-brand__logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #fffdf8;
  font-size: 12px;
  background: #0a5352;
  box-shadow: none;
  flex: 0 0 28px;
}

.header-brand__title {
  color: #fffdf8;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;
}

.header-brand__sub { display: none; }

.header-nav a {
  color: #14202b;
  font-weight: 700;
  border-bottom: 0;
  padding: 0 4px;
  position: relative;
}

.header-nav a:after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 8px;
  height: 3px;
  border-radius: 99px;
  background: #e9b44c;
  transform: scaleX(0);
  transition: transform .18s ease;
}

.header-nav a:hover,
.header-nav a.active,
.header-nav a[aria-current="page"] {
  color: #0a5352;
  background: transparent;
  border-bottom-color: transparent;
}

.header-nav a:hover:after,
.header-nav a.active:after,
.header-nav a[aria-current="page"]:after {
  transform: scaleX(1);
}

.header-nav a:nth-child(2):after { background: #e4574d; }
.header-nav a:nth-child(3):after { background: #3d8b6e; }

.header-search {
  height: 44px;
  border-radius: 999px;
  border: 1px solid #9dcdc9;
  background: #fffdf8;
  overflow: hidden;
}

.header-search input { color: #14202b; }
.header-search input::placeholder { color: #7a8a86; }

.header-search:focus-within {
  border-color: #0e7c7b;
  box-shadow: 0 0 0 3px rgba(14, 124, 123, .16);
}

.header-search button {
  background: #e4574d;
  color: #fffdf8;
  border-radius: 999px;
  font-size: 0;
  width: 36px;
  height: 36px;
  margin: 4px;
  padding: 0;
  align-self: center;
}

.header-search button:after {
  content: "⌕";
  font-size: 17px;
  color: #fffdf8;
}

.header-fav {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #3d8b6e;
  border-radius: 50%;
  border: 1px solid #b7d8c8;
  background: #eef6f1;
}

.header-fav:hover {
  color: #fffdf8;
  background: #3d8b6e;
  border-color: #3d8b6e;
}

.nav-toggle {
  width: 44px;
  height: 44px;
  background: #d8efee;
  color: #0a5352;
  border-color: #9dcdc9;
}

/* —— 刊头：主词完整换行，按钮跟在文案下面 —— */
.folio-masthead {
  display: block;
  padding: 22px 0 12px;
}

.folio-masthead__copy { min-width: 0; }

.folio-masthead .hero-kicker {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 10px;
  color: #0a5352;
  background: #d8efee;
  border-radius: 999px;
  letter-spacing: .16em;
  font-size: .72rem;
}

.folio-masthead h1 {
  margin: 0 0 8px;
  max-width: none;
  color: #14202b;
  font-size: clamp(1.15rem, 2.1vw, 1.7rem);
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.folio-masthead .hero-lead,
.folio-seo {
  max-width: 54rem;
  margin: 0 0 6px;
  color: #5b6670;
  line-height: 1.65;
}

.folio-seo { font-size: .88rem; }

.folio-masthead .hero-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 0;
}

.primary-btn,
.ghost-btn {
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.primary-btn {
  background: #e4574d;
  color: #fffdf8;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(228, 87, 77, .22);
}

.ghost-btn {
  border-radius: 999px;
  border: 1px solid #9dcdc9;
  color: #0e7c7b;
  background: #fffdf8;
}

/* —— 舞台：电脑左右栏，窄屏上下叠 —— */
.folio-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .8fr);
  gap: 20px;
  align-items: start;
  padding: 8px 0 12px;
}

.folio-stage__show.hero-carousel,
.folio-stage__show {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto;
  padding: 16px 16px 0;
  border-radius: 16px;
  background: #fffdf8;
  border: 1px solid #0e7c7b;
  box-shadow: 0 12px 28px rgba(20, 32, 43, .08);
}

.hero-carousel__stage {
  min-height: 0;
  flex: 0 0 auto;
}

.hero-slide { display: none; }

.hero-slide.active {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hero-visual {
  display: block;
  order: -1;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.hero-visual img {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: none;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}

.hero-copy .eyebrow { color: #0e7c7b; }
.hero-copy h2 {
  color: #14202b;
  margin: 0 0 8px;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  overflow-wrap: anywhere;
}
.hero-copy p {
  color: #5b6670;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-tags { flex-wrap: wrap; }
.hero-tags span {
  display: inline-block;
  margin: 0 6px 8px 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: #d8efee;
  color: #0a5352;
  font-size: .75rem;
}

.hero-caption { display: none; }

.hero-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px -16px 0;
  padding: 10px 16px 14px;
  border-top: 1px solid #d7e0d8;
}

.hero-control button {
  width: 40px;
  height: 40px;
  border: 1px solid #9dcdc9;
  border-radius: 50%;
  background: #fffdf8;
  color: #0a5352;
  box-shadow: none;
}

.hero-dots { display: flex; align-items: center; gap: 6px; }
.hero-dots button,
.hero-dots button.active {
  width: 10px !important;
  height: 10px !important;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #9dcdc9;
  background: #fffdf8;
  box-shadow: none;
}
.hero-dots button.active { background: #e4574d; border-color: #e4574d; }

.folio-sheet {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto;
  padding: 16px 16px 10px;
  border-radius: 16px;
  background: #14202b;
  color: #e8eef0;
}

.folio-sheet .section-head {
  border-bottom-color: #2a3946;
  margin-bottom: 10px;
}

.folio-sheet .section-head h2 { color: #fffdf8; font-size: 1.05rem; }
.folio-sheet .section-head a { color: #e9b44c; }
.folio-sheet .section-icon { background: #e9b44c; }

.folio-sheet__lead {
  margin: 0 0 8px;
  color: #b7c4cc;
  font-size: .82rem;
  line-height: 1.65;
}

.sheet-list.movie-grid {
  display: flex !important;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 0 !important;
}

.sheet-list .movie-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #2a3946;
  background: transparent;
}

.sheet-list .movie-card:nth-child(n+6) { display: none !important; }
.sheet-list .movie-card:nth-child(5) { border-bottom: 0; }

.sheet-list .poster-frame {
  border-radius: 8px;
  aspect-ratio: 1;
}

.sheet-list .poster-frame img { aspect-ratio: 1; }
.sheet-list .card-badge,
.sheet-list .poster-frame:after { display: none; }

.sheet-list .movie-card-body { padding: 0; min-height: 0; }
.sheet-list .movie-card h3 { color: #fffdf8; font-size: .86rem; min-height: 0; }
.sheet-list .movie-card h3 a { color: #fffdf8; }
.sheet-list .movie-meta-line { color: #8ea0aa; }

/* —— 色带分区 —— */
.folio-band { margin: 20px 0 0; }
.folio-band--sand { background: rgba(233, 180, 76, .12); }
.folio-band--mint { background: rgba(14, 124, 123, .08); }

.section-block { padding: 28px 0; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #c5d2c8;
}

.section-head > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.section-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0e7c7b;
  color: transparent;
  font-size: 0;
  flex: 0 0 10px;
}

.section-head h2 {
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  letter-spacing: .02em;
}

.section-head a { color: #e4574d; font-weight: 700; }

.home-more .section-block:nth-child(odd) .section-icon { background: #6b4c7a; }
.home-more .section-block:nth-child(even) .section-icon { background: #3d8b6e; }

/* —— 分类票签 —— */
.skin-m72-cats .cat-grid,
.category-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  counter-reset: harbor-cat;
}

.category-grid.large {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.category-tile,
.overview-card {
  position: relative;
  min-height: 108px;
  padding: 16px 14px 14px;
  border-radius: 14px;
  border: 1px solid #d7e0d8;
  background: #fffdf8;
  box-shadow: none;
  overflow: hidden;
}

.category-tile:before,
.overview-card:before {
  counter-increment: harbor-cat;
  content: counter(harbor-cat, decimal-leading-zero);
  position: static;
  display: block;
  margin: 0 0 6px;
  width: auto;
  background: none;
  color: #0e7c7b;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.category-tile span,
.overview-card span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #5b6670;
}

.category-tile strong { color: #14202b; }

.category-tile:nth-child(5n+1) { border-top: 4px solid #0e7c7b; }
.category-tile:nth-child(5n+2) { border-top: 4px solid #e4574d; }
.category-tile:nth-child(5n+3) { border-top: 4px solid #e9b44c; }
.category-tile:nth-child(5n+4) { border-top: 4px solid #3d8b6e; }
.category-tile:nth-child(5n) { border-top: 4px solid #6b4c7a; }

.category-tile:nth-child(5n+1):before { color: #0e7c7b; }
.category-tile:nth-child(5n+2):before { color: #e4574d; }
.category-tile:nth-child(5n+3):before { color: #c48a1f; }
.category-tile:nth-child(5n+4):before { color: #3d8b6e; }
.category-tile:nth-child(5n):before { color: #6b4c7a; }

.category-grid { counter-reset: harbor-cat; }

.folio-pick .movie-card:nth-child(1),
.folio-pick .movie-card:nth-child(2) {
  grid-column: auto;
}

.movie-card,
.card-nc {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.poster-frame {
  border-radius: 14px;
  overflow: hidden;
  background: #e7efe9;
  position: relative;
  aspect-ratio: 3 / 4;
}

.poster-frame:after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fffdf8;
  font-size: 20px;
  opacity: 0;
  background: rgba(14, 124, 123, 0);
  transition: .2s ease;
}

.movie-card:hover .poster-frame:after {
  opacity: 1;
  background: rgba(14, 124, 123, .38);
}

.card-badge {
  background: #e4574d;
  color: #fffdf8;
  border-radius: 0 0 10px 0;
}

.folio-pick .movie-card:nth-child(2) .card-badge { background: #0e7c7b; }
.folio-pick .movie-card:nth-child(3) .card-badge { background: #e9b44c; color: #14202b; }
.folio-pick .movie-card:nth-child(4) .card-badge { background: #3d8b6e; }
.folio-pick .movie-card:nth-child(5) .card-badge { background: #6b4c7a; }

.movie-card-body { padding: 10px 2px 4px; }
.movie-grid:not(.sheet-list) .movie-card-body { min-height: 86px; }
.movie-card h3 {
  font-size: .9rem;
  color: #14202b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.movie-meta-line {
  display: block;
  color: #5b6670;
  font-size: .75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folio-hero { padding-top: 22px; }

.folio-hero .hero-kicker {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #d8efee;
  color: #0a5352;
}

.page-hero h1,
.detail-info h1 {
  color: #14202b;
  overflow-wrap: anywhere;
}

.page-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  column-gap: 28px;
  row-gap: 8px;
  align-items: start;
}

.page-hero--split .breadcrumb,
.page-hero--split .filter-row { grid-column: 1 / -1; }
.page-hero--split .hero-kicker,
.page-hero--split h1 { grid-column: 1; }
.page-hero--split > p {
  grid-column: 2;
  grid-row: 3;
  max-width: none;
  margin: 0;
}

.detail-page { padding-top: 18px; }

.detail-hero {
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 24px;
  align-items: start;
}

.detail-poster { order: 2; border-radius: 16px; }
.detail-info { order: 1; min-width: 0; }

.filter-chip { border-radius: 999px; }
.filter-chip.is-on,
.filter-chip:hover,
.filter-chip--active {
  background: #d8efee;
  color: #0a5352;
  border-color: #0e7c7b;
}

.filter-panel {
  border-radius: 16px;
  background: #fffdf8;
  border-color: #d7e0d8;
}

.filter-panel input,
.filter-panel select {
  border-radius: 999px;
  background: #fffdf8;
  color: #14202b;
  min-width: 0;
}

.related-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* —— 底栏 —— */
.site-footer,
.footer-upper { background: #14202b; }

.footer-upper {
  padding: 36px 0 26px;
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0));
  border-top: 5px solid transparent;
  border-image: linear-gradient(90deg, #0e7c7b, #e4574d, #e9b44c, #3d8b6e, #6b4c7a) 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr 1fr 1.1fr;
  gap: 22px;
}

.footer-logo strong { color: #7ad4cf; }
.footer-logo em,
.footer-intro,
.footer-hint { color: #9aadb8; }
.footer-h { color: #e9b44c; letter-spacing: .12em; }

.footer-links {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-links a {
  color: #e8eef0;
  padding: 6px 10px;
  border-radius: 999px;
  background: #1e2d3a;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.footer-links a:nth-child(5n+1):hover { background: #0e7c7b; color: #fffdf8; }
.footer-links a:nth-child(5n+2):hover { background: #e4574d; color: #fffdf8; }
.footer-links a:nth-child(5n+3):hover { background: #c48a1f; color: #14202b; }
.footer-links a:nth-child(5n+4):hover { background: #3d8b6e; color: #fffdf8; }
.footer-links a:nth-child(5n):hover { background: #6b4c7a; color: #fffdf8; }

.footer-bar { background: #0d141c; border-top: 1px solid #243240; }
.footer-bar-inner {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.footer-copy,
.footer-seo { color: #7d8d97; }

.bbaseo-fly { color: #7ad4cf; }

@media (hover: none) {
  .movie-card:hover,
  .category-tile:hover,
  .overview-card:hover { transform: none; box-shadow: none; }
  .movie-card:hover .poster-frame:after { opacity: 0; }
}

/* —— 平板：舞台改上下叠，海报改横图，避免 3:4 撑高 —— */
@media (max-width: 1100px) {
  .folio-stage { grid-template-columns: 1fr; }
  .hero-slide.active { grid-template-columns: 1fr; }
  .hero-visual img {
    aspect-ratio: 16 / 10;
    max-height: 280px;
    width: 100%;
  }
  .hero-copy p { -webkit-line-clamp: 3; }
  .skin-m72-cats .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category-grid.large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero--split { grid-template-columns: 1fr; }
  .page-hero--split > p {
    grid-column: 1;
    grid-row: auto;
    margin-top: 6px;
  }
  .detail-hero { grid-template-columns: minmax(0, 1fr) 200px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .filter-panel { grid-template-columns: 1fr 1fr; }
}

/* —— 手机：顶栏分行，全部单栏/双列，触控高度 44 —— */
@media (max-width: 820px) {
  .folio-masthead { padding: 14px 0 8px; }
  .folio-masthead .hero-actions {
    width: 100%;
    flex-wrap: nowrap;
  }
  .folio-masthead .hero-actions a { flex: 1 1 0; min-width: 0; }
  .folio-stage { padding: 4px 0 8px; gap: 12px; }
  .folio-stage__show.hero-carousel,
  .folio-stage__show { padding: 12px 12px 0; }
  .hero-control { margin: 10px -12px 0; padding: 10px 12px 12px; }
  .hero-visual img { max-height: 200px; }
  .hero-copy h2 { font-size: 1.12rem; }
  .hero-copy p { -webkit-line-clamp: 3; }
  .skin-m72-cats .cat-grid,
  .category-grid,
  .category-grid.large {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .category-tile,
  .overview-card { min-height: 0; padding: 12px; }
  .section-block { padding: 20px 0; }
  .movie-grid:not(.sheet-list) .movie-card-body { min-height: 72px; }
  .movie-card h3 { font-size: .82rem; }
  .detail-hero {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .detail-poster {
    order: 0;
    max-width: 168px;
  }
  .detail-info { order: 1; }
  .filter-panel { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .folio-band { margin: 12px 0 0; }
}

@media (max-width: 540px) {
  .hero-visual img { max-height: 180px; }
  .category-tile span { -webkit-line-clamp: 3; }
}