/* WO-040 教學頁共用版面 */
.learn-page { padding-block: 40px 64px; }
.learn-crumb { display: flex; gap: 8px; align-items: center; color: #6B7280; font-size: 14px; margin-bottom: 12px; }
.learn-crumb a { color: #2563EB; text-decoration: none; }
.learn-head { margin-bottom: 24px; }
.learn-head h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 900; line-height: 1.25; margin: 10px 0 8px; }
.learn-head h1 em { font-style: normal; color: #2563EB; }
.learn-head p { color: #4B5563; font-size: 18px; margin: 0; }
.learn-chip { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #EFF6FF; color: #1D4ED8; font-weight: 700; font-size: 14px; }
.learn-chip.paid { background: #FEF3C7; color: #92400E; }
.learn-next { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-top: 24px; }
/* 教學總覽 */
.learn-group { margin-top: 36px; }
.learn-group h2 { font-size: 24px; font-weight: 900; margin: 0 0 6px; }
.learn-group > p { color: #6B7280; margin: 0 0 16px; }
.learn-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.learn-tile a, .learn-tile > div { display: flex; flex-direction: column; height: 100%; border: 1px solid #E5E7EB; border-radius: 16px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s ease; }
.learn-tile a:hover { box-shadow: 0 12px 28px rgba(17, 24, 39, .1); transform: translateY(-2px); }
.learn-tile a:focus-visible { outline: 2px solid #2563EB; outline-offset: 3px; }
.learn-tile img { width: 100%; aspect-ratio: 1920 / 1009; object-fit: cover; display: block; background: #F3F4F6; }
.learn-tile .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.learn-tile h3 { font-size: 18px; font-weight: 700; margin: 0; }
.learn-tile p { margin: 0; color: #6B7280; font-size: 15px; line-height: 1.6; }
.learn-tile .meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.learn-tile .soon { color: #9CA3AF; }
.learn-tile > div { background: #F9FAFB; }
@media (max-width: 700px) { .learn-page { padding-block: 24px 40px; } .learn-head p { font-size: 16px; } }
.learn-no { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 999px; background: #111827; color: #fff; font-size: 13px; font-weight: 600; vertical-align: 2px; }
.learn-head .learn-no { margin-right: 8px; }