/* 區塊堆疊編輯器輸出內容的前台顯示樣式（對應 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; }
.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_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_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); 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); 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; }
}