/* The business card landing page, contact-card.html, generated by scripts/build-marketing-pages.mjs.
   Its base layout is in editorial.css (.card-page); this file holds the 8 October 2026 ideas review
   additions, and only this page loads it. Colours are the shell's tokens only. */

.cc-photo{display:block;width:104px;height:104px;margin:0 auto 18px;border-radius:50%;object-fit:cover;object-position:center 18%;border:2px solid var(--line)}
.card-page .intro{margin-bottom:16px}
.cc-doors{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:0 0 26px;font-weight:700;font-size:.95rem}

/* Book a free chat says what it costs inside the button */
.cc-book>span{flex-direction:column;gap:2px}
.cc-book small{display:block;font-size:.78rem;font-weight:500;color:var(--muted)}

/* Call, Email and Share as one row of tiles. Share stays hidden unless card.js finds a share menu,
   so the row is two tiles on a computer and three on most phones. */
.cc-tiles{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
.cc-tiles .btn{padding:14px 6px;border-radius:14px;font-size:.88rem;line-height:1.2}
.cc-tiles .btn>span{flex-direction:column;gap:4px}
.cc-tiles .ico{width:1.5em;height:1.5em}
.cc-tiles [hidden]{display:none}

.card-page .cc-reply{margin:18px auto 0;font-size:.9rem;font-weight:600;color:var(--ink-mid)}
.card-page .card-note{margin-top:6px!important}

/* What gets saved: every field in the contact file, listed by the generator from the file itself */
.cc-saves{margin:18px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;text-align:left;font-size:.9rem}
.card-page .cc-saves h2{font:700 .76rem/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.cc-saves dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 14px}
.cc-saves dt{color:var(--muted)}
.cc-saves dd{margin:0;color:var(--ink);font-weight:600;overflow-wrap:break-word}

/* One real example */
.cc-example{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;margin-top:34px;padding:12px;border:1px solid var(--line);border-radius:14px;text-align:left;text-decoration:none;color:var(--ink)}
.cc-example:hover{border-color:var(--accent)}
.cc-example img{width:96px;aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--line)}
.cc-example b{display:block}
.cc-example span span{display:block;font-size:.85rem;color:var(--muted)}

.card-page .cc-review{margin:16px 0 0;font-size:.88rem;color:var(--muted)}
.cc-review a{font-weight:700}

/* The floating call bar repeats the buttons above, so it does not show on this page. */
body:has(.card-page) .bp-callbar{display:none}

/* Tap targets on phones and touch tablets (8 October 2026): the three "what I build" links and the
   links at the foot of the card get a 44px tall tap area, with the row gaps taken in to match. */
@media (max-width:640px), (pointer:coarse) and (max-width:1024px){
  .cc-doors{gap:0 20px}
  .cc-doors a,.card-links a{display:inline-flex;align-items:center;min-height:44px}
  .card-links{gap:0 22px}
  /* 9 October 2026: a short name such as "Apps" is 44px wide too, and the review link is 44px tall */
  .cc-doors a{min-width:44px;justify-content:center}
  .cc-review a{display:inline-flex;align-items:center;min-height:44px}
}
/* B55 (motion picks, 11 October 2026): the card turns over to show what gets saved. card.js builds
   the two faces from the page's own markup; without it none of this applies. Both faces sit in the
   same grid cell, so the card is as tall as its taller side and nothing below it moves. */
.cc-flip{perspective:1600px;}
.cc-flip-inner{display:grid;transform-style:preserve-3d;transition:transform .7s cubic-bezier(0.65,0,0.35,1);}
.cc-flip.is-turned .cc-flip-inner{transform:rotateY(180deg);}
.cc-face{grid-area:1/1;min-width:0;padding:26px 20px 22px;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow-lift);-webkit-backface-visibility:hidden;backface-visibility:hidden;}
/* The side facing away is also not drawn at all, from the moment it turns edge-on (halfway through
   the turn), so nothing behind the card is ever read or picked up by mistake. */
.cc-face{transition:visibility 0s .35s;}
.cc-face.is-away{visibility:hidden;}
.cc-back{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;gap:16px;}
.cc-back .cc-saves{margin:0;}
.cc-turn{width:100%;justify-content:center;margin-top:16px;}
.cc-back .cc-turn{margin-top:0;}
.cc-saves h2:focus{outline:none;}
.cc-saves h2:focus-visible{outline:2px solid var(--signal);outline-offset:4px;border-radius:4px;}
/* Less motion: the sides swap without turning. */
@media (prefers-reduced-motion: reduce){ .cc-flip-inner,.cc-face{transition:none;} }