/*
 * aov.css — the AOV case study: one wide column that reads like an article.
 * Plain section titles, hairline lists instead of card grids; only the screens sit in frames.
 * Loaded after work-page.css, only on swiggy-digital-menu-aov.html.
 */

.cs.aov { --a-accent: #e96a1f; --a-frame: #f4f4f6; --a-line: #e8e8e8; --a-shot: 460px; max-width: 1040px; }

/* sections */
.aov .a-sec { margin: 88px 0 0; }
.aov .a-sec h2 { margin: 0; font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -.01em; }
.aov .a-sec h3 { margin: 44px 0 0; font-weight: 400; font-size: 22px; line-height: 1.25; }
.aov .a-soft { color: var(--wp-muted); }
.aov .a-text { margin: 14px 0 0; max-width: 38em; font-size: 19px; line-height: 1.6; color: #333336; }
.aov .a-text b { font-weight: 500; color: var(--wp-ink); }
.aov .a-label { margin: 26px 0 0; font-size: 17px; font-style: italic; color: var(--wp-muted); }
.aov .a-note { margin: 18px 0 0; font-size: 16px; color: var(--wp-muted); font-style: italic; }
.aov .a-hand { margin: 26px 0 0; font-size: 22px; line-height: 1.4; font-style: italic; color: var(--a-accent); max-width: 30em; }
.aov .cs-hl { background: linear-gradient(transparent 62%, #ffe3c8 62%); }

/* term → explanation, separated by hairlines */
.aov .a-rows { margin: 22px 0 0; max-width: 52em; border-top: 1px solid var(--a-line); }
.aov .a-rows > div { display: grid; grid-template-columns: 15em 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--a-line); }
.aov .a-rows dt { font-size: 18px; line-height: 1.45; color: var(--wp-ink); }
.aov .a-rows dd { margin: 0; font-size: 17px; line-height: 1.55; color: var(--wp-muted); }

/* simple dash lists */
.aov .a-list { list-style: none; margin: 12px 0 0; padding: 0; max-width: 38em; }
.aov .a-list li { position: relative; padding: 5px 0 5px 22px; font-size: 18px; line-height: 1.5; color: #333336; }
.aov .a-list li::before { content: "–"; position: absolute; left: 0; color: var(--wp-muted); }

/* the ideal flow: a plain numbered list in three columns, rewards in the accent colour */
.aov .a-steps { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: s; columns: 3; column-gap: 40px; }
.aov .a-steps li { counter-increment: s; break-inside: avoid; display: flex; gap: 12px; padding: 8px 0; font-size: 17px; line-height: 1.4; color: #333336; border-bottom: 1px solid var(--a-line); }
.aov .a-steps li::before { content: counter(s, decimal-leading-zero); flex: none; width: 1.6em; font-size: 13px; line-height: 1.85; color: var(--wp-muted); font-variant-numeric: tabular-nums; }
.aov .a-steps li.win { color: var(--a-accent); }

/* one pulled-out quote */
.aov .a-pull { margin: 44px 0 0; padding: 0 0 0 22px; border-left: 2px solid var(--a-accent); font-size: clamp(21px, 2.3vw, 25px); line-height: 1.45; max-width: 32em; }
.aov .a-pull span { display: block; margin-bottom: 8px; font-size: 16px; font-style: italic; color: var(--wp-muted); }

/* screens: the same frame everywhere, phones the same size everywhere; wide flows scroll sideways */
.aov figure.a-shot { margin: 28px 0 0; display: flex; justify-content: safe center; align-items: center; padding: 40px; border-radius: 16px; background: var(--a-frame);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.aov figure.a-shot img { flex: none; display: block; width: auto; max-width: none; height: var(--a-shot); }
.aov figure.a-shot.grid6 img { height: calc(var(--a-shot) * 2.24); } /* two rows of three phones, each the size of the rest */
.aov figure.a-shot.cover { margin-top: 8px; }

/* dark mode */
html[data-theme="dark"] .cs.aov { --a-frame: #1c1a23; --a-line: #2c2a35; }
html[data-theme="dark"] .aov .a-text, html[data-theme="dark"] .aov .a-list li, html[data-theme="dark"] .aov .a-steps li:not(.win) { color: #c9c6d3; }
html[data-theme="dark"] .aov .cs-hl { background: linear-gradient(transparent 62%, rgba(233,106,31,.35) 62%); }

@media (max-width: 900px) { .aov .a-steps { columns: 2; } }
@media (max-width: 640px) {
  .cs.aov { --a-shot: 300px; }
  .aov .a-sec { margin-top: 64px; }
  .aov .a-text { font-size: 18px; }
  .aov .a-rows > div { grid-template-columns: 1fr; gap: 2px; }
  .aov .a-steps { columns: 1; }
  .aov figure.a-shot { padding: 20px; border-radius: 12px; }
}

/* cards: for short, scannable points (the longer explanations stay as hairline rows) */
.aov .a-grid { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(var(--cols, 3), 1fr); }
.aov .a-grid.c4 { --cols: 4; }
.aov .a-card { padding: 20px 20px 22px; border-radius: 14px; background: var(--a-frame); }
.aov .a-card b { display: block; font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--wp-ink); }
.aov .a-card span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--wp-muted); }
.aov .cs-statement { margin: 88px 0 0; }

/* the ideal flow: four stage cards, each listing its numbered steps; rewards in the accent colour */
.aov .a-flow { counter-reset: step; }
.aov .a-flow small { display: block; font-size: 14px; font-style: italic; color: var(--a-accent); }
.aov .a-flow ol { list-style: none; margin: 12px 0 0; padding: 0; }
.aov .a-flow ol li { counter-increment: step; position: relative; padding: 8px 0 8px 28px; font-size: 16px; line-height: 1.35; color: #333336; border-top: 1px solid var(--a-line); }
.aov .a-flow ol li:first-child { border-top: 0; }
.aov .a-flow ol li::before { content: counter(step); position: absolute; left: 0; top: 9px; font-size: 13px; color: var(--wp-muted); font-variant-numeric: tabular-nums; }
.aov .a-flow ol li.win { color: var(--a-accent); }
html[data-theme="dark"] .aov .a-flow ol li:not(.win) { color: #c9c6d3; }

@media (max-width: 900px) { .aov .a-grid, .aov .a-grid.c4 { --cols: 2; } }
@media (max-width: 640px) { .aov .a-grid, .aov .a-grid.c4 { --cols: 1; } }

/* used by the unified partner system page too */
.aov .a-grid.c5 { --cols: 5; }
.aov figure.a-shot { gap: 24px; }
@media (max-width: 900px) { .aov .a-grid.c5 { --cols: 2; } }
@media (max-width: 640px) { .aov .a-grid.c5 { --cols: 1; } .aov figure.a-shot { gap: 14px; } }


/* two images side by side (e.g. a pair of flows) */
.aov .a-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.aov .a-pair > * { margin: 0; }
@media (max-width: 640px) { .aov .a-pair { grid-template-columns: 1fr; } }

/* a cover image that already has its own frame: just rounded, no extra card */
.aov .a-cover { margin: 8px 0 0; }
.aov .a-cover img { display: block; width: 100%; height: auto; border-radius: 18px; }

/* a phone-shaped prototype video (Vimeo), the same height as the phone screens around it */
.aov .a-video { flex: none; display: block; height: var(--a-shot); width: calc(var(--a-shot) * 352 / 731); border: 0; border-radius: 22px; background: #120a1c; }

/* ---------- glass cards: every card and image frame is a pane of warm glass, a shade deeper than the page: a soft
   light falling from the top, a faint diagonal sheen, a bright top edge and a fine ring (no colour, no shadow) ---------- */
.cs.aov { --a-frame: #f4ede3; --a-line: #ebe3d8; }
.aov .a-card, .aov figure.a-shot {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .35) 48%, rgba(255, 255, 255, 0) 57%),
    var(--a-frame);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(120, 90, 60, .06);
}
.aov .a-card { border-radius: 18px; }
.aov figure.a-shot { border-radius: 22px; }
@media (max-width: 640px) { .aov figure.a-shot { border-radius: 16px; } }
/* the ideal flow, simplified: four steps, one line each */
.aov .a-flow { list-style: none; padding: 0; }
.aov .a-flow p { margin: 8px 0 0; font-size: 17px; line-height: 1.4; color: var(--wp-ink); }
.aov .a-flow small { font-style: normal; letter-spacing: .01em; }
/* key decisions: the question, a short answer, then the reasons as small cards */
.aov .a-answer { margin: 12px 0 0; max-width: 38em; font-size: 19px; line-height: 1.55; color: #333336; }
.aov .a-answer b { font-weight: 500; color: var(--a-accent); }
.aov .a-why .a-card b { font-size: 17px; }
.aov .a-why .a-card span { font-size: 15px; }
@media (max-width: 900px) { .aov .a-grid.c4 { --cols: 2; } }