/*
 * ProSocial Agency - Answer deck
 * 09-answer-deck.css
 * Deferred tier. Service page heroes.
 *
 * A card that shows an artifact of the service itself rather than a
 * stock photograph. On AI Search Marketing it is an AI answer citing a
 * client. On Paid Advertising it is a search result with the ad in
 * place. On SEO it is a result snippet.
 *
 * The card carries its own title bar stating what it represents, so
 * nobody mistakes it for a screenshot of a real product. That framing
 * is deliberate: a fabricated interface would be dishonest on a page
 * selling placement inside those interfaces.
 *
 * Motion is limited to a quiet crossfade between cards and a lift on
 * hover. The outgoing card settles backward and fades rather than
 * travelling across the incoming one, so the hero is never illegible.
 */

.deck-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}

/* Grid child. Without min-width 0 a long unbroken word pushes the
   column past its track and breaks the split. */
.deck-hero__text { min-width: 0; }

.deck-hero__eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-action);
  margin-bottom: var(--space-5);
}

.deck-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: 1.08;
  color: var(--color-text-primary);
  max-width: 14ch;
  margin-bottom: var(--space-5);
}

.deck-hero__lede {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  max-width: 46ch;
  margin-bottom: var(--space-8);
}

.deck-hero__lede p { max-width: none; }

.deck-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* -------- The deck -------- */

.deck {
  position: relative;
  perspective: 1600px;
  padding: 34px 34px 0 34px;
}

/* No fixed height. The active card sits in normal flow and gives the
   stack its height, so the box always fits its text. The cards behind
   are absolute and contribute nothing.

   A fixed height was what pushed the citation line outside the card on
   longer answers. */
.deck__stack {
  position: relative;
  min-height: 280px;
  transform-style: preserve-3d;
  transform: rotateY(-5deg) rotateX(2.5deg);
  transition: transform var(--duration-slower) cubic-bezier(0.22, 1, 0.36, 1);
}

.deck:hover .deck__stack { transform: rotateY(-8deg) rotateX(4deg); }

.deck__card {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: var(--radius-lg);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  padding: 0 var(--space-6) var(--space-5);
  cursor: pointer;
  text-align: left;
  will-change: transform, opacity;
  display: flex;
  flex-direction: column;
  transition:
    transform  520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity    300ms ease,
    box-shadow 520ms ease;
}

/* In flow, so the stack grows with the answer. */
.deck__card[data-pos="0"] {
  position: relative;
  inset: auto;
  height: auto;
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  z-index: 3;
  box-shadow: 0 24px 60px rgba(19, 30, 54, 0.12), 0 6px 16px rgba(19, 30, 54, 0.06);
}

.deck__card[data-pos="1"] {
  transform: translate3d(26px, -20px, -70px) scale(0.955);
  opacity: 0.62;
  z-index: 2;
  box-shadow: 0 14px 36px rgba(19, 30, 54, 0.07);
}

.deck__card[data-pos="2"] {
  transform: translate3d(52px, -40px, -140px) scale(0.915);
  opacity: 0.34;
  z-index: 1;
  box-shadow: 0 10px 26px rgba(19, 30, 54, 0.05);
}

.deck__card[data-pos="3"] {
  transform: translate3d(72px, -56px, -200px) scale(0.89);
  opacity: 0;
  z-index: 0;
}

.deck:hover .deck__card[data-pos="0"] {
  transform: translate3d(0, -6px, 0) scale(1.01);
  box-shadow: 0 34px 78px rgba(19, 30, 54, 0.16);
}

.deck:hover .deck__card[data-pos="1"] { transform: translate3d(32px, -26px, -70px) scale(0.955); }
.deck:hover .deck__card[data-pos="2"] { transform: translate3d(62px, -50px, -140px) scale(0.915); }

/* Outgoing card settles back and fades. No rotation, no travel across
   the incoming card, so the hero stays readable through the change. */
.deck__card.is-leaving {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  transform: translate3d(14px, -10px, -70px) scale(0.965) !important;
  opacity: 0 !important;
  z-index: 1 !important;
  transition:
    transform 380ms cubic-bezier(0.4, 0, 0.6, 1),
    opacity   220ms ease !important;
}

/* -------- Card chrome -------- */

.deck__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px var(--space-6);
  margin: 0 calc(var(--space-6) * -1) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.deck__bar svg {
  width: 13px;
  height: 13px;
  stroke: var(--color-action);
  fill: none;
  stroke-width: 1.6;
  flex-shrink: 0;
}

.deck__bar span {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.deck__bar em {
  font-style: normal;
  color: var(--color-action);
}

/* -------- Card body -------- */

.deck__q {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.deck__q-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-action) 0%, #D9803F 100%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deck__q-mark svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.6;
}

.deck__q-text {
  font-family: var(--font-heading);
  font-size: var(--nav-link-size);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.deck__a {
  padding-top: var(--space-4);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  /* A pasted URL or an unbroken string must not push the card wider
     than its column. This is the mobile overflow. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.deck__q-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.deck__a b {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  box-shadow: inset 0 -0.5em 0 var(--color-action-wash);
}

/* -------- Industry lockup -------- */

/* In normal flow, pushed down by margin-top auto, so the card height
   follows its content instead of being fixed. Absolute positioning
   here is what stopped the card scaling to the text. */
/* No rule here. It read as a stray line travelling with the card on
   hover, and the type separation is enough on its own. */
.deck__ind {
  margin-top: auto;
  padding-top: var(--space-5);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.deck__ind-name {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  color: var(--color-action);
  line-height: 1;
}

.deck__ind-tag {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* -------- Citation line -------- */

.deck__cite {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.deck__cite b {
  color: var(--color-action);
  font-weight: var(--weight-semibold);
}

.deck__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-action);
  background: var(--color-action-wash);
  border: 1px solid var(--color-border-action);
  border-radius: var(--radius-full);
  padding: 4px 10px;
}

.deck__pill i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-action);
  display: block;
}

/* -------- Platform strip -------- */

.deck__platforms {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.deck__platforms-label {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.deck__platforms-list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.deck__platform {
  font-family: var(--font-heading);
  font-size: var(--nav-link-size);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  opacity: 0.72;
  transition: opacity var(--duration-base) var(--ease-out);
}

.deck__platform:hover { opacity: 1; }

/* -------- Tabs -------- */

/* Sits inside .deck, directly under the card stack, so it inherits the
   34px inset from the parent and must not add its own. It used to sit
   outside .deck, where it became a third item in the two column
   deck-hero grid and wrapped back under the heading. */
.deck__tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.deck__tab {
  padding: 5px 11px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    color        var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    background   var(--duration-base) var(--ease-out);
}

.deck__tab:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.deck__tab.is-on {
  color: var(--color-action);
  border-color: var(--color-border-action);
  background: var(--color-action-wash);
}

/* -------- Responsive -------- */

@media (max-width: 1024px) {
  .deck-hero { gap: var(--space-10); }
  .deck { padding-inline: 20px; }
  .deck__stack { height: 340px; }
}

@media (max-width: 880px) {
  .deck-hero { grid-template-columns: 1fr; gap: var(--space-12); }
  .deck-hero__title, .deck-hero__lede { max-width: 100%; }
  .deck { padding: 24px 24px 0; }

  /* No stack on a narrow screen. The active card sits in normal flow so
     the section grows with the text rather than clipping it. */
  .deck__stack {
    transform: none;
    height: auto;
    min-height: 0;
  }

  .deck:hover .deck__stack { transform: none; }

  .deck__card { opacity: 0; pointer-events: none; }
  .deck__card[data-pos="0"] { opacity: 1; pointer-events: auto; transform: none; }
  .deck:hover .deck__card[data-pos="0"] { transform: none; }
  .deck__card.is-leaving { opacity: 0 !important; transform: none !important; }

  .deck__ind-name { font-size: 1.5rem; }
  .deck__tabs { padding-inline: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .deck__stack,
  .deck__card { transition: none; }
  .deck:hover .deck__stack { transform: rotateY(-5deg) rotateX(2.5deg); }
}

/* =================================================
   SERP VARIANT
   =================================================
   Paid Advertising and SEO show a search result rather than an AI
   answer. The result format is an industry convention and Google ships
   an ad preview tool of its own, so reproducing the layout is normal
   practice. The Google wordmark and the page chrome are not here on
   purpose: those would make the card claim to be a screenshot, and it
   is copy we wrote. The source label sits in the theme typeface, which
   labels the card rather than impersonating the page.

   Typography below is Google's own so the block is recognised at a
   glance: Arial, #1a0dab headline, #4d5156 description, bold black
   Sponsored marker.
   ================================================= */

.deck__card--serp {
  padding: 0 var(--space-6) var(--space-5);
}

.serp {
  font-family: arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Query bar. Query left, source right, matching the citation line on
   the AI card. */
.serp__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 11px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}

.serp__query {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.serp__query svg {
  width: 15px;
  height: 15px;
  stroke: var(--color-text-muted);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.serp__query span {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serp__source {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* -------- Result -------- */

.serp__row + .serp__row {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(19, 30, 54, 0.06);
}

.serp__sponsored {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  color: #202124;
  margin-bottom: 3px;
}

.serp__site {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.serp__fav {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f1f3f4;
  border: 1px solid #dadce0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-action);
  flex-shrink: 0;
}

.serp__name { font-size: 14px; line-height: 18px; color: #202124; }
.serp__url  { font-size: 12px; line-height: 16px; color: #4d5156; overflow-wrap: anywhere; }

.serp__title {
  font-size: 20px;
  line-height: 26px;
  color: #1a0dab;
  margin-top: 5px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.serp__desc {
  font-size: 14px;
  line-height: 22px;
  color: #4d5156;
  margin-top: 3px;
  max-width: none;
  overflow-wrap: anywhere;
}

.serp__desc b { font-weight: 700; color: #4d5156; }

.serp__links {
  display: flex;
  gap: 18px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.serp__link { font-size: 14px; line-height: 20px; color: #1a0dab; }

/* Industry lockup and footer reuse the AI card styles, so the two
   variants stay the same object. */
.serp .deck__ind { margin-top: auto; }

@media (max-width: 880px) {
  .serp__title { font-size: 18px; line-height: 24px; }
  .serp__source { display: none; }
}

/* -------------------------------------------------
   LOCAL PACK  (seo variant)
   -------------------------------------------------
   A drawing of a Google local pack. The map is two repeating gradients
   and two solid bars, so the whole thing costs no images and no
   requests, and all four cards share one set of rules.

   Pin positions are fixed rather than per card. Nobody reads a fake
   map closely enough to notice, and making them editable would have
   cost twenty four fields for decoration.
   ------------------------------------------------- */

/* The map is drawn inline in every card rather than defined once and
   referenced with use. A cross referenced symbol repainted late while
   the cards were mid transform, so a card showed empty for a frame
   before the streets appeared. Four copies of the geometry is about
   three kilobytes and repeats almost to nothing under gzip.

   Colours are literal rather than themed. This is a picture of a map,
   not a piece of UI, and it should look the same whatever the theme
   around it does.

   Roads are drawn twice: a wider grey casing underneath, a narrower
   white fill on top. That single trick is most of what separates a
   real map from a set of lines. */
.pack__map {
  position: relative;
  height: 132px;
  margin: 0 calc(var(--space-5) * -1);
  overflow: hidden;
}

.pack__map-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pm-bg    { fill: #F2F0EC; }
.pm-build { fill: #E7E2DA; }
.pm-park  { fill: #D6E8CE; }
.pm-water { fill: #AAD4F0; }

.pm-case,
.pm-road { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.pm-case { stroke: #DCD7CE; stroke-width: 9; }
.pm-road { stroke: #FFFFFF; stroke-width: 6.5; }

.pm-case .pm-hwy { stroke: #E8C9A0; stroke-width: 14; }
.pm-road .pm-hwy { stroke: #FBD9A8; stroke-width: 10.5; }

.pack__pin {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(19,30,54,0.28);
}

/* The client sits at position one, so it is the only filled pin. */
.pack__pin--1 {
  left: 16%;
  top: 22px;
  width: 26px;
  height: 26px;
  background: var(--color-action);
  color: var(--color-bg-white);
}

.pack__pin--2,
.pack__pin--3 {
  width: 22px;
  height: 22px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-text-faint);
  color: var(--color-text-body);
}

.pack__pin--2 { left: 52%; top: 74px; }
.pack__pin--3 { left: 79%; top: 18px; }

.pack__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pack__item {
  display: flex;
  gap: 10px;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.pack__item:last-child { border-bottom: none; }

/* The two below the client are dimmed. The card is making one point,
   which is that the practice is on top. */
.pack__item:not(.is-own) { opacity: 0.55; }

.pack__rank {
  flex: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  padding-top: 2px;
}

.pack__item.is-own .pack__rank { color: var(--color-action); }

.pack__body { flex: 1; min-width: 0; }

.pack__name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  line-height: 1.3;
  margin: 0;
}

.pack__item.is-own .pack__name { font-weight: 600; }

.pack__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 3px 0 0;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.pack__meta > span + span::before {
  content: "\00b7";
  margin-right: 6px;
}

.pack__rating { color: var(--color-support); }

.pack__hours {
  margin: 3px 0 0;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* Call and website sit to the right of every listing, which is where a
   real pack puts them. They are decoration, not controls: the whole
   card is a drawing, so they carry aria-hidden and are not links. */
.pack__cta {
  display: flex;
  gap: 14px;
  margin-left: auto;
  padding-left: var(--space-4);
  align-self: center;
}

.pack__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 44px;
}

.pack__icon svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  fill: none;
  stroke: var(--color-text-primary);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pack__item.is-own .pack__icon svg {
  border-color: var(--color-text-faint);
}

.pack__icon-label {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--color-text-body);
}

@media (max-width: 768px) {
  .pack__map { height: 104px; }
  .pack__item { padding: var(--space-3) 0; }
}

/* -------------------------------------------------
   WEB DESIGN  (web variant)
   -------------------------------------------------
   The laptop itself now lives in 19-laptop.css, because the case study
   hero uses the same component and should not have to load this whole
   file to get it. Only the deck level layout stays here.
   ------------------------------------------------- */

.deck-hero--web {
  grid-template-columns: 0.8fr 1.2fr;
}

.deck--web {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

/* -------------------------------------------------
   PAGESPEED RINGS
   -------------------------------------------------
   One group per site, only the active one shown. A ring is only
   printed when its field holds a value, and the group is skipped
   entirely when none of the four are filled, so a site that has not
   been measured yet shows nothing rather than four empty circles.
   ------------------------------------------------- */

.psi {
  display: none;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.psi.is-on { display: flex; }

.psi__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 74px;
}

.psi__ring {
  width: 46px;
  height: 46px;
  transform: rotate(-90deg);
}

.psi__track { fill: none; stroke-width: 3; }
.psi__arc   { fill: none; stroke-width: 3; stroke-linecap: round; }

.psi__num {
  position: absolute;
  top: 13px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
}

.psi__label {
  margin-top: 5px;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  line-height: 1.25;
  text-align: center;
  color: var(--color-text-muted);
}

/* PageSpeed's own thresholds, so a score that slips tells the truth
   without anyone having to remember to change a colour. */
.psi__item--good .psi__arc,
.psi__item--good .psi__num { stroke: #0CCE6B; color: #07894A; }
.psi__item--good .psi__track { stroke: rgba(12,206,107,0.18); }

.psi__item--ok .psi__arc,
.psi__item--ok .psi__num { stroke: #E8A317; color: #8A6108; }
.psi__item--ok .psi__track { stroke: rgba(232,163,23,0.18); }

.psi__item--poor .psi__arc,
.psi__item--poor .psi__num { stroke: #E8503A; color: #A6301F; }
.psi__item--poor .psi__track { stroke: rgba(232,80,58,0.18); }

@media (max-width: 900px) {
  .deck-hero--web { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .psi__item { width: 64px; }
  .psi__ring { width: 40px; height: 40px; }
  .psi__num  { top: 11px; font-size: 0.74rem; }
}