/*
 * Block-editor pages (template "克雷區塊頁（全寬）") and the theme's patterns (patterns/*.php).
 * Also loaded in the block editor as an editor style, so editors see the same look.
 *
 * Section classes (set on the pattern's outer group):
 *   ce-section        padding and centred content
 *   ce-bg-lavender    light purple background
 *   ce-dark           white text (for sections with a dark background image)
 */

:root {
	--ce-font: "GenSenRounded TW", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
	--ce-purple: #46284c;
	--ce-text: #404040;
	--ce-lavender: #f6f0ff;
	--ce-teal: #3aa9bc;
	--ce-teal-dark: #2b8a96;
	--ce-gold: #cc9902;
	--ce-violet: #9a2bdb;
	--ce-yellow: #feff81;
	--ce-width: 1140px;
	--ce-gutter: 16px;
}

/* ---- Page base ---------------------------------------------------------------------------- */

.claires-blocks,
.editor-styles-wrapper {
	font-family: var(--ce-font);
	font-size: 18px;
	line-height: 1.5;
	color: var(--ce-text);
}

.claires-blocks {
	overflow-x: clip;
}

/* The legacy site-wide CSS styles every <a> as a padded nowrap block (meant for menus). */
.claires-blocks a {
	display: inline;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
	font-family: inherit;
	white-space: normal;
	color: inherit;
	text-decoration: underline;
}

.claires-blocks h1,
.claires-blocks h2,
.claires-blocks h3,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3 {
	font-family: var(--ce-font);
	color: var(--ce-purple);
	margin-top: 0;
	margin-bottom: 0.6em;
}

.claires-blocks h2,
.editor-styles-wrapper h2 {
	font-size: clamp(26px, 4vw, 37px);
	font-weight: 600;
	line-height: 1.43;
}

.claires-blocks h3,
.editor-styles-wrapper h3 {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
}

.claires-blocks figure {
	margin-top: 0;
	margin-bottom: 0;
}

.claires-blocks img {
	max-width: 100%;
	height: auto;
}

/* ---- Sections ----------------------------------------------------------------------------- */

.ce-section {
	padding: 60px var(--ce-gutter);
}

.ce-section > * {
	max-width: var(--ce-width);
	margin-left: auto;
	margin-right: auto;
}

.ce-bg-lavender {
	background-color: var(--ce-lavender);
}

.ce-dark,
.ce-dark h1,
.ce-dark h2,
.ce-dark h3,
.claires-blocks .ce-dark h2,
.editor-styles-wrapper .ce-dark h2 {
	color: #fff;
}

.ce-title-lg {
	font-size: clamp(28px, 4.5vw, 42px) !important;
	font-weight: 500 !important;
}

.ce-title-sm {
	font-size: clamp(22px, 3vw, 26px) !important;
}

.ce-title-xl {
	font-size: clamp(34px, 5vw, 52px) !important;
	font-weight: 500 !important;
	line-height: 1.1 !important;
}

.ce-lead {
	font-size: clamp(18px, 2.2vw, 22px);
	line-height: 1.7;
	color: var(--ce-purple);
	margin-bottom: 40px;
}

.ce-eyebrow {
	font-size: 24px;
	font-weight: 300;
	margin: 0 0 4px;
}

.ce-bio {
	font-size: 20px;
	line-height: 1.65;
}

/* Spacing between sibling blocks inside a section. */
.ce-section > * + * {
	margin-top: 24px;
}

/* ---- Buttons ------------------------------------------------------------------------------ */

.wp-block-button.is-style-claires-cta .wp-block-button__link,
.claires-blocks .wp-block-button.is-style-claires-cta .wp-block-button__link {
	display: inline-block;
	background-color: var(--ce-teal);
	border: 4px solid var(--ce-teal-dark);
	border-radius: 2px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	padding: 20px 150px;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.2s;
}

.wp-block-button.is-style-claires-cta .wp-block-button__link:hover,
.wp-block-button.is-style-claires-cta .wp-block-button__link:focus-visible {
	background-color: var(--ce-gold);
	border-color: var(--ce-gold);
}

@media (max-width: 767px) {
	.wp-block-button.is-style-claires-cta .wp-block-button__link,
	.claires-blocks .wp-block-button.is-style-claires-cta .wp-block-button__link {
		padding: 16px 40px;
	}
}

/* ---- Hero --------------------------------------------------------------------------------- */

.ce-hero {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 40px;
	background-color: #000;
}

.ce-hero > * {
	width: 100%;
}

.ce-hero-link a {
	color: var(--ce-yellow);
	font-size: 18px;
}

@media (max-width: 767px) {
	.ce-hero {
		min-height: 0;
	}
}

/* ---- Slider (blocks.js adds arrows and dots) ---------------------------------------------- */

.ce-slider {
	display: flex;
	max-width: 770px;
	margin-left: auto;
	margin-right: auto;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.ce-slider::-webkit-scrollbar {
	display: none;
}

.ce-slider > * {
	flex: 0 0 100%;
	margin: 0 !important;
	scroll-snap-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ce-slider > .wp-block-embed .wp-block-embed__wrapper {
	width: 100%;
}

.ce-slider-wrap {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 60px;
}

.ce-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	min-width: 0;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.ce-slider-arrow:hover,
.ce-slider-arrow:focus-visible {
	background: rgba(255, 255, 255, 0.35);
}

.ce-slider-arrow--prev {
	left: 0;
}

.ce-slider-arrow--next {
	right: 0;
}

.ce-slider-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.ce-slider-dots button {
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	min-width: 0;
	padding: 0 !important;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	cursor: pointer;
}

.ce-slider-dots button[aria-current="true"] {
	background: #fbb7ff;
}

/* In the editor, stack the slides so each one is easy to select and edit. */
.editor-styles-wrapper .ce-slider {
	display: block;
	overflow: visible;
	margin-left: auto;
	margin-right: auto;
}

.editor-styles-wrapper .ce-slider > * + * {
	margin-top: 16px !important;
}

@media (max-width: 767px) {
	.ce-slider-wrap {
		padding: 0;
	}

	.ce-slider-arrow {
		display: none;
	}
}

/* ---- Rotating word in a heading ----------------------------------------------------------- */

.ce-rotate {
	background-color: var(--ce-violet);
	color: #fff;
	padding: 0 0.15em;
}

/* Source words for .ce-rotate: hidden on the page, shown (labelled) in the editor. */
.claires-blocks .ce-rotate-words {
	display: none;
}

.editor-styles-wrapper .ce-rotate-words {
	border: 1px dashed var(--ce-violet);
	padding: 4px 8px;
	font-size: 14px;
	text-align: center;
}

.editor-styles-wrapper .ce-rotate-words::before {
	content: "輪替文字（用「、」分隔，頁面上不顯示）：";
	color: var(--ce-violet);
}

/* ---- Cards -------------------------------------------------------------------------------- */

.ce-cards-3 {
	max-width: 960px !important;
	gap: 40px;
}

.ce-dark .ce-cards-3 {
	max-width: 1100px !important;
	gap: 20px;
}

.wp-block-image.is-style-claires-card img {
	border-radius: 12px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.ce-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	max-width: 1140px !important;
}

.ce-grid > * {
	flex: 0 1 364px;
	margin: 0 !important;
}

.ce-card {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 10px -1px rgba(47, 38, 50, 0.5);
	overflow: hidden;
	padding-bottom: 24px;
}

.ce-card .wp-block-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ce-card h3 {
	margin: 20px 12px 12px;
}

.ce-card p {
	font-size: 16px;
	line-height: 1.55;
	color: var(--ce-purple);
	margin: 0 20px;
}

/* ---- Checklist ---------------------------------------------------------------------------- */

.ce-checklist {
	list-style: none;
	padding: 0;
	color: var(--ce-purple);
}

.ce-checklist li {
	margin: 0;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 1.6em;
	position: relative;
}

.ce-checklist li::before {
	content: "✍️";
	position: absolute;
	left: 0;
	top: 8px;
}

/* ---- Teacher ------------------------------------------------------------------------------ */

.ce-teacher .wp-block-columns {
	gap: 40px;
}

.ce-teacher .wp-block-image:not(.ce-autograph) img {
	width: 440px;
}

.ce-autograph {
	max-width: 260px;
	margin-top: -40px !important;
}

/* ---- FAQ ---------------------------------------------------------------------------------- */

.ce-faq {
	max-width: 684px !important;
	background: #fff;
	margin-top: 15px !important;
}

.ce-faq summary {
	list-style: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	padding: 40px 40px 40px 64px;
	position: relative;
}

.ce-faq summary::-webkit-details-marker {
	display: none;
}

.ce-faq summary::before {
	content: "+";
	position: absolute;
	left: 34px;
	font-size: 22px;
	line-height: 1;
	top: 50%;
	transform: translateY(-50%);
}

.ce-faq[open] summary::before {
	content: "−";
}

.ce-faq > :not(summary) {
	font-size: 16px;
	line-height: 1.7;
	margin: 0 40px 16px;
}

.ce-faq > :last-child {
	padding-bottom: 12px;
}

/* ---- Divider, photo band ------------------------------------------------------------------ */

.ce-divider {
	width: 68px;
	border: 0;
	border-top: 2px solid var(--ce-purple);
	opacity: 1;
	margin-bottom: 24px !important;
}

.ce-photo-band {
	min-height: 494px;
}

@media (max-width: 767px) {
	.ce-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.ce-photo-band {
		min-height: 240px;
	}
}

/* ---- Animations (blocks.js adds .ce-anim to <html>; skipped with reduced motion) ---------- */

/* Scroll reveal: fade and rise into place. */
.ce-anim .ce-reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.ce-anim .ce-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Headings marked as bouncing (e.g. "這門課適合以下情形的你 ↓") bounce once when shown. */
.ce-anim .ce-title-sm.is-visible {
	animation: ce-bounce 1s ease 0.3s 1;
}

@keyframes ce-bounce {

	0%,
	20%,
	53%,
	100% {
		transform: none;
	}

	40%,
	43% {
		transform: translateY(-20px);
	}

	70% {
		transform: translateY(-10px);
	}

	90% {
		transform: translateY(-4px);
	}
}

/* Image cards grow slightly on hover. */
.wp-block-image.is-style-claires-card img {
	transition: transform 0.3s ease;
}

.wp-block-image.is-style-claires-card:hover img {
	transform: scale(1.03);
}

/* Typing cursor for the rotating word. */
.ce-anim .ce-rotate::after {
	content: "|";
	margin-left: 2px;
	animation: ce-blink 0.8s steps(1) infinite;
}

@keyframes ce-blink {

	50% {
		opacity: 0;
	}
}