/* =============================================================
   Single Post — single.css
   Prefix: .ipsingle-
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;700;900&display=swap');

/* ── GP grid override ─────────────────────────────────────── */
/* #page 保留 padding-top：iLMS header JS 用它來補固定 header 高度 */
#page,
#page.grid-container {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
}
/* 移除 GP 在內容區加的預設 padding，避免 banner 上方出現空隙 */
#content,
#content.grid-container,
#primary,
.content-area {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* ── Hero Banner ───────────────────────────────────────────── */
.ipsingle-hero {
    position: relative;
    height: 150px;
    background: #0a1628 center / cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ipsingle-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 22, 40, .54);
}
.ipsingle-hero-subtitle {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .14em;
    margin: 0 0 6px;
}
.ipsingle-hero-title {
    position: relative;
    z-index: 1;
    color: #ffffff;
    font-size: 32px;
    font-weight: 900;
    margin: 0;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
    letter-spacing: .06em;
    font-family: 'Kumbh Sans', -apple-system, 'Microsoft JhengHei', sans-serif;
}
/* 最新消息 Hero：六邊形＋菱形＋不規則線條＋星星 */
.ipsingle-hero--news .ipsingle-hero-overlay {
    background-color: rgba(10, 22, 40, .54);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='150'%3E%3Cpolygon points='75,26 94.05,37 94.05,59 75,70 55.95,59 55.95,37' stroke='white' stroke-width='1' fill='none' opacity='.3'/%3E%3Cpolygon points='310,87 325.59,96 325.59,114 310,123 294.41,114 294.41,96' stroke='white' stroke-width='1' fill='none' opacity='.25'/%3E%3Cpolygon points='510,14 530.78,26 530.78,50 510,62 489.22,50 489.22,26' stroke='white' stroke-width='1.1' fill='none' opacity='.28'/%3E%3Cpolygon points='195,110 207.99,117.5 207.99,132.5 195,140 182.01,132.5 182.01,117.5' stroke='white' stroke-width='.8' fill='none' opacity='.22'/%3E%3Cpolygon points='235,36 253,62 235,88 217,62' stroke='white' stroke-width='1' fill='none' opacity='.32'/%3E%3Cpolygon points='445,92 459,112 445,132 431,112' stroke='white' stroke-width='.9' fill='none' opacity='.25'/%3E%3Cpolygon points='38,76 48,92 38,108 28,92' stroke='white' stroke-width='.8' fill='none' opacity='.28'/%3E%3Cpolyline points='0,55 45,40 95,68 145,32 210,52 270,38' stroke='white' stroke-width='1' fill='none' opacity='.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='360,18 415,42 455,28 510,55 570,35 600,45' stroke='white' stroke-width='.9' fill='none' opacity='.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='120,135 175,118 225,130 290,108 350,122' stroke='white' stroke-width='.8' fill='none' opacity='.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M155,25 L155.84,27.16 L158,28 L155.84,28.84 L155,31 L154.16,28.84 L152,28 L154.16,27.16 Z' fill='white' opacity='.55'/%3E%3Cpath d='M390,92.5 L390.7,94.3 L392.5,95 L390.7,95.7 L390,97.5 L389.3,95.7 L387.5,95 L389.3,94.3 Z' fill='white' opacity='.45'/%3E%3Cpath d='M548,18.5 L548.98,21.02 L551.5,22 L548.98,22.98 L548,25.5 L547.02,22.98 L544.5,22 L547.02,21.02 Z' fill='white' opacity='.5'/%3E%3Cpath d='M270,116 L270.56,117.44 L272,118 L270.56,118.56 L270,120 L269.44,118.56 L268,118 L269.44,117.44 Z' fill='white' opacity='.4'/%3E%3Cpath d='M60,17.5 L60.7,19.3 L62.5,20 L60.7,20.7 L60,22.5 L59.3,20.7 L57.5,20 L59.3,19.3 Z' fill='white' opacity='.48'/%3E%3Cpath d='M480,128 L480.56,129.44 L482,130 L480.56,130.56 L480,132 L479.44,130.56 L478,130 L479.44,129.44 Z' fill='white' opacity='.38'/%3E%3C/svg%3E");
    background-size: 600px 150px;
    background-repeat: repeat-x;
    background-position: center;
}

/* 學員見證 Hero：雲朵幾何線條疊加 */
.ipsingle-hero--testimony .ipsingle-hero-overlay {
    background-color: rgba(10, 22, 40, .54);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='150'%3E%3Cpath d='M0 80 Q75 48 150 80 Q225 112 300 80 Q375 48 450 80 Q525 112 600 80' stroke='white' stroke-width='1.3' fill='none' opacity='.5'/%3E%3Cpath d='M0 110 Q60 78 120 110 Q180 142 240 110 Q300 78 360 110 Q420 142 480 110 Q540 78 600 110' stroke='white' stroke-width='.9' fill='none' opacity='.35'/%3E%3Cpath d='M0 48 Q100 22 200 48 Q300 74 400 48 Q500 22 600 48' stroke='white' stroke-width='1' fill='none' opacity='.28'/%3E%3Ccircle cx='95' cy='78' r='28' stroke='white' stroke-width='.9' fill='none' opacity='.28'/%3E%3Ccircle cx='305' cy='92' r='24' stroke='white' stroke-width='.9' fill='none' opacity='.25'/%3E%3Ccircle cx='510' cy='70' r='30' stroke='white' stroke-width='.9' fill='none' opacity='.28'/%3E%3Ccircle cx='158' cy='54' r='2.5' fill='white' opacity='.45'/%3E%3Ccircle cx='378' cy='128' r='2' fill='white' opacity='.38'/%3E%3Ccircle cx='548' cy='38' r='2.5' fill='white' opacity='.36'/%3E%3Ccircle cx='45' cy='130' r='2' fill='white' opacity='.32'/%3E%3Ccircle cx='250' cy='32' r='1.5' fill='white' opacity='.38'/%3E%3C/svg%3E");
    background-size: 600px 150px;
    background-repeat: repeat-x;
    background-position: center;
}

/* ── Outer wrapper ─────────────────────────────────────────── */
.ipsingle {
    background: #f8f9fc;
    min-height: 60vh;
    padding: 0 0 88px;
    font-family: 'Kumbh Sans', -apple-system, 'Microsoft JhengHei', sans-serif;
}
.ipsingle-container {
    max-width: 1060px;
    margin: 0 auto;
    padding: 48px 32px 0;
}

/* ── Header ────────────────────────────────────────────────── */
.ipsingle-header {
    margin-bottom: 32px;
}
.ipsingle-title {
    font-family: 'Kumbh Sans', -apple-system, 'Microsoft JhengHei', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #1a1a2e;
    line-height: 1.5;
    margin: 0 0 18px;
    letter-spacing: .02em;
}
.ipsingle-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.ipsingle-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #6b7280;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.ipsingle-meta-item svg { flex-shrink: 0; color: #9ca3af; }
.ipsingle-meta-item a {
    color: #6b7280;
    text-decoration: none;
    transition: color .2s;
}
.ipsingle-meta-item a:hover { color: #d63a4a; }

/* ── Content card ──────────────────────────────────────────── */
.ipsingle-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .07);
    padding: 44px;
    margin-bottom: 32px;
}

/* ── Two-col body ──────────────────────────────────────────── */
.ipsingle-body {
    display: flex;
    gap: 44px;
    align-items: flex-start;
}

/* ── Polaroid photo column ─────────────────────────────────── */
.ipsingle-photo-col {
    flex-shrink: 0;
    width: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.ipsingle-polaroid {
    border-radius: 6px;
    overflow: hidden;
    transform: rotate(-2deg);
    transition: transform .35s ease;
    width: 100%;
}
.ipsingle-polaroid:hover {
    transform: rotate(0deg) scale(1.02);
}
.ipsingle-polaroid img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* ── SVG arc text ──────────────────────────────────────────── */
.ipsingle-arc-text {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* ── Article content column ────────────────────────────────── */
.ipsingle-content {
    flex: 1;
    min-width: 0;
    font-family: 'Kumbh Sans', -apple-system, 'Microsoft JhengHei', sans-serif;
    font-weight: 400;
}
.ipsingle-content--full {
    width: 100%;
}
.ipsingle-content p {
    font-size: 16px;
    color: #374151;
    line-height: 2.05;
    margin: 0 0 22px;
}
.ipsingle-content strong,
.ipsingle-content b {
    font-weight: 700;
}
.ipsingle-content h2,
.ipsingle-content h3 {
    color: #1a1a2e;
    font-weight: 800;
    font-family: 'Kumbh Sans', -apple-system, 'Microsoft JhengHei', sans-serif;
    margin: 36px 0 16px;
}
.ipsingle-content h2 { font-size: 22px; }
.ipsingle-content h3 { font-size: 19px; }
/* h4 用於內文段落，不強制粗體，讓 <b>/<strong> 自然顯示 */
.ipsingle-content h4 {
    font-weight: 400;
    font-size: 16px;
    color: #374151;
    margin: 0 0 22px;
    line-height: 2.05;
}
.ipsingle-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 16px 0;
}
.ipsingle-content blockquote {
    border-left: 4px solid #6366f1;
    background: #f0f0ff;
    padding: 16px 22px;
    border-radius: 0 8px 8px 0;
    margin: 28px 0;
    font-size: 15px;
    color: #374151;
    line-height: 1.9;
}
.ipsingle-content a {
    color: #d63a4a;
    text-decoration: underline;
}
.ipsingle-content ul,
.ipsingle-content ol {
    padding-left: 24px;
    margin: 0 0 22px;
}
.ipsingle-content li {
    font-size: 16px;
    color: #374151;
    line-height: 2;
    margin-bottom: 6px;
}

/* ── Prev / Next navigation ────────────────────────────────── */
.ipsingle-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.ipsingle-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 20px;
    text-decoration: none;
    color: #1a1a2e;
    max-width: 48%;
    font-family: -apple-system, sans-serif;
    transition: box-shadow .2s, border-color .2s, background .2s;
}
.ipsingle-nav-btn:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
    border-color: #d63a4a;
    background: #fff8f8;
}
.ipsingle-nav-btn svg { flex-shrink: 0; color: #9ca3af; transition: color .2s; }
.ipsingle-nav-btn:hover svg { color: #d63a4a; }
.ipsingle-nav-btn span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ipsingle-nav-btn small {
    font-size: 11px;
    color: #9ca3af;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ipsingle-nav-btn strong {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: #1a1a2e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ipsingle-nav-btn--next {
    margin-left: auto;
    text-align: right;
    flex-direction: row-reverse;
}
.ipsingle-nav-btn--next span { align-items: flex-end; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ipsingle-hero { height: 120px; }
    .ipsingle-hero-title { font-size: 24px; }
    .ipsingle-title { font-size: 24px; }
}
@media (max-width: 640px) {
    .ipsingle-container { padding: 0 20px; }
    .ipsingle-card { padding: 24px 20px; }
    .ipsingle-body { flex-direction: column; gap: 28px; }
    .ipsingle-photo-col {
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }
    .ipsingle-polaroid { width: 130px; flex-shrink: 0; }
    .ipsingle-arc-text { display: none; }
    .ipsingle-nav { flex-direction: column; }
    .ipsingle-nav-btn { max-width: 100%; }
    .ipsingle-nav-btn--next { margin-left: 0; }
}