/* Mobile course-card module. Enable with . assets/js/course-mobile-cards.js adds this class on phone widths, or on desktop with ?mobile=1. */ body.course-mobile-prototype { background: #f8fafc; box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18); margin: 0 auto; max-width: 430px; min-height: 100vh; overflow-x: hidden; } html:has(body.course-mobile-prototype) { background: #e2e8f0; } body.course-mobile-prototype .topbar { align-items: flex-start; flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 1rem; } body.course-mobile-prototype .brand { flex: 1 1 auto; gap: 0.5rem; min-width: 0; font-size: 0; line-height: 1; } body.course-mobile-prototype .brand::after { content: "清水高中課程諮詢"; font-size: 0.95rem; line-height: 1.25; } body.course-mobile-prototype .brand svg { width: 1.45rem; height: 1.45rem; } body.course-mobile-prototype .brand span { display: none; } body.course-mobile-prototype .back-to-home { padding: 0.45rem 0.8rem; font-size: 0.8rem; } body.course-mobile-prototype .back-btn { align-items: center; flex: 0 0 auto; gap: 0; height: 2.65rem; justify-content: center; padding: 0; width: 2.65rem; font-size: 0; } body.course-mobile-prototype .back-btn svg { flex: 0 0 auto; height: 1.25rem; width: 1.25rem; } body.course-mobile-prototype .topbar-actions { display: flex; flex: 0 0 auto; gap: 0.5rem; } body.course-mobile-prototype .mobile-preview-btn { display: none; } body.course-mobile-prototype .hero-banner { padding: 2.25rem 1rem 3.5rem; text-align: left; } body.course-mobile-prototype .hero-tag { margin-bottom: 0.9rem; max-width: 100%; white-space: normal; } body.course-mobile-prototype .hero-banner h1 { font-size: 1.65rem; line-height: 1.25; margin-bottom: 0.65rem; } body.course-mobile-prototype .hero-banner p { font-size: 0.95rem; line-height: 1.65; margin: 0; } body.course-mobile-prototype .container { margin: -2rem auto 2.5rem; padding: 0 0.875rem; } body.course-mobile-prototype .course-map-nav-panel { margin-bottom: 1rem; } body.course-mobile-prototype .course-map-nav-panel .course-map-top-tabs { display: flex; flex-wrap: nowrap; gap: 0.25rem; margin: 0 0 0.55rem; padding: 0.25rem; width: 100%; } body.course-mobile-prototype .course-map-nav-panel .tab-btn { flex: 1 1 0; font-size: 0.82rem; line-height: 1.2; min-height: 2.35rem; min-width: 0; padding: 0.4rem 0.35rem; } body.course-mobile-prototype .course-map-nav-panel .tab-label { display: block; max-width: 100%; overflow-wrap: anywhere; word-break: keep-all; } body.course-mobile-prototype .course-map-nav-panel .tab-label .jump-label-main, body.course-mobile-prototype .course-map-nav-panel .tab-label .jump-label-tail { display: inline; } body.course-mobile-prototype .course-map-nav-panel .tab-label .jump-label-tail { display: block; } body.course-mobile-prototype .course-map-jump-nav { background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.9); border-radius: 18px; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14); display: flex; flex-wrap: nowrap; gap: 0.4rem; margin-bottom: 1rem; padding: 0.65rem; } body.course-mobile-prototype .course-map-nav-panel .course-map-jump-nav { background: transparent; border: 0; box-shadow: none; display: none; margin-bottom: 0; padding: 0; } body.course-mobile-prototype .course-map-nav-panel .course-map-jump-nav.active { display: flex; } body.course-mobile-prototype .course-map-jump-btn { align-items: center; border-color: var(--jump-accent, #dbe6f3); border-radius: 9px; display: flex; flex: 1 1 0; font-size: 0.76rem; font-weight: 800; justify-content: center; line-height: 1.18; min-height: 2.75rem; min-width: 0; padding: 0.45rem 0.3rem; text-align: center; } body.course-mobile-prototype .course-map-jump-btn .stat-icon { display: none; } body.course-mobile-prototype .course-map-jump-btn > .jump-label { display: block; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; word-break: keep-all; white-space: normal; } body.course-mobile-prototype .course-map-jump-btn .jump-label-main, body.course-mobile-prototype .course-map-jump-btn .jump-label-tail { display: inline; } body.course-mobile-prototype .course-map-jump-btn .jump-label-tail { display: block; } body.course-mobile-prototype:has(.course-detail-panel) .hero-banner, body.course-mobile-prototype:has(.course-detail-panel) .dashboard-meta, body.course-mobile-prototype:has(.course-detail-panel) .intro-panel, body.course-mobile-prototype:has(.course-intro-grid) .hero-banner, body.course-mobile-prototype:has(.course-intro-grid) .dashboard-meta, body.course-mobile-prototype:has(.course-intro-grid) .intro-panel, body.course-mobile-prototype:has(.required-course-grid) .hero-banner, body.course-mobile-prototype:has(.required-course-grid) .dashboard-meta, body.course-mobile-prototype:has(.required-course-grid) .intro-panel { display: none; } body.course-mobile-prototype:has(.course-detail-panel) .container, body.course-mobile-prototype:has(.course-intro-grid) .container, body.course-mobile-prototype:has(.required-course-grid) .container { margin: 1rem auto 2.5rem; } body.course-mobile-prototype .dashboard-meta { background: transparent; border: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin-bottom: 1rem; padding: 0; box-shadow: none; } body.course-mobile-prototype .dashboard-meta.four-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.course-mobile-prototype .meta-stat { align-items: flex-start; border: 0; border-radius: 12px; color: #ffffff; flex-direction: column; gap: 0.1rem; justify-content: center; min-height: 4rem; min-width: 0; padding: 0.6rem 0.55rem; } body.course-mobile-prototype .meta-stat:last-child { border: 0; padding-bottom: 0.6rem; } body.course-mobile-prototype .meta-stat:has(.stat-icon.mandated) { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); } body.course-mobile-prototype .meta-stat:has(.stat-icon.school) { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); } body.course-mobile-prototype .meta-stat:has(.stat-icon.elective) { background: linear-gradient(135deg, #059669 0%, #047857 100%); } body.course-mobile-prototype .meta-stat:has(.stat-icon.deepening) { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); } body.course-mobile-prototype .meta-stat:has(.stat-icon.experimental) { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); } body.course-mobile-prototype .meta-stat.stat-link { color: #ffffff; text-decoration: none; } body.course-mobile-prototype .meta-stat.stat-link:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.26); outline-offset: 2px; } body.course-mobile-prototype .stat-icon { display: none; } body.course-mobile-prototype .stat-details { display: grid; gap: 0.2rem; min-width: 0; width: 100%; } body.course-mobile-prototype .stat-details h4 { color: #ffffff; font-size: 0; letter-spacing: 0; line-height: 1.3; text-transform: none; } body.course-mobile-prototype .stat-details h4::before { font-size: 0.92rem; font-weight: 800; } body.course-mobile-prototype .meta-stat:has(.stat-icon.mandated) .stat-details h4::before { content: "部定必修"; } body.course-mobile-prototype .meta-stat:has(.stat-icon.school) .stat-details h4::before { content: "校訂必修"; } body.course-mobile-prototype .meta-stat:has(.stat-icon.elective) .stat-details h4::before { content: "多元選修"; } body.course-mobile-prototype .meta-stat:has(.stat-icon.deepening) .stat-details h4::before { content: "加深加廣"; } body.course-mobile-prototype .meta-stat:has(.stat-icon.experimental) .stat-details h4::before { content: "實驗課程"; } body.course-mobile-prototype .stat-details .value { justify-self: end; color: #ffffff; font-size: 0.92rem; font-weight: 800; line-height: 1.3; white-space: nowrap; } body.course-mobile-prototype .stat-details .value span { display: none; } body.course-mobile-prototype .section-anchor { display: block; height: 72px; margin-top: -72px; pointer-events: none; visibility: hidden; } body.course-mobile-prototype .panel-card { margin-bottom: 1rem; border-radius: 16px; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } body.course-mobile-prototype .panel-card:hover { box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } body.course-mobile-prototype .panel-header { align-items: center; flex-direction: row; gap: 0.75rem; justify-content: space-between; padding: 1rem; } body.course-mobile-prototype .header-left { align-items: center; flex: 1 1 auto; gap: 0; min-width: 0; } body.course-mobile-prototype .header-left svg { display: none; } body.course-mobile-prototype .header-left h2 { font-size: 0.95rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.course-mobile-prototype .header-right { flex: 0 0 auto; width: auto; } body.course-mobile-prototype .header-right .badge { display: inline-block; max-width: 100%; padding: 0; border: 0; background: transparent; font-size: 0.75rem; white-space: normal; line-height: 1.35; } body.course-mobile-prototype .panel-body { padding: 1rem; } body.course-mobile-prototype .course-info-grid { background: transparent; border: 0; box-shadow: none; gap: 0.45rem; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; margin-bottom: 1rem; padding: 0; } body.course-mobile-prototype .course-info-grid .meta-stat { align-items: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; color: var(--text-main); display: flex; flex-direction: column; gap: 0.15rem; justify-content: center; min-height: 4rem; min-width: 0; padding: 0.55rem 0.25rem; text-align: center; } body.course-mobile-prototype .course-info-grid .meta-stat:last-child { border: 1px solid #e2e8f0; padding-bottom: 0.5rem; } body.course-mobile-prototype .course-info-grid .stat-icon { display: none; } body.course-mobile-prototype .course-info-grid .stat-details { display: grid; gap: 0.05rem; min-width: 0; width: 100%; } body.course-mobile-prototype .course-info-grid .stat-details h4 { color: var(--text-muted); font-size: 0.68rem; letter-spacing: 0; line-height: 1.25; text-transform: none; } body.course-mobile-prototype .course-info-grid .stat-details h4::before { content: none; } body.course-mobile-prototype .course-info-grid .stat-details .value { color: var(--text-main); font-size: 0.78rem; justify-self: center; line-height: 1.22; min-width: 0; overflow-wrap: anywhere; white-space: normal; } body.course-mobile-prototype .course-info-grid .domain-value { font-size: 0.78rem; white-space: normal; } body.course-mobile-prototype .course-info-grid .stat-details .value span { display: inline; } body.course-mobile-prototype .course-content-panel { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin-bottom: 1.25rem; overflow: visible; } body.course-mobile-prototype .course-content-panel .panel-header { display: none; } body.course-mobile-prototype .course-content-panel .panel-body { gap: 1.65rem; padding: 0 0.95rem; } body.course-mobile-prototype .group-section { margin-bottom: 1.25rem; } body.course-mobile-prototype .panel-body > .group-section[style*="margin-top"]:has(> .course-grid), body.course-mobile-prototype .panel-body > .group-section[style*="margin-top"]:has(> .course-columns) { margin-top: 0 !important; } body.course-mobile-prototype .panel-body > .group-section:has(> .course-grid):not(:has(> .group-title)), body.course-mobile-prototype .panel-body > .group-section:has(> .course-columns):not(:has(> .group-title)) { margin-bottom: 0.45rem; } body.course-mobile-prototype .group-title { align-items: center; flex-direction: row; gap: 0.5rem; justify-content: space-between; margin-bottom: 0.75rem; font-size: 0.95rem; line-height: 1.35; min-width: 0; } body.course-mobile-prototype .group-title span { flex: 0 0 auto; max-width: 55%; font-size: 0.7rem; line-height: 1.3; text-align: right; white-space: normal; } body.course-mobile-prototype .course-grid, body.course-mobile-prototype .course-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)) !important; gap: 0.45rem; } body.course-mobile-prototype:has(.course-card .course-type-badge[data-mobile-label]) .course-grid, body.course-mobile-prototype:has(.course-card .course-type-badge[data-mobile-label]) .course-columns { grid-template-columns: 1fr !important; } body.course-mobile-prototype .course-column { display: contents; } /* Shared compact course-card pattern: one row, course name left and credit right. */ body.course-mobile-prototype .course-card { display: grid; grid-column: auto !important; grid-row: auto !important; grid-template-areas: "name side"; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; column-gap: 0.65rem; min-height: 2.7rem; padding: 0.55rem 0.65rem; border-radius: 10px; background: #ffffff; box-shadow: none; } body.course-mobile-prototype .course-card[style*="display: flex"] { display: grid !important; } body.course-mobile-prototype .course-card[style*="display:none"], body.course-mobile-prototype .course-card[style*="display: none"] { display: none !important; } body.course-mobile-prototype .course-card-highlight { background: #eff6ff !important; border: 2px solid var(--primary-color) !important; border-left-width: 6px !important; box-shadow: 0 6px 14px rgba(59, 130, 246, 0.16) !important; } body.course-mobile-prototype .course-card-highlight-pink { background: #fdf2f8 !important; border-color: #db2777 !important; box-shadow: 0 6px 14px rgba(219, 39, 119, 0.16) !important; } body.course-mobile-prototype .course-card-highlight::before { content: none !important; display: none !important; } body.course-mobile-prototype a.course-card { color: inherit; cursor: pointer; text-decoration: none; } body.course-mobile-prototype a.course-card:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.26); outline-offset: 2px; } body.course-mobile-prototype .course-card:hover { background: #ffffff; box-shadow: none; transform: none; } body.course-mobile-prototype .course-meta, body.course-mobile-prototype .course-bottom { display: contents; } body.course-mobile-prototype .course-name { grid-area: name; display: -webkit-box; min-width: 0; font-size: 0.92rem; line-height: 1.25; max-height: 2.5em; overflow: hidden; overflow-wrap: anywhere; word-break: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.course-mobile-prototype .course-type-badge { display: none; } body.course-mobile-prototype:has(.course-card .course-type-badge[data-mobile-label]) .course-card { grid-template-areas: "name side"; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 0.65rem; } body.course-mobile-prototype:has(.course-card .course-type-badge[data-mobile-label]) .course-card .course-meta { display: contents; } body.course-mobile-prototype .course-card .course-type-badge[data-mobile-label] { align-items: center; align-self: center; border-radius: 999px; display: inline-flex; flex: 0 0 auto; font-size: 0; grid-area: side; justify-self: start; line-height: 1; max-width: calc(100% - 2.6rem); min-width: 0; overflow: hidden; padding: 0.18rem 0.45rem; text-overflow: ellipsis; white-space: nowrap; } body.course-mobile-prototype .course-card .course-type-badge[data-mobile-label]::after { content: attr(data-mobile-label); font-size: 0.68rem; font-weight: 800; line-height: 1.15; margin-top: 0; opacity: 1; overflow: hidden; text-overflow: ellipsis; } body.course-mobile-prototype .course-card > p { display: none; } body.course-mobile-prototype .course-bottom p { display: none !important; } body.course-mobile-prototype .credit-count { grid-area: side; justify-self: end; min-width: 2rem; text-align: right; } body.course-mobile-prototype .credit-count .num { color: var(--text-main); font-weight: 800; font-size: 0.9rem !important; line-height: 1; } body.course-mobile-prototype .credit-count .unit { display: none; } body.course-mobile-prototype .sem-distribution { display: none; } body.course-mobile-prototype .large-course-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4.25rem, auto); align-items: stretch; gap: 0.75rem; padding: 0.875rem; border: 1px solid #e2e8f0; border-radius: 14px; background: #ffffff; } body.course-mobile-prototype .large-course-info { min-width: 0; gap: 0.45rem; } body.course-mobile-prototype .large-course-info h3 { font-size: 1rem; line-height: 1.35; } body.course-mobile-prototype .large-course-info p { display: -webkit-box; overflow: hidden; font-size: 0.82rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } body.course-mobile-prototype .large-course-info > div[style] { flex-wrap: wrap; gap: 0.35rem !important; margin-top: 0.15rem !important; } body.course-mobile-prototype .mobile-summary-link { align-items: center; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; color: #9a3412; display: inline-flex; font-size: 0.82rem; font-weight: 800; justify-content: center; min-height: 2.25rem; padding: 0.4rem 0.75rem; text-decoration: none; } body.course-mobile-prototype .mobile-summary-link:focus-visible { outline: 3px solid rgba(217, 119, 6, 0.26); outline-offset: 2px; } body.course-mobile-prototype .large-course-stat { min-width: 4.25rem; padding: 0.6rem 0.45rem; border-radius: 12px; gap: 0.15rem; } body.course-mobile-prototype .large-course-stat .big-num { font-size: 1.85rem; } body.course-mobile-prototype .large-course-stat span:not(.big-num) { font-size: 0.68rem !important; line-height: 1.2; } body.course-mobile-prototype .math-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.75rem !important; } body.course-mobile-prototype .math-choice-card { min-width: 0; padding: 1rem !important; } body.course-mobile-prototype .math-choice-heading { align-items: flex-start !important; flex-direction: column !important; gap: 0.45rem !important; line-height: 1.35 !important; } body.course-mobile-prototype .math-choice-heading > span:first-child { display: block; overflow-wrap: normal; word-break: keep-all; } body.course-mobile-prototype .math-choice-badge { align-self: flex-start; display: inline-block; max-width: 100%; padding: 0.35rem 0.6rem !important; border-radius: 999px !important; line-height: 1.3 !important; white-space: normal; } body.course-mobile-prototype .explanation-box { margin-bottom: 1rem; padding: 1rem; border-radius: 14px; } body.course-mobile-prototype .explanation-title { align-items: flex-start; gap: 0.5rem; font-size: 1rem; line-height: 1.35; } body.course-mobile-prototype .explanation-list { gap: 0.55rem; } body.course-mobile-prototype .explanation-list li { padding-left: 1.35rem; font-size: 0.86rem; line-height: 1.65; } body.course-mobile-prototype footer { padding: 2.5rem 1rem; } body.course-mobile-prototype .footer-right { flex-wrap: wrap; gap: 0.85rem; } /* Course map portal page */ body.course-mobile-prototype .topbar { height: auto; min-height: 0; } body.course-mobile-prototype .brand-logo-icon { flex: 0 0 2rem; height: 2rem; width: 2rem; } body.course-mobile-prototype .hero-container { max-width: 100%; } body.course-mobile-prototype .hero-category { align-items: center; border-radius: 999px; display: inline-flex; font-size: 0.78rem; gap: 0.35rem; line-height: 1.35; margin-bottom: 0.85rem; max-width: 100%; padding: 0.35rem 0.7rem; white-space: normal; } body.course-mobile-prototype .page-container { margin: -1.7rem auto 2.5rem; padding: 0 0.875rem; } body.course-mobile-prototype .content-card { border-radius: 16px; padding: 1rem; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } body.course-mobile-prototype .intro-box { border-left-width: 3px; font-size: 0.87rem; line-height: 1.65; margin-bottom: 1.25rem; padding: 0.95rem; text-align: left; } body.course-mobile-prototype .section-title { align-items: flex-start; font-size: 1.05rem; gap: 0.5rem; line-height: 1.35; margin-bottom: 0.9rem; } body.course-mobile-prototype .section-title .title-icon { flex: 0 0 auto; margin-top: 0.1rem; } body.course-mobile-prototype .category-grid { gap: 0.75rem; grid-template-columns: 1fr; margin-bottom: 1.25rem; } body.course-mobile-prototype .category-card { border-radius: 14px; padding: 1rem; box-shadow: none; } body.course-mobile-prototype .category-card:hover { border-color: var(--line); box-shadow: none; transform: none; } body.course-mobile-prototype .cat-header { align-items: flex-start; gap: 0.65rem; margin-bottom: 0.75rem; } body.course-mobile-prototype .cat-title-wrap { align-items: center; gap: 0.65rem; min-width: 0; } body.course-mobile-prototype .cat-icon-badge { border-radius: 9px; flex: 0 0 2rem; height: 2rem; width: 2rem; } body.course-mobile-prototype .cat-name { font-size: 1rem; line-height: 1.35; } body.course-mobile-prototype .cat-type-label { flex: 0 0 auto; line-height: 1.3; margin-top: 0.2rem; max-width: 7rem; text-align: center; white-space: normal; } body.course-mobile-prototype .cat-desc { font-size: 0.86rem; line-height: 1.65; text-align: left; } body.course-mobile-prototype .card-action-group { display: grid; gap: 0.45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.85rem; } body.course-mobile-prototype .card-action-btn { border-radius: 10px; justify-content: center; line-height: 1.25; margin-top: 0; min-height: 2.3rem; padding: 0.55rem 0.6rem; text-align: center; } body.course-mobile-prototype .card-action-btn:hover { transform: none; } body.course-mobile-prototype .portal-panel { border-radius: 16px; margin-bottom: 1rem; overflow: hidden; padding: 1rem; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } body.course-mobile-prototype .portal-panel::before { border-radius: 16px 0 0 16px; width: 5px; } body.course-mobile-prototype .portal-panel:hover { border-color: var(--line); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } body.course-mobile-prototype .panel-header-row { align-items: flex-start; flex-direction: column; gap: 0.55rem; margin-bottom: 0.85rem; padding-bottom: 0.8rem; } body.course-mobile-prototype .panel-title-wrap { align-items: flex-start; gap: 0.5rem; min-width: 0; } body.course-mobile-prototype .panel-title-wrap > svg { display: none; } body.course-mobile-prototype .panel-title { font-size: 0.98rem; line-height: 1.4; } body.course-mobile-prototype .panel-badge { align-self: flex-start; line-height: 1.3; padding: 0.25rem 0.65rem; } body.course-mobile-prototype .dashboard-row { display: block; gap: 0; padding: 0.9rem 0; } body.course-mobile-prototype .dashboard-row[style] { padding: 0.9rem 0 !important; } body.course-mobile-prototype .dashboard-label { align-items: flex-start; font-size: 0.9rem; gap: 0.45rem; line-height: 1.35; margin-bottom: 0.65rem; } body.course-mobile-prototype .dashboard-label svg { flex: 0 0 auto; margin-top: 0.1rem; } body.course-mobile-prototype .chips-group { display: grid; gap: 0.45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } body.course-mobile-prototype .chip-btn { border-radius: 10px; font-size: 0.82rem; justify-content: center; line-height: 1.25; min-height: 2.35rem; padding: 0.55rem 0.6rem; text-align: center; white-space: normal; } body.course-mobile-prototype .chip-btn:hover { transform: none; } body.course-mobile-prototype .chip-btn.disabled { color: #94a3b8; } body.course-mobile-prototype .portal-links-grid, body.course-mobile-prototype .portal-links-grid[style] { gap: 0.5rem; grid-template-columns: 1fr; margin-bottom: 0 !important; } body.course-mobile-prototype .subnav-card { border-radius: 12px; gap: 0.65rem; min-height: 3.25rem; padding: 0.75rem 0.85rem; } body.course-mobile-prototype .subnav-card:hover { box-shadow: none; transform: none; } body.course-mobile-prototype .subnav-left-row { align-items: center; gap: 0.6rem; min-width: 0; } body.course-mobile-prototype .subnav-left-row > span:last-child { font-size: 0.9rem; line-height: 1.35; } body.course-mobile-prototype .subnav-icon-circle { flex: 0 0 2rem; height: 2rem; width: 2rem; } body.course-mobile-prototype .card-arrow { flex: 0 0 auto; } body.course-mobile-prototype .pdf-download-btn { border-radius: 12px; justify-content: center; line-height: 1.35; margin-top: 0; padding: 0.75rem; text-align: center; width: 100%; } body.course-mobile-prototype .pdf-download-btn:hover { transform: none; } body.course-mobile-prototype .counsel-alert { border-radius: 14px; gap: 0.55rem; margin-top: 1rem; padding: 0.95rem; } body.course-mobile-prototype .alert-content { font-size: 0.86rem; line-height: 1.65; } body.course-mobile-prototype .update-meta { align-items: flex-start; flex-wrap: wrap; justify-content: flex-start; margin-top: 1.25rem; padding-top: 0.85rem; } body.course-mobile-prototype .footer { padding: 2.25rem 1rem 1.75rem; } body.course-mobile-prototype .footer-content { align-items: flex-start; flex-direction: column; gap: 1rem; padding-bottom: 1.25rem; } body.course-mobile-prototype .footer-left p { line-height: 1.5; } body.course-mobile-prototype .footer-bottom { margin-top: 1rem; text-align: left; } /* Main course map landing page: chap03.html */ body.course-mobile-prototype .intro-title-row { align-items: flex-start; font-size: 1rem; gap: 0.5rem; line-height: 1.35; margin-bottom: 0.55rem; } body.course-mobile-prototype .intro-title-row svg { flex: 0 0 auto; margin-top: 0.1rem; } body.course-mobile-prototype .intro-text { font-size: 0.86rem; line-height: 1.65; text-align: left; } body.course-mobile-prototype .section-group { margin-bottom: 1.35rem; } body.course-mobile-prototype .group-title { align-items: flex-start; font-size: 1rem; gap: 0.5rem; line-height: 1.35; margin-bottom: 0.85rem; padding-bottom: 0.65rem; } body.course-mobile-prototype .group-title .group-icon { flex: 0 0 auto; margin-top: 0.05rem; } body.course-mobile-prototype .student-grid, body.course-mobile-prototype .alumni-list { display: grid; gap: 0.6rem; grid-template-columns: 1fr; } body.course-mobile-prototype .student-card { border-radius: 14px; padding: 1rem; box-shadow: none; } body.course-mobile-prototype .student-card:hover { border-color: var(--line); box-shadow: none; transform: none; } body.course-mobile-prototype .student-card::before { width: 5px; } body.course-mobile-prototype .card-meta { margin-bottom: 0.65rem; } body.course-mobile-prototype .card-badge { line-height: 1.3; white-space: normal; } body.course-mobile-prototype .card-icon { flex: 0 0 2rem; height: 2rem; width: 2rem; } body.course-mobile-prototype .card-year-title { align-items: flex-start; font-size: 0.98rem; gap: 0.6rem; line-height: 1.35; } body.course-mobile-prototype .card-desc { font-size: 0.84rem; line-height: 1.55; } body.course-mobile-prototype .alumni-item { border-radius: 12px; font-size: 0.9rem; line-height: 1.35; min-height: 3.1rem; padding: 0.75rem 0.85rem; } body.course-mobile-prototype .alumni-item:hover { border-color: var(--line); box-shadow: none; transform: none; } body.course-mobile-prototype .alumni-left { gap: 0.55rem; min-width: 0; } body.course-mobile-prototype .alumni-left span { min-width: 0; }