/* 區塊堆疊編輯器輸出內容的前台顯示樣式（對應 admin/load/css/block_editor.css 裡跟「內容本身長相」有關的規則，
   拿掉純編輯器介面用的部分：拖曳把手/刪除鈕/區塊選單/設定面板等），套用範圍限定在 .block-content 容器內 */

.block-content blockquote { margin: 0 0 1em; padding: 6px 16px; border-left: 3px solid rgba(0, 0, 0, 0.2); color: var(--text-color, inherit); font-size: var(--text-size, inherit); font-weight: var(--text-weight, inherit); font-style: var(--text-style, italic); text-align: var(--text-align, inherit); line-height: var(--text-line-height, inherit); letter-spacing: var(--text-letter-spacing, inherit); }
.block-content blockquote.pullquote { border-left: none; border-top: 2px solid rgba(0, 0, 0, 0.3); border-bottom: 2px solid rgba(0, 0, 0, 0.3); padding: 12px 8px; text-align: var(--text-align, center); font-size: var(--text-size, 1.1em); }
.block-content pre { margin: 0 0 1em; padding: 10px; background: rgba(0, 0, 0, 0.05); border-radius: 4px; font-family: Consolas, Monaco, monospace; color: var(--text-color, inherit); font-size: var(--text-size, 13px); font-weight: var(--text-weight, inherit); font-style: var(--text-style, inherit); text-align: var(--text-align, inherit); line-height: var(--text-line-height, inherit); letter-spacing: var(--text-letter-spacing, inherit); white-space: pre-wrap; }
.block-content ul.block_list, .block-content ol.block_list { margin: 0 0 1em; padding-left: 1.2em; color: var(--text-color, inherit); font-size: var(--text-size, inherit); font-weight: var(--text-weight, inherit); font-style: var(--text-style, inherit); text-align: var(--text-align, inherit); line-height: var(--text-line-height, inherit); letter-spacing: var(--text-letter-spacing, inherit); }
.block-content ul.block_list li, .block-content ol.block_list li { margin: 2px 0; }
.block-content p { margin: 0 0 1em; color: var(--text-color, inherit); font-size: var(--text-size, inherit); font-weight: var(--text-weight, inherit); font-style: var(--text-style, inherit); text-align: var(--text-align, inherit); line-height: var(--text-line-height, inherit); letter-spacing: var(--text-letter-spacing, inherit); }
.block-content h1, .block-content h2, .block-content h3, .block-content h4, .block-content h5, .block-content h6 { margin: 0 0 0.6em; color: var(--text-color, inherit); font-weight: var(--text-weight, bold); font-style: var(--text-style, inherit); text-align: var(--text-align, inherit); line-height: var(--text-line-height, inherit); letter-spacing: var(--text-letter-spacing, inherit); }
.block-content h1 { font-size: var(--text-size, 2em); }
.block-content h2 { font-size: var(--text-size, 1.5em); }
.block-content h3 { font-size: var(--text-size, 1.17em); }
.block-content h4 { font-size: var(--text-size, 1em); }
.block-content h5 { font-size: var(--text-size, 0.83em); }
.block-content h6 { font-size: var(--text-size, 0.67em); }
.block-content table.block_table { border-collapse: var(--table-border-collapse, collapse); border-spacing: var(--table-cell-spacing, 0); width: var(--table-width, 100%); background-color: var(--table-bg, transparent); color: var(--table-text-color, inherit); font-size: var(--table-text-size, inherit); margin-bottom: 1em; }
.block-content table.block_table td { border: var(--table-border-width, 1px) solid var(--table-border-color, rgba(0, 0, 0, 0.15)); padding: var(--table-cell-padding, 6px 10px); min-width: 40px; background-color: var(--cell-bg, var(--row-bg, transparent)); color: var(--cell-text-color, inherit); }
.block-content details.block_details summary { cursor: pointer; font-weight: bold; }
.block-content details.block_details .details_body { padding: 6px 0 0 4px; }
.block-content hr.block_separator { border: none; border-top: var(--sep-width, 1px) var(--sep-style, solid) var(--sep-color, rgba(0, 0, 0, 0.15)); margin: 1em 0; }

.block-content .media_placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.block-content .media_placeholder img.media_selected_image { max-width: 100%; height: auto; display: block; }
/* 圖片區塊在外觀設定另外設「高度」/「寬度」時，容器會變成固定尺寸，但圖片本身預設height:auto完全不理會
   容器高度，圖片撐爆容器往下溢出(overflow沒裁切時直接穿出去，裁切了也只是把溢出部分硬生生切斷、
   不會置中裁圖)。這裡多一層[data-media-type="image"]拉高specificity蓋過上面那條預設值，讓圖片改成
   撐滿容器寬高、用object-fit:cover自動置中裁切——沒設定固定高寬時，容器本身也是auto高度，
   height:100%在auto高度的父層身上規格上會退回成auto，等於跟原本沒兩樣，不會影響現有沒設定過的內容 */
.block-content .media_placeholder[data-media-type="image"] { overflow: hidden; }
.block-content .media_placeholder[data-media-type="image"] img.media_selected_image { width: 100%; height: 100%; object-fit: cover; }
.block-content .media_placeholder a.media_selected_file { color: inherit; text-decoration: underline; word-break: break-all; }
.block-content .block_embed_frame_wrap { position: relative; width: 100%; box-sizing: border-box; padding-top: 56.25%; background: #000; overflow: hidden; }
.block-content .block_embed_frame_wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.block-content .block_embed_frame_wrap.block_embed_instagram,
.block-content .block_embed_frame_wrap.block_embed_facebook { padding-top: 120%; background: #fff; }
.block-content .media_placeholder[data-embed-fixed-height] .block_embed_frame_wrap { padding-top: 0; height: 100%; }
.block-content .media_text_row { display: flex; gap: 16px; align-items: stretch; }
.block-content .media_text_row .media_placeholder { flex: 0 0 40%; }
.block-content .media_text_row > div:not(.media_placeholder) { flex: 1; }

.block-content .block_buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.block-content .block_buttons .fake_button { display: inline-block; padding: 8px 18px; border-radius: 4px; border: 1px solid currentColor; }
.block-content .block_link_btn { display: inline-block; font-size: var(--text-size, 14px); font-weight: var(--text-weight, inherit); font-style: var(--text-style, inherit); text-align: var(--text-align, inherit); line-height: var(--text-line-height, inherit); letter-spacing: var(--text-letter-spacing, inherit); text-decoration: none; transition: opacity 0.15s ease; }
.block-content .block_link_btn:hover { opacity: 0.85; }
.block-content .block_link_btn_solid { padding: 10px 24px; border-radius: 4px; background-color: #AC5757; color: var(--text-color, #ffffff); }
.block-content .block_link_btn_outline { padding: 10px 24px; border-radius: 4px; background: transparent; border: 1.5px solid #AC5757; color: var(--text-color, #AC5757); }
.block-content .block_link_btn_pill { padding: 10px 28px; border-radius: 999px; background-color: #AC5757; color: var(--text-color, #ffffff); }
.block-content .block_link_btn_text { padding: 4px 0; background: none; color: var(--text-color, #AC5757); text-decoration: underline; }

.block-content .block_columns { display: flex; gap: var(--columns-gap, 16px); align-items: var(--columns-align, stretch); background-color: var(--columns-bg, transparent); margin-bottom: 1em; }
.block-content .block_columns > div { flex: var(--col-flex, 1 1 0%); padding: var(--col-padding, 0); background-color: var(--col-bg, transparent); }
.block-content .block_group { padding: 10px; }
.block-content .block_div_zone { color: var(--text-color, inherit); font-size: var(--text-size, inherit); font-weight: var(--text-weight, inherit); font-style: var(--text-style, inherit); text-align: var(--text-align, inherit); line-height: var(--text-line-height, inherit); letter-spacing: var(--text-letter-spacing, inherit); }
.block-content .block_row { display: flex; gap: var(--list-gap, 8px); align-items: var(--list-align, stretch); justify-content: var(--list-justify, flex-start); background-color: var(--list-bg, transparent); margin-bottom: 1em; }
.block-content .block_stack { display: flex; flex-direction: column; gap: var(--list-gap, 8px); align-items: var(--list-align, stretch); justify-content: var(--list-justify, flex-start); background-color: var(--list-bg, transparent); margin-bottom: 1em; }
.block-content .block_row .flex_item, .block-content .block_stack .flex_item { padding: var(--item-padding, 0); text-align: center; flex: var(--item-flex, 1 1 0%); background-color: var(--item-bg, transparent); }
.block-content .block_layout_grid { display: grid; grid-template-columns: repeat(var(--grid-cols, 2), 1fr); gap: var(--grid-gap, 8px); background-color: var(--grid-bg, transparent); margin-bottom: 1em; }
.block-content .block_layout_grid .grid_cell { padding: var(--grid-cell-padding, 16px); text-align: center; background-color: var(--grid-cell-bg, transparent); }
.block-content .block_readmore { display: inline-block; font-size: 13px; color: #AC5757; text-decoration: underline; }
.block-content .block_spacer { height: 40px; }

@media (max-width: 767px) {
  .block-content .block_columns,
  .block-content .media_text_row { flex-direction: column; }
}

/* 內容區塊「進場動畫」：套用在 load/function/block_render.php 輸出的容器或個別item本身(data-animate屬性)，
   捲動偵測交給 style/scroll_animate.js，這裡只負責動畫效果本身；.is-visible是進入畫面後才加上的class。
   0.6s是動畫時間預設值，管理者在後台自訂的動畫時間(ANIMATE_DURATION)會用inline style的transition-duration蓋過去 */
[data-animate] { opacity: 0; transition-property: opacity, transform; transition-timing-function: ease; transition-duration: 0.6s; }
[data-animate="fade-up"] { transform: translateY(30px); }
[data-animate="fade-down"] { transform: translateY(-30px); }
[data-animate="fade-left"] { transform: translateX(30px); }
[data-animate="fade-right"] { transform: translateX(-30px); }
[data-animate="zoom-in"] { transform: scale(0.92); }
[data-animate="zoom-out"] { transform: scale(1.08); }
[data-animate].is-visible { opacity: 1; transform: none; }