/* Public styles for the visual-editor components: content grid (.cg), table (.dt), section (.sec). */

/* ---------- content grid ---------- */
.cg { margin: 32px 0; --cg-cols: 3; }
.cg--bg-soft, .cg--bg-dark { padding: 28px 20px; border-radius: var(--radius, 12px); }
.cg--bg-soft { background: var(--light-gray, #f1f5f9); }
.cg--bg-dark { background: var(--surface-dark, #0f172a); color: #fff; }
.cg--bg-dark .cg-card { color: var(--dark, #0f172a); }
.cg--align-center .cg__head, .cg--align-center .cg__more { text-align: center; }
.cg__head { margin-bottom: 18px; }
.cg__head h2 { margin: 0 0 6px; }
.cg__intro { margin: 0; color: var(--gray, #64748b); }
.cg--bg-dark .cg__intro { color: rgba(255,255,255,.8); }
.cg__grid { display: grid; gap: 20px; grid-template-columns: repeat(var(--cg-cols), minmax(0, 1fr)); }
.cg--cols-1 { --cg-cols: 1; } .cg--cols-2 { --cg-cols: 2; } .cg--cols-3 { --cg-cols: 3; } .cg--cols-4 { --cg-cols: 4; }
@media (max-width: 900px) { .cg--cols-3, .cg--cols-4 { --cg-cols: 2; } }
@media (max-width: 560px) { .cg--cols-2, .cg--cols-3, .cg--cols-4 { --cg-cols: 1; } }
.cg-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--light-gray, #e2e8f0); border-radius: var(--radius, 12px); overflow: hidden; min-width: 0; }
.cg-card__media { display: block; background: var(--light-gray, #f1f5f9); }
.cg-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cg--ratio-wide .cg-card__media { aspect-ratio: 16 / 9; }
.cg--ratio-standard .cg-card__media { aspect-ratio: 4 / 3; }
.cg--ratio-square .cg-card__media { aspect-ratio: 1; }
.cg--ratio-auto .cg-card__media img { height: auto; }
.cg-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1; align-items: flex-start; }
.cg--align-center .cg-card__body { align-items: center; text-align: center; }
.cg-card__title { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.cg-card__title a { color: inherit; text-decoration: none; }
.cg-card__title a:hover { color: var(--primary, #8b5cf6); }
.cg-card__excerpt, .cg-card__bonus { margin: 0; font-size: .9rem; color: var(--gray, #64748b); }
.cg-card__bonus { color: var(--primary, #8b5cf6); font-weight: 600; }
.cg-card__date { font-size: .8rem; color: var(--gray, #64748b); }
.cg-card__rating { color: #f59e0b; letter-spacing: 1px; }
.cg-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.cg-badge { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary, #8b5cf6); }
.cg--style-compact .cg-card__body { padding: 12px; gap: 6px; }
.cg--style-compact .cg-card__excerpt { display: none; }
.cg--style-list .cg__grid { grid-template-columns: minmax(0, 1fr); }
.cg--style-list .cg-card { flex-direction: row; }
.cg--style-list .cg-card__media { flex: 0 0 34%; max-width: 280px; aspect-ratio: auto; }
@media (max-width: 560px) { .cg--style-list .cg-card { flex-direction: column; } .cg--style-list .cg-card__media { flex: none; max-width: none; aspect-ratio: 16/9; } }
.cg--style-overlay .cg-card { position: relative; min-height: 240px; color: #fff; background: var(--surface-dark, #0f172a); border: 0; }
.cg--style-overlay .cg-card__media { position: absolute; inset: 0; aspect-ratio: auto; }
.cg--style-overlay .cg-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.1)); }
.cg--style-overlay .cg-card__body { position: relative; margin-top: auto; justify-content: flex-end; flex: 1; }
.cg--style-overlay .cg-card__excerpt, .cg--style-overlay .cg-card__date { color: rgba(255,255,255,.85); }
.cg--style-overlay .cg-card__bonus, .cg--style-overlay .cg-badge { color: #fde68a; }
.cg__more { margin: 18px 0 0; font-weight: 600; }

/* ---------- table ---------- */
.dt { margin: 32px 0; }
.dt__title { margin: 0 0 12px; }
.dt__scroll { overflow-x: auto; border: 1px solid var(--light-gray, #e2e8f0); border-radius: var(--radius, 12px); -webkit-overflow-scrolling: touch; }
.dt__scroll:focus-visible { outline: 2px solid var(--primary, #8b5cf6); outline-offset: 2px; }
.dt__table { width: 100%; border-collapse: collapse; font-size: .95rem; background: #fff; }
.dt__table caption { text-align: left; padding: 10px 14px; font-weight: 600; color: var(--gray, #64748b); }
.dt__table th, .dt__table td { padding: 12px 14px; border-bottom: 1px solid var(--light-gray, #e2e8f0); vertical-align: middle; }
.dt--compact .dt__table th, .dt--compact .dt__table td { padding: 7px 10px; font-size: .88rem; }
.dt__table thead th { white-space: nowrap; }
.dt--head-dark .dt__table thead th { background: var(--surface-dark, #0f172a); color: #fff; }
.dt--head-brand .dt__table thead th { background: var(--primary, #8b5cf6); color: #fff; }
.dt--head-light .dt__table thead th { background: var(--light-gray, #f1f5f9); color: var(--dark, #0f172a); }
.dt--striped .dt__table tbody tr:nth-child(even) { background: #f8fafc; }
.dt--bordered .dt__table th, .dt--bordered .dt__table td { border: 1px solid var(--light-gray, #e2e8f0); }
.dt__table tbody tr:last-child > * { border-bottom: 0; }
.dt-a-left { text-align: left; } .dt-a-center { text-align: center; } .dt-a-right { text-align: right; }
.dt-cell__img { height: 28px; width: auto; max-width: 80px; object-fit: contain; vertical-align: middle; margin-right: 8px; border-radius: 4px; }
.dt__table a:not(.btn) { color: var(--primary, #8b5cf6); font-weight: 600; }
.dt__table tbody th { font-weight: 700; }
.dt__note { margin: 8px 0 0; font-size: .85rem; color: var(--gray, #64748b); }

/* ---------- section ---------- */
.sec { position: relative; margin: 32px 0; color: var(--sec-fg, inherit); background: var(--sec-bg, transparent); overflow: hidden; }
.sec--rounded { border-radius: var(--radius, 16px); }
.sec--bg-soft { background: var(--light-gray, #f1f5f9); }
.sec--bg-dark { background: var(--surface-dark, #0f172a); color: #fff; }
.sec--bg-brand { background: linear-gradient(135deg, var(--primary, #8b5cf6), var(--surface-dark, #1e1b4b)); color: #fff; }
.sec--bg-image { background: var(--surface-dark, #0f172a) var(--sec-img) center / cover no-repeat; color: #fff; }
.sec--bg-color:not(.sec--custom-fg) { color: inherit; }
.sec--custom-fg, .sec--custom-fg a:not(.btn), .sec--custom-fg h2, .sec--custom-fg h3, .sec--custom-fg h4 { color: var(--sec-fg); }
.sec__overlay { position: absolute; inset: 0; background: rgba(0,0,0,var(--sec-overlay, .45)); }
.sec__inner { position: relative; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.sec--pad-sm .sec__inner { padding-top: 20px; padding-bottom: 20px; }
.sec--pad-md .sec__inner { padding-top: 40px; padding-bottom: 40px; }
.sec--pad-lg .sec__inner { padding-top: 64px; padding-bottom: 64px; }
.sec--pad-xl .sec__inner { padding-top: 96px; padding-bottom: 96px; }
.sec--width-narrow .sec__inner { max-width: 720px; } .sec--width-normal .sec__inner { max-width: 1000px; } .sec--width-wide .sec__inner { max-width: 1200px; } .sec--width-full .sec__inner { max-width: none; }
.sec--align-left { text-align: left; } .sec--align-center { text-align: center; } .sec--align-right { text-align: right; }
.sec__title { margin: 0 0 20px; }
.sec__cols { display: grid; grid-template-columns: repeat(var(--sec-cols, 1), minmax(0, 1fr)); gap: var(--sec-gap, 24px); }
.sec--cols-2 { --sec-cols: 2; } .sec--cols-3 { --sec-cols: 3; }
.sec--gap-sm { --sec-gap: 12px; } .sec--gap-md { --sec-gap: 24px; } .sec--gap-lg { --sec-gap: 48px; }
.sec--valign-center .sec__cols { align-items: center; }
@media (max-width: 760px) { .sec--cols-2, .sec--cols-3 { --sec-cols: 1; } }
.sec__col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sec--align-center .sec__col { align-items: center; } .sec--align-right .sec__col { align-items: flex-end; }
.sec-heading { margin: 0; }
.sec-text > :first-child { margin-top: 0; } .sec-text > :last-child { margin-bottom: 0; }
.sec-text a { color: inherit; text-decoration: underline; }
.sec-button { margin: 0; }
.sec-image { margin: 0; max-width: 100%; }
.sec-image img { display: block; max-width: 100%; height: auto; }
.sec-image--round img { border-radius: var(--radius, 12px); }
.sec-image--small { width: 200px; } .sec-image--medium { width: 360px; } .sec-image--large { width: 560px; } .sec-image--full { width: 100%; }
.sec-image figcaption { font-size: .85rem; opacity: .8; margin-top: 6px; }
.sec-list { margin: 0; padding: 0 0 0 1.2em; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.sec-list--check { list-style: none; padding-left: 0; }
.sec-list--check li { position: relative; padding-left: 1.7em; }
.sec-list--check li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--primary, #8b5cf6); }
.sec--bg-dark .sec-list--check li::before, .sec--bg-brand .sec-list--check li::before, .sec--bg-image .sec-list--check li::before { color: #fde68a; }
.sec-video { position: relative; }
.sec-video--poster img { display: block; width: 100%; border-radius: var(--radius, 12px); }
.sec-video--poster .sec-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.sec-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); text-align: left; width: 100%; }
.sec-features--n1 { --n: 1; } .sec-features--n2 { --n: 2; } .sec-features--n3 { --n: 3; } .sec-features--n4 { --n: 4; }
.sec--cols-2 .sec-features, .sec--cols-3 .sec-features { --n: 1; }
@media (max-width: 760px) { .sec-features { --n: 1 !important; } }
.sec-features li { background: rgba(255,255,255,.9); color: var(--dark, #0f172a); border: 1px solid var(--light-gray, #e2e8f0); border-radius: var(--radius, 12px); padding: 18px; }
.sec-features h3 { margin: 6px 0; font-size: 1.05rem; color: inherit; } .sec-features p { margin: 0; font-size: .92rem; color: var(--gray, #64748b); }
.sec-features__icon { font-size: 1.6rem; }
.sec-stats { margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); width: 100%; text-align: center; }
.sec-stats--n1 { --n: 1; } .sec-stats--n2 { --n: 2; } .sec-stats--n3 { --n: 3; } .sec-stats--n4 { --n: 4; }
@media (max-width: 560px) { .sec-stats { --n: 2 !important; } }
.sec-stats dd { margin: 0; font-size: 2rem; font-weight: 800; order: 1; color: var(--primary, #8b5cf6); }
.sec-stats dt { order: 2; font-size: .85rem; opacity: .85; }
.sec-stats > div { display: flex; flex-direction: column; }
.sec--bg-dark .sec-stats dd, .sec--bg-brand .sec-stats dd, .sec--bg-image .sec-stats dd { color: #fde68a; }
.sec-spacer--sm { height: 12px; } .sec-spacer--md { height: 32px; } .sec-spacer--lg { height: 64px; }
.sec-divider { width: 100%; border: 0; border-top: 1px solid currentColor; opacity: .2; margin: 0; }

/* secondary buttons take the colour of their surroundings */
.cg-btn-alt, .sec-btn-alt { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--btn-radius, 999px); font-weight: 600; text-decoration: none; background: transparent; cursor: pointer; }
.cg-btn-alt { color: var(--dark, #0f172a) !important; border: 1px solid var(--light-gray, #cbd5e1); background: #fff; }
.sec-btn-alt { color: inherit !important; border: 2px solid currentColor; padding: 14px 28px; font-size: 16px; }