/*
 * =============================================================================
 * FEED RATIO FLUSH — single CSS module for fixed-ratio feed cards
 * =============================================================================
 * Pair with js/feed-ratio-flush.js (DOM builder is authoritative).
 *
 * PRESETS
 *   layout1x1Online (.feed-layout--1x1-online)
 *     aspect 1/1 · object-fit: cover · transparent media bg
 *   layout16x9ImageFirst (.feed-layout--16x9-image-first)
 *     aspect 16/9 · object-fit: contain · dark media bg (#0f172a)
 *
 * Both collapsed chrome (DOM from JS):
 *   media → title → meta(avatar+name+time) → tags
 *   body / comments / edit：僅 masonry「展開」後（無「展開詳情」）
 *
 * DOM order is built by JS. Do NOT use flex-order / post-hoc rewrites to
 * fight the builder. Change cover↔contain or chrome visibility HERE only.
 * =============================================================================
 */

/* --- Media frame (aspect locks; img fills frame) --- */
.feed-media-ratio {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: transparent;
  height: auto;
}
.feed-media-ratio--1-1 { aspect-ratio: 1 / 1 !important; }
.feed-media-ratio--16-9 { aspect-ratio: 16 / 9 !important; }
.feed-media-ratio > img,
.feed-media-ratio > .feed-media-track {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  display: block;
  object-fit: cover !important;
}
.feed-media-ratio--16-9 > img,
.feed-media-ratio--16-9 > .feed-media-track img {
  object-fit: contain !important;
}
.feed-media-ratio > .feed-media-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.feed-media-ratio > .feed-media-track img {
  flex: 0 0 100%;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  scroll-snap-align: center;
}

/* Collapsed masonry: keep aspect; 1:1 cover / 16:9 contain */
.feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio {
  width: 100% !important;
  max-height: none !important;
}
.feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio--1-1 {
  aspect-ratio: 1 / 1 !important;
  background: transparent;
}
.feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio--16-9 {
  aspect-ratio: 16 / 9 !important;
  background: #0f172a;
}
.feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio img,
.feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio > .feed-media-track,
.feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio > .feed-media-track img {
  max-height: none !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}
.feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio--16-9 > img,
.feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio--16-9 > .feed-media-track img {
  object-fit: contain !important;
}

/* Flush chrome visible when collapsed (detail panel stays hidden via .feed-collapse) */
.feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) .feed-flush-title,
.feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) .feed-flush-meta,
.feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) .feed-flush-meta-row,
.feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) .feed-flush-actions,
.feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) .feed-flush-tags {
  display: flex !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: revert;
  padding: revert;
}
.feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) .feed-flush-title {
  display: block !important;
}

/* Legacy「展開詳情」removed — masonry「展開」only */
.feed-tile--ratio-flush .feed-1x1-detail-toggle,
.feed-frame-card .feed-1x1-detail-toggle {
  display: none !important;
}

/* Body copy lives in detail panel — hide when collapsed */
.feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) .feed-1x1-detail-panel .ql-editor {
  display: none !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) .feed-1x1-detail-panel .ql-editor::after {
  display: none;
}

/* Expanded: aspect still owns size; 16:9 stays contain */
.feed-masonry > .feed-tile.is-feed-expanded .feed-media-ratio {
  max-height: none !important;
  width: 100% !important;
}
.feed-masonry > .feed-tile.is-feed-expanded .feed-media-ratio--1-1 {
  aspect-ratio: 1 / 1 !important;
}
.feed-masonry > .feed-tile.is-feed-expanded .feed-media-ratio--16-9 {
  aspect-ratio: 16 / 9 !important;
  background: #0f172a;
}
.feed-masonry > .feed-tile.is-feed-expanded .feed-media-ratio img,
.feed-masonry > .feed-tile.is-feed-expanded .feed-media-ratio > .feed-media-track {
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.feed-masonry > .feed-tile.is-feed-expanded .feed-media-ratio--16-9 > img,
.feed-masonry > .feed-tile.is-feed-expanded .feed-media-ratio--16-9 > .feed-media-track img {
  object-fit: contain !important;
}

/*
 * Width caps — must match news.js / buildRatioFlushCardHtml:
 *   1:1 → max-width 420px; 16:9 → max-width 600px
 * Promoted original→flush cards get .feed-layout--* classes; without this
 * CSS (or the inline cap) they fill the full masonry column and look ≈2× larger
 * than native imageRatio 1:1 / 16:9 flush tiles beside them.
 */
.feed-masonry > .feed-tile.feed-layout--1x1-online,
.feed-frame-card.feed-layout--1x1-online {
  max-width: 420px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.feed-masonry > .feed-tile.feed-layout--16x9-image-first,
.feed-frame-card.feed-layout--16x9-image-first {
  max-width: 600px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Flush cards: edge-to-edge media (no tile padding) */
.feed-masonry > .feed-tile.feed-tile--ratio-flush {
  padding: 0 !important;
  overflow: hidden;
}
.feed-masonry > .feed-tile.is-feed-expanded.feed-tile--ratio-flush {
  padding: 0 !important;
}
.feed-masonry > .feed-tile.feed-tile--ratio-flush > .feed-tile-chrome,
.feed-masonry > .feed-tile.is-feed-expanded.feed-tile--ratio-flush > .feed-tile-chrome {
  padding: 8px 16px 16px;
  margin-top: 0;
}

/* Flush 收合：手機也顯示「展開」列與留言／收藏數（classic 仍隱藏 chrome） */
@media (max-width: 800px) {
  .feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) > .feed-tile-chrome {
    display: flex !important;
    padding: 2px 10px 10px;
    margin-top: 0;
    border-top: none;
    gap: 8px;
  }
  .feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) > .feed-tile-chrome .feed-tile-stats {
    font-size: 11px;
  }
}

/* Full-view frame */
.feed-frame-card .feed-media-ratio {
  max-height: none !important;
  height: auto !important;
  width: 100% !important;
}
.feed-frame-card .feed-media-ratio img,
.feed-frame-card .feed-media-ratio > .feed-media-track {
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.feed-frame-card .feed-media-ratio--16-9 {
  background: #0f172a;
}
.feed-frame-card .feed-media-ratio--16-9 > img,
.feed-frame-card .feed-media-ratio--16-9 > .feed-media-track img {
  object-fit: contain !important;
}
.feed-frame-card.feed-tile--ratio-flush {
  padding: 0 !important;
}

@media (max-width: 800px) {
  .feed-masonry > .feed-tile.feed-tile--ratio-flush {
    padding: 0 !important;
    overflow: hidden !important;
  }
  .feed-masonry > .feed-tile.is-feed-expanded.feed-tile--ratio-flush {
    padding: 0 !important;
  }
  .feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio {
    max-height: none !important;
  }
  .feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio--1-1 {
    aspect-ratio: 1 / 1 !important;
    background: transparent;
  }
  .feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio--16-9 {
    aspect-ratio: 16 / 9 !important;
    background: #0f172a;
  }
  .feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio img,
  .feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio > .feed-media-track,
  .feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio > .feed-media-track img {
    max-height: none !important;
    height: 100% !important;
    margin-bottom: 0 !important;
    object-fit: cover !important;
  }
  .feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio--16-9 > img,
  .feed-masonry > .feed-tile:not(.is-feed-expanded) .feed-media-ratio--16-9 > .feed-media-track img {
    object-fit: contain !important;
  }
  .feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) .feed-flush-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2;
    font-size: 13px !important;
    height: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }
  .feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) .feed-flush-meta,
  .feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) .feed-flush-meta-row,
  .feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) .feed-flush-actions,
  .feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) .feed-flush-tags {
    display: flex !important;
    height: auto !important;
    overflow: visible !important;
  }
  .feed-masonry > .feed-tile.feed-tile--ratio-flush:not(.is-feed-expanded) .feed-ratio-flush-body {
    padding: 8px 10px 10px !important;
    gap: 4px !important;
  }
}