/* vision: info pages (reviews, about, faq, book). Extras only; everything else comes from vision.css. */

/* ---------- Reviews: platform badges ---------- */
.vi-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 14px; max-width: 780px; margin-inline: auto; }
.vi-badges li { flex: 0 0 calc((100% - 28px) / 3); max-width: 132px; }
@media (min-width: 640px) { .vi-badges li { flex-basis: calc((100% - 56px) / 5); } }
.vi-badges a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; font: 500 11px/1.2 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: center; }
.vi-badges img { width: 100%; max-width: 120px; aspect-ratio: 1; border-radius: 50%; transition: transform 0.25s ease; }
.vi-badges a:hover img { transform: translateY(-3px); }

/* ---------- Reviews: the long story ---------- */
.vi-story { display: grid; gap: clamp(32px, 5vw, 64px); }
.vi-story__media { display: grid; gap: 10px; align-content: start; grid-template-columns: 1fr 1fr; }
.vi-story__media img:first-child { grid-column: 1 / -1; }
.vi-natural img { aspect-ratio: auto; }
.vi-story__media img { width: 100%; box-shadow: var(--shadow); }
.vi-story__text { font-size: 18px; line-height: 1.75; }
.vi-story__text p + p { margin-top: 18px; }
.vi-story__text blockquote p:first-child::first-letter { float: left; font: 400 64px/0.82 var(--f-display); margin: 6px 12px 0 0; color: var(--gold); }
.vi-story__pull { margin: 0 0 26px; font: 300 italic clamp(22px, 2.6vw, 28px)/1.45 var(--f-body); color: var(--text); border-left: 2px solid var(--gold); padding-left: 20px; }
.vi-story__sign { margin-top: 26px; font: 500 12px/1.3 var(--f-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-lo); }
@media (min-width: 900px) {
  .vi-story { grid-template-columns: 5fr 7fr; }
  .vi-story__media { position: sticky; top: 110px; grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- Awards ---------- */
.vi-awards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 14px; }
.vi-awards li { text-align: center; font-size: 13.5px; line-height: 1.35; color: rgba(250, 247, 240, 0.72); }
.vi-awards a { display: block; }
.vi-awards img { width: 84px; height: 84px; object-fit: contain; margin: 0 auto 10px; }
@media (min-width: 700px) { .vi-awards { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .vi-awards { grid-template-columns: repeat(6, 1fr); } }

/* ---------- About: team ---------- */
.vi-team { display: grid; gap: 22px; }
@media (min-width: 760px) { .vi-team { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
.vi-person { background: #fff; display: flex; flex-direction: column; }
.vi-person img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vi-person__body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 8px; }
.vi-person__role { font: 500 11px/1.3 var(--f-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-lo); }
.vi-person__body p { color: var(--muted); font-size: 16px; }
.vi-person__body a { color: var(--text); font-size: 15px; text-underline-offset: 3px; word-break: break-word; }
.vi-crew { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 18px; margin-top: 40px; }
@media (min-width: 760px) { .vi-crew { grid-template-columns: repeat(4, 1fr); } }
.vi-crew li { text-align: center; }
.vi-crew img { width: min(160px, 100%); aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin: 0 auto 14px; border: 1px solid var(--gold); padding: 4px; }
.vi-crew span { display: block; font: 500 11px/1.3 var(--f-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi); margin-top: 4px; }
.vi-stats { display: flex; flex-wrap: wrap; gap: 18px 40px; margin-top: 28px; }
.vi-stats li { display: flex; flex-direction: column; }
.vi-stats b { font: 400 34px/1 var(--f-display); color: var(--gold-lo); }
.vi-stats span { font: 500 11px/1.4 var(--f-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* ---------- FAQ: topic chips + groups ---------- */
.vi-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.vi-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); background: #fff; text-decoration: none; font: 500 12px/1 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); }
.vi-chips a:hover { border-color: var(--gold); color: var(--gold-lo); }
.vi-faqgroup + .vi-faqgroup { margin-top: clamp(48px, 7vw, 72px); }
.vi-faqgroup > .h3 { margin-bottom: 8px; }
.vi-faqgroup > .eyebrow { margin-bottom: 8px; }
.vi-faqgroup .v-faq { margin-top: 18px; }
.vi-faqgroup { scroll-margin-top: 90px; }

/* ---------- Book: occasion list ---------- */
.vi-occ { display: grid; gap: 12px; }
@media (min-width: 760px) { .vi-occ { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .vi-occ { grid-template-columns: repeat(3, 1fr); } }
.vi-occ a { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 16px; padding: 10px 18px 10px 10px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; min-height: 116px; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.vi-occ a:hover { border-color: var(--gold); box-shadow: var(--shadow); transform: translateY(-2px); }
.vi-occ img { width: 96px; height: 96px; object-fit: cover; }
.vi-occ .h3 { display: block; font-size: 20px; }
.vi-occ__from { display: block; margin-top: 6px; font: 500 11px/1.3 var(--f-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-lo); }
.vi-occ__from b { font: 400 19px/1 var(--f-display); letter-spacing: 0; color: var(--text); }
.vi-occ__note { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.vi-occ__go { font-size: 22px; color: var(--gold); transition: transform 0.2s ease; }
.vi-occ a:hover .vi-occ__go { transform: translateX(4px); }
@media (min-width: 1000px) { .vi-occ a { grid-template-columns: 120px 1fr auto; } .vi-occ img { width: 120px; height: 120px; } }

.vi-paths { display: grid; gap: 16px; }
@media (min-width: 860px) { .vi-paths { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
.vi-path { background: var(--ink-2); padding: 30px 26px; display: flex; flex-direction: column; gap: 12px; border-top: 2px solid var(--gold); }
.vi-path p { color: rgba(250, 247, 240, 0.74); }
.vi-path ul { display: grid; gap: 8px; font-size: 15.5px; color: rgba(250, 247, 240, 0.74); }
.vi-path li { position: relative; padding-left: 22px; }
.vi-path li::before { content: ""; position: absolute; left: 2px; top: 0.75em; width: 8px; height: 1px; background: var(--gold); }
.vi-path .btn { margin-top: auto; align-self: flex-start; }
.vi-path .btn--ghost { color: var(--ivory); }
@media (max-width: 520px) { .vi-path .btn { align-self: stretch; } }

.vi-contact { display: grid; gap: 12px; }
@media (min-width: 760px) { .vi-contact { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.vi-contact a, .vi-contact div { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; min-height: 44px; }
.vi-contact a:hover { border-color: var(--gold); }
.vi-contact span { font: 500 11px/1.3 var(--f-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-lo); }
.vi-contact b { font: 400 19px/1.35 var(--f-body); word-break: break-word; }
.vi-contact address { font: 400 19px/1.35 var(--f-body); font-style: normal; }

/* ---------- Book: compact hero + four steps ---------- */
.vi-bookhero .v-pagehero__inner { padding: clamp(48px, 8vw, 110px) 0 clamp(36px, 6vw, 72px); }
.vi-bookhero .lead { margin-top: 14px; }
@media (min-width: 860px) { .vi-steps4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .vi-steps4 { grid-template-columns: repeat(4, 1fr); gap: 36px; } }
.vi-faqgroup .v-faq__a ul + p { margin-top: 12px; }