/* Audience Activation case study: builds on the Profiles Insights styles (pi.css). */

/* Screenshots exported with their own shadow and padding */
.aa-bare img { border: 0; border-radius: 0; box-shadow: none; background: none; }
.aa-bare figcaption { margin-top: 4px; }
.pi-shot figcaption { color: var(--pi-soft); }
.pi-shot--labelled.aa-bare figcaption { margin: 0 0 4px; }

.aa-ask { margin-top: 40px !important; font-size: 22px; line-height: 1.45; }
.aa-hmw { margin-top: 32px !important; font-size: 22px; line-height: 1.45; }
.aa-debate { margin-top: 40px !important; }
.aa-debate-points { margin-top: 24px; }
.aa-debate-points p + p { margin-top: 0; }
.aa-principle { margin-top: 40px; }
.aa-role { margin-top: 32px; }
.aa-caption { margin-top: 12px; font-size: 14px; color: var(--pi-soft); }
.aa-after-compare { margin-top: 32px; }
.aa-proto { margin-top: 48px; font-weight: 600; }
.aa-proto a { text-underline-offset: 4px; }
.pi-row .aa-proto { margin-top: 24px; }

.aa-legacy { gap: 20px; align-items: start; }
.aa-legacy .pi-shot img { max-height: 520px; object-fit: cover; object-position: top; }

/* Linked vs classic table */
.aa-table-wrap { margin-top: 32px; overflow-x: auto; }
.aa-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.aa-table th, .aa-table td { padding: 16px 16px 16px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pi-line); }
.aa-table thead th { padding-top: 0; font-weight: 700; }
.aa-table tbody th { width: 26%; font-weight: 600; }
.aa-table td { width: 37%; }

/* Paired and stacked visuals */
.aa-options { align-items: end; }
.aa-before { gap: 16px; }
.aa-before + .aa-caption { margin-top: 8px; }
.aa-iter { gap: 32px; }
.aa-order, .aa-pivot { gap: 16px; align-items: start; }
.aa-pivot { margin-top: 24px; }
.aa-teardown .pi-shot + .pi-shot, .aa-docs .pi-shot + .pi-shot { margin-top: 0; }
.aa-tall img { max-height: 900px; object-fit: cover; object-position: top; }
.aa-modal { max-width: 360px; margin-left: auto; margin-top: -48px !important; position: relative; }

@media (max-width: 760px) {
  .aa-ask, .aa-hmw { font-size: 20px; }
  .aa-modal { margin: 16px auto 0 !important; }
  .aa-tall img { max-height: 640px; }
}

/* Review round 1 */
.pi-row--wide-visual > .aa-visual { order: -1; }
.aa-options { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
.aa-docs { gap: 16px; align-items: start; }
@media (max-width: 760px) { .pi-row--wide-visual > .aa-visual { order: 0; } }

/* Timeline: one row per activity, Oct 2023 to Mar 2024 */
.aa-gantt { margin-bottom: 48px; padding: 28px 32px 24px; overflow-x: auto; background: #fff; border: 1px solid var(--pi-line); border-radius: 8px; }
.aa-gantt__head, .aa-gantt__row { display: grid; grid-template-columns: 172px minmax(480px, 1fr); align-items: center; }
.aa-gantt__months { display: grid; grid-template-columns: repeat(6, 1fr); font-size: 13px; color: var(--pi-soft); }
.aa-gantt__months span { padding: 0 0 12px 8px; }
.aa-gantt__body { position: relative; }
.aa-gantt__row { height: 34px; font-size: 14px; }
.aa-gantt__track { position: relative; height: 100%; background: repeating-linear-gradient(90deg, #e8edf0 0 1px, transparent 1px calc(100% / 6)); }
.aa-gantt__row:first-child .aa-gantt__track { border-top: 0; }
.aa-gantt__track i { position: absolute; top: 50%; left: calc(var(--from) / 6 * 100%); width: calc((var(--to) - var(--from)) / 6 * 100%); height: 10px; border-radius: 999px; background: linear-gradient(90deg, #a9d6ee, #8cc5e3); transform: translateY(-50%); }
.aa-gantt__track i.aa-gantt__dev { background: linear-gradient(90deg, #bfe3d6, #a3d4c2); }
.aa-gantt__track b { position: absolute; top: 50%; left: calc(var(--at) / 6 * 100%); width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--pi-ink); transform: translate(-50%, -50%); }
.aa-gantt__row--pivot .aa-gantt__track { background-color: transparent; }
.aa-gantt__body::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: calc((100% - 172px) / 6); background: rgba(127, 189, 230, .07); pointer-events: none; }

/* Current flow as a flowchart */
.aa-fc { --gap: 32px; position: relative; margin-top: 8px; padding-top: 36px; }
.aa-fc__bracket { position: absolute; top: 8px; right: 0; left: calc((100% - 4 * var(--gap)) / 5 * 2 + 2 * var(--gap)); height: 14px; border: 1px solid #c3ced4; border-bottom: 0; border-radius: 6px 6px 0 0; }
.aa-fc__bracket span { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 0 12px; background: #fff; font-size: 13px; font-weight: 600; color: var(--pi-soft); white-space: nowrap; }
.aa-fc__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.aa-fc__steps > li { position: relative; }
.aa-fc__node { position: relative; display: flex; align-items: center; justify-content: center; height: 80px; padding: 12px; border: 1px solid #cfd9de; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center; }
.aa-fc__act .aa-fc__node { background: #f2f7fa; border-color: #bfd3dd; }
.aa-fc__steps > li:not(:last-child) .aa-fc__node::after { content: ""; position: absolute; top: 50%; left: 100%; width: var(--gap); height: 1px; background: #9fb2bb; }
.aa-fc__steps > li:not(:last-child) .aa-fc__node::before { content: ""; position: absolute; top: 50%; left: calc(100% + var(--gap) - 7px); width: 6px; height: 6px; border-top: 1px solid #9fb2bb; border-right: 1px solid #9fb2bb; transform: translateY(-50%) rotate(45deg); }
.aa-fc__subs { margin: 0; padding: 0; list-style: none; }
.aa-fc__subs li { position: relative; margin-top: 20px; padding: 8px 10px; border: 1px solid var(--pi-line); border-radius: 6px; background: #fff; font-size: 13px; line-height: 1.4; color: var(--pi-soft); text-align: center; }
.aa-fc__subs li::before { content: ""; position: absolute; left: 50%; top: -21px; width: 1px; height: 20px; background: #c3ced4; }

@media (max-width: 760px) {
  .aa-gantt { padding: 20px 16px; overflow: visible; }
  .aa-gantt__head, .aa-gantt__row { grid-template-columns: 112px minmax(0, 1fr); }
  .aa-gantt__row { height: 30px; font-size: 12px; white-space: nowrap; }
  .aa-gantt__months { font-size: 11px; }
  .aa-gantt__months span { padding-left: 3px; white-space: nowrap; }
  .aa-gantt__months span:nth-child(1), .aa-gantt__months span:nth-child(4) { font-size: 0; }
  .aa-gantt__months span:nth-child(1)::after { content: "Oct"; font-size: 11px; }
  .aa-gantt__months span:nth-child(4)::after { content: "Jan"; font-size: 11px; }
  .aa-gantt__body::after { width: calc((100% - 112px) / 6); }
  .aa-fc { padding-top: 0; }
  .aa-fc__bracket { display: none; }
  .aa-fc__steps { grid-template-columns: 1fr; }
  .aa-fc__node { height: auto; min-height: 56px; }
  .aa-fc__steps > li:not(:last-child)::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: var(--gap); background: #9fb2bb; }
  .aa-fc__steps > li:not(:last-child) .aa-fc__node::after, .aa-fc__steps > li:not(:last-child) .aa-fc__node::before { display: none; }
}

/* Review round 2 */
.aa-cdp { margin: 40px 0; }
.aa-cdp img { border-radius: 8px; }
.pi-section--muted .aa-fc__bracket span { background: var(--pi-muted); }
.pi-hero__shot { border: 0; background: none; }
.pi-hero__shot img { border: 1px solid var(--pi-line); border-bottom: 0; border-radius: 4px 4px 0 0; }

/* Review round 3 */
.aa-gantt { margin-bottom: 28px; }
.pi-hero__shot img { box-shadow: var(--pi-shadow); }
.pi-hero__shot { max-height: none; overflow: visible; }
.pi-hero__shot img { width: 100%; max-height: 360px; object-fit: cover; object-position: top; }
@media (max-width: 760px) { .pi-hero__shot img { max-height: 260px; } }
.aa-metric { margin: 24px 0 !important; font-size: 20px; line-height: 1.45; }
#metric .pi-shot img { max-height: 520px; object-fit: cover; object-position: top left; }

/* Review round 4 */
.pi-tabs h3 { margin-bottom: 24px; }
.pi-tabs [data-panel] h4 { margin-bottom: 8px; font-size: 18px; }
.aa-option2 img { max-height: 560px; width: auto; max-width: 100%; }
.aa-small { width: 70%; }
.aa-teardown { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto; gap: 12px; align-items: start; }
.aa-teardown__map { grid-row: span 2; }
.aa-teardown .pi-shot + .pi-shot { margin-top: 0; }

/* Review round 5 */
ol.pi-list { padding-left: 24px; list-style: decimal; }
.aa-legacy { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 0; }
.aa-break { display: flex; align-items: center; align-self: center; height: 40px; margin-top: 24px; color: #c4695a; }
.aa-break span { flex: 1; height: 0; border-top: 1.5px dashed #9fb2bb; }
.aa-break svg { flex: none; margin: 0 4px; }
@media (max-width: 760px) {
  .aa-legacy { grid-template-columns: 1fr; gap: 0; }
  .aa-break { flex-direction: column; height: 56px; width: 40px; margin: 8px auto; }
  .aa-break span { flex: 1; width: 0; height: auto; border-top: 0; border-left: 1.5px dashed #9fb2bb; }
}
.aa-gantt__track i, .aa-gantt__track i.aa-gantt__dev { background: linear-gradient(90deg, #bfe3d6, #a3d4c2); }
.aa-gantt__body::after { display: none; }
.aa-gantt__launch { position: absolute; top: 50%; left: calc(var(--at) / 6 * 100%); display: flex; align-items: center; gap: 4px; font-size: 13px; font-style: normal; font-weight: 600; color: var(--pi-ink); white-space: nowrap; transform: translateY(-50%); }
.aa-role { grid-template-columns: repeat(3, auto); justify-content: space-between; }
.aa-role li { white-space: nowrap; }
@media (max-width: 760px) {
  .aa-gantt__launch span { display: none; }
  .aa-role { grid-template-columns: 1fr; }
  .aa-role li { white-space: normal; }
}
.aa-debate { font-size: 20px; line-height: 28px; }

/* Review round 6 */
#results .pi-personas h4 { font-size: inherit; line-height: inherit; font-weight: 700; }
#final-design h2 { margin-bottom: 72px; }
.aa-findings { gap: 16px; align-items: start; }
.aa-findings .pi-shot + .pi-shot { margin-top: 0; }
.aa-metric { font-size: inherit !important; line-height: inherit; font-weight: 700; }
#alignment .pi-row h3 { margin-bottom: 16px; }
#alignment .pi-row h4 { margin: 24px 0 6px; font-size: 16px; font-weight: 700; }
#alignment .pi-row h3 + h4 { margin-top: 0; }
.aa-debate-points p + p { margin-top: 16px; }
.aa-gantt__track .aa-gantt__launch .aa-gantt__milestone { position: static; flex: none; width: 10px; height: 10px; margin-right: 2px; border-radius: 2px; background: #4f9e83; transform: rotate(45deg); }
/* Proposal docs as an overlapping collage */
.aa-docs { position: relative; display: block; min-height: 400px; }
.aa-docs .pi-shot { position: absolute; margin: 0; }
.aa-docs .pi-shot img { box-shadow: var(--pi-shadow); background: #fff; }
.aa-docs .pi-shot:nth-child(1) { top: 0; left: 0; width: 62%; z-index: 1; }
.aa-docs .pi-shot:nth-child(2) { top: 96px; right: 0; width: 60%; z-index: 2; }
@media (max-width: 760px) {
  .aa-docs { min-height: 0; display: grid; gap: 16px; }
  .aa-docs .pi-shot { position: static; width: 100% !important; }
}