/* ============================================================================
 * /community/ — oga.asia project page (v203900)
 * Pitch · Travelers & Global guides · How it works · Project detail · FAQ
 * Uses the theme tokens (navy #1c3f8f / flag red #d81f36). No photos.
 * ==========================================================================*/
.ogp { display: grid; gap: clamp(40px, 6vw, 72px); margin: clamp(24px, 4vw, 40px) 0 clamp(48px, 6vw, 80px); color: var(--oga-ink); }
.ogp h2, .ogp h3 { font-family: var(--oga-font-heading); margin: 0; }
.ogp p { margin: 0; }
.ogp svg { flex: none; }

.ogp-kicker { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--oga-flag); margin-bottom: 8px; }
.ogp-h { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -.01em; margin-bottom: 20px !important; }
.ogp-h--sm { font-size: clamp(20px, 2.4vw, 24px); margin-bottom: 10px !important; }
.ogp-muted { color: var(--oga-ink-muted); margin-bottom: 20px !important; max-width: 62ch; }

.ogp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ogp-btn { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; font-size: 16px; font-weight: 700; border-radius: var(--oga-radius-md); text-decoration: none; }
.ogp-link { color: var(--oga-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ogp-link--light { color: #fff; }

/* 1 · Pitch ------------------------------------------------------------- */
.ogp-pitch { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--oga-border); border-radius: 16px; background: linear-gradient(135deg, var(--oga-cream) 0%, #fff 55%, var(--oga-blush) 100%); position: relative; overflow: hidden; }
.ogp-pitch::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(var(--oga-navy) 0 50%, var(--oga-flag) 50% 100%); }
.ogp-pitch__title { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.15; letter-spacing: -.015em; color: var(--oga-night); margin-bottom: 14px !important; }
.ogp-pitch__text { font-size: 17px; line-height: 1.6; color: var(--oga-ink-muted); max-width: 58ch; margin-bottom: 24px !important; }
.ogp-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14.5px; color: var(--oga-ink-muted); }
.ogp-points li { display: inline-flex; align-items: center; gap: 6px; }
.ogp-points svg { color: var(--ogx-g0); }

.ogp-mock { background: #fff; border: 1px solid var(--oga-border); border-radius: 16px; box-shadow: 0 20px 48px rgba(15, 37, 87, .18), 0 2px 6px rgba(15, 37, 87, .08); overflow: hidden; max-width: 420px; margin-left: auto; }
.ogp-mock__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--oga-mist); border-bottom: 1px solid var(--oga-border); }
.ogp-mock__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--oga-border-strong); }
.ogp-mock__bar span:first-child { background: var(--oga-flag); }
.ogp-mock__bar em { margin-left: 8px; font-style: normal; font-size: 12.5px; font-family: var(--ogx-font-mono); color: var(--oga-ink-muted); }
.ogp-mock__post { padding: 14px; border-bottom: 1px solid var(--oga-border); }
.ogp-mock__post:last-child { border-bottom: 0; }
.ogp-mock__post p { font-size: 14px; line-height: 1.45; margin-top: 10px; }
.ogp-mock__who { display: flex; align-items: center; gap: 10px; }
.ogp-mock__who b { display: block; font-size: 13.5px; }
.ogp-mock__who small { display: block; font-size: 12px; color: var(--oga-ink-soft); }
.ogp-mock__av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.ogp-mock__av--g { background: var(--oga-navy); }
.ogp-mock__av--t { background: var(--oga-flag); }

/* 2 · Audiences ---------------------------------------------------------- */
.ogp-aud { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ogp-aud__card { display: flex; flex-direction: column; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--oga-border); border-top: 4px solid var(--oga-navy); border-radius: 14px; background: #fff; }
.ogp-aud__card--guides { border-top-color: var(--oga-flag); }
.ogp-aud__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--oga-mist); color: var(--oga-navy); margin-bottom: 14px; }
.ogp-aud__card--guides .ogp-aud__icon { background: var(--oga-blush); color: var(--oga-flag); }
.ogp-aud__title { font-size: 22px; line-height: 1.25; margin-bottom: 16px !important; }
.ogp-aud__card .ogp-btn { margin-top: auto; align-self: flex-start; }

.ogp-ticks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.ogp-ticks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.ogp-ticks svg { color: var(--ogx-g0); margin-top: 2px; }
.ogp-aud__card--guides .ogp-ticks svg { color: var(--oga-flag); }

/* 3 · Steps -------------------------------------------------------------- */
.ogp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: none; }
.ogp-step { position: relative; padding: 22px 20px; border: 1px solid var(--oga-border); border-radius: 12px; background: var(--oga-mist); }
.ogp-step__n { position: absolute; top: 16px; right: 18px; font-size: 32px; font-weight: 800; line-height: 1; color: var(--oga-border-strong); }
.ogp-step__icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--oga-navy); border: 1px solid var(--oga-border); margin-bottom: 14px; }
.ogp-step h3 { font-size: 17px; margin-bottom: 6px; }
.ogp-step p { font-size: 14.5px; line-height: 1.5; color: var(--oga-ink-muted); }

/* 4 · Features ----------------------------------------------------------- */
.ogp-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--oga-border); border: 1px solid var(--oga-border); border-radius: 12px; overflow: hidden; }
.ogp-feat { display: flex; gap: 14px; padding: 22px; background: #fff; }
.ogp-feat__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--oga-mist); color: var(--oga-navy); flex: none; }
.ogp-feat h3 { font-size: 16px; margin-bottom: 4px; }
.ogp-feat p { font-size: 14.5px; line-height: 1.5; color: var(--oga-ink-muted); }

/* Network + promise ------------------------------------------------------ */
.ogp-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; align-items: stretch; }
.ogp-net { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--oga-border); border-radius: 14px; background: #fff; }
.ogp-nodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ogp-node { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--oga-border); border-radius: 10px; background: var(--oga-mist); }
.ogp-node b { display: block; font-size: 15px; font-family: var(--ogx-font-mono); }
.ogp-node small { display: block; font-size: 13.5px; color: var(--oga-ink-muted); }
.ogp-node__icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--oga-navy); border: 1px solid var(--oga-border); flex: none; }
.ogp-node.is-main { background: var(--oga-navy); border-color: var(--oga-navy); color: #fff; }
.ogp-node.is-main small { color: rgba(255,255,255,.8); }
.ogp-node.is-main .ogp-node__icon { background: var(--oga-flag); border-color: var(--oga-flag); color: #fff; }

.ogp-promise { padding: clamp(22px, 3vw, 32px); border-radius: 14px; background: var(--oga-night); color: #fff; }
.ogp-promise .ogp-h { color: #fff; margin-bottom: 18px !important; }
.ogp-ticks--light { margin: 0; }
.ogp-ticks--light li { color: rgba(255,255,255,.92); }
.ogp-ticks--light svg { color: #f4a8b3; }

/* Roadmap ---------------------------------------------------------------- */
.ogp-road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.ogp-road::before { content: ""; position: absolute; top: 7px; left: 8px; right: 8px; height: 2px; background: var(--oga-border); }
.ogp-road__item { position: relative; padding-top: 28px; }
.ogp-road__dot { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--oga-border-strong); }
.ogp-road__item.is-now .ogp-road__dot { background: var(--oga-flag); border-color: var(--oga-flag); box-shadow: 0 0 0 4px rgba(216,31,54,.15); }
.ogp-road h3 { font-size: 17px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.ogp-road h3 em { font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--oga-blush); color: var(--oga-flag); }
.ogp-road p { font-size: 14.5px; line-height: 1.5; color: var(--oga-ink-muted); }

/* FAQ -------------------------------------------------------------------- */
.ogp-faq { border: 1px solid var(--oga-border); border-radius: 12px; overflow: hidden; background: #fff; }
.ogp-faq__item + .ogp-faq__item { border-top: 1px solid var(--oga-border); }
.ogp-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 600; font-size: 16px; cursor: pointer; list-style: none; }
.ogp-faq__item summary::-webkit-details-marker { display: none; }
.ogp-faq__item summary svg { color: var(--oga-ink-soft); transition: transform .2s var(--ogx-ease); }
.ogp-faq__item[open] summary svg { transform: rotate(180deg); }
.ogp-faq__item summary:hover { background: var(--oga-mist); }
.ogp-faq__item p { padding: 0 20px 18px; line-height: 1.6; color: var(--oga-ink-muted); max-width: 72ch; }

/* 6 · Closing ------------------------------------------------------------ */
.ogp-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: clamp(24px, 4vw, 40px); border-radius: 16px; background: linear-gradient(120deg, var(--oga-navy) 0%, var(--oga-night) 100%); color: #fff; }
.ogp-close h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.2; color: #fff; margin-bottom: 6px; }
.ogp-close p { color: rgba(255,255,255,.85); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 960px) {
	.ogp-pitch { grid-template-columns: 1fr; }
	.ogp-mock { margin: 0 auto; transform: none; }
	.ogp-steps, .ogp-road { grid-template-columns: repeat(2, 1fr); }
	.ogp-road::before { display: none; }
	.ogp-feats { grid-template-columns: repeat(2, 1fr); }
	.ogp-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.ogp-aud, .ogp-steps, .ogp-road, .ogp-feats { grid-template-columns: 1fr; }
	.ogp-btn { width: 100%; justify-content: center; }
	.ogp-aud__card .ogp-btn { align-self: stretch; }
	.ogp-close .ogp-actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ogp-faq__item summary svg { transition: none; } }
.ogp-node > span:last-child, .ogp-feat > div, .ogp-pitch__copy { min-width: 0; }
.ogp-node b, .ogp-mock__bar em { overflow-wrap: anywhere; }

/* v204100 — example post with the Angkor Wat sunrise photograph -------- */
.ogp-pitch { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.ogp-pitch__visual { margin: 0; position: relative; }
.ogp-pitch__visual::before { content: ""; position: absolute; inset: 8% -4% -6% 10%; border-radius: 24px; background: linear-gradient(135deg, rgba(216,31,54,.14), rgba(28,63,143,.14)); z-index: 0; }
.ogp-mock { position: relative; z-index: 1; }
.ogp-mock__who { position: relative; }
.ogp-mock__who > span:nth-child(2) { min-width: 0; flex: 1; }
.ogp-mock__who b { display: flex; align-items: center; gap: 4px; }
.ogp-mock__verified { display: inline-flex; color: var(--oga-navy); font-style: normal; }
.ogp-mock__tag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--oga-blush); color: var(--oga-flag); }
.ogp-mock__photo { position: relative; margin: 12px -14px 0; aspect-ratio: 16 / 9; background: #2a1410; overflow: hidden; }
.ogp-mock__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ogp-mock__pin { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: rgba(10, 20, 48, .72); color: #fff; font-size: 12px; font-weight: 600; backdrop-filter: blur(4px); }
.ogp-mock__post p { font-size: 14.5px; line-height: 1.5; margin-top: 12px; color: var(--oga-ink); }
.ogp-mock__actions { display: flex; gap: 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--oga-border); font-size: 13px; color: var(--oga-ink-muted); }
.ogp-mock__actions span { display: inline-flex; align-items: center; gap: 5px; }
.ogp-mock__post--sm { background: var(--oga-mist); }
.ogp-btn--ghost { background: #fff !important; }
.ogp-pitch__title { max-width: 18ch; }
@media (max-width: 960px) {
	.ogp-pitch { grid-template-columns: 1fr; }
	.ogp-pitch__visual { max-width: 460px; width: 100%; margin: 8px auto 0; }
	.ogp-pitch__visual::before { inset: 6% -3% -4% 6%; }
	.ogp-mock { margin: 0 auto; }
}
@media (max-width: 640px) {
	.ogp-pitch { padding: 22px 18px 26px; }
	.ogp-pitch__visual::before { display: none; }
	.ogp-pitch__title { font-size: 26px; }
	.ogp-pitch__text { font-size: 16px; }
	.ogp-actions { gap: 10px; }
	.ogp-mock__actions { gap: 14px; }
	.ogp-h { font-size: 23px; }
}
@media (max-width: 380px) {
	.ogp-mock__tag { display: none; }
}
@media (max-width: 480px) {
	.ogp-net, .ogp-promise { padding: 20px 16px; }
	.ogp-node { padding: 10px 12px; gap: 10px; }
	.ogp-node__icon { display: none; }
	.ogp-node b { font-size: 13px; overflow-wrap: normal; word-break: normal; }
	.ogp-node small { font-size: 13px; }
}