/* Portfolio (spec 2026-10-18 section 3, reworked 2026-11-08): the site's ordinary card (picture, then words), the chooser doors, the sticky filter bar.
   The folder-card look (pocket, tab, grain, blurred backdrop, counters) is gone: it was a second design system next to the rest of wato.au.
   Dialog styles live in portfolio-modal.css (the review dialog reuses that frame). */
.pf-card[hidden], .pf-grid[hidden], .pf-filterwrap[hidden], .pf-ask[hidden] { display: none !important; }

/* ---------- grid ---------- */
.pf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-inline: auto; } }
@media (max-width: 600px) { .pf-grid { grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 16px; } }

/* ---------- card: 22px, 1px --line, --shadow-sm, white; hover lifts and rings in cyan like the service cards ---------- */
.pf-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; min-width: 0;
  border-radius: var(--radius-lg); background: var(--white); color: inherit; text-decoration: none; text-align: left;
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
  transition: opacity var(--t-4) var(--e-out), transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out);
}
/* Scroll reveal on a card that also lifts on hover: the two share transform, so the entrance is a keyframe
   (fill backwards, so it lets go of transform when done) and the reveal stagger moves from transition-delay to
   animation-delay. Otherwise .reveal.in's delay would hold every hover lift back by --i * 70ms. */
.pf-card.reveal.in { transition-delay: 0s; animation: pf-reveal var(--dur, var(--t-4)) var(--e-out) calc(var(--i, 0) * var(--step, 70ms)) backwards; }   /* after a filter change portfolio.js sets --dur to --t-3 and --step to 40ms */
@keyframes pf-reveal { from { opacity: 0; transform: translateY(1.375rem); } }
@media (hover: hover) { .pf-card:not(.pf-tile):hover { transform: translateY(var(--lift)); box-shadow: inset 0 0 0 1px var(--cyan), var(--shadow); } }
.pf-card:focus-within { outline: 3px solid var(--cyan); outline-offset: 3px; }

.pf-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft-2); }
.pf-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pf-media--char { background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--cyan) 38%, var(--white)) 0%, transparent 70%), var(--soft-2); }
.pf-who { position: absolute; left: 50%; top: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); }
.pf-tag { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 10px; border-radius: 999px; font: 700 10.5px/1.2 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark); background: var(--cyan-dark); }
.pf-text { padding: 16px 18px 18px; }
.pf-card[data-kind="web"] .pf-text, .pf-card[data-kind="project"] .pf-text { min-height: 100px; }   /* the same card height whether the title wraps or not */
.pf-text h3 { margin: 0 0 4px; font: 700 1.05rem/1.2 var(--head); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-text p { margin: 0; font: 600 13px/1.4 var(--font); color: var(--muted); }
/* the title is the control (a button for a gallery, a link for a project) and stretches over the whole card */
.pf-open { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: left; text-decoration: none; cursor: pointer; }
.pf-open::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pf-open:focus-visible { outline: none; }
@media (hover: hover) { .pf-card[data-kind="web"], .pf-card[data-kind="project"] { cursor: pointer; } }

/* ---------- client tiles (inside Reviews): business cards on a desk, no names, no links ---------- */
.pf-tile { aspect-ratio: 3 / 4; cursor: default; }
.pf-tile__grid { position: absolute; inset: 44px 10px 10px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 6px; }
/* Wide screens: business cards on the WaTo desk. Where the grid is two columns or one (up to 1100px) the cards are too small
   to read, so each cell shows the client's own logo in a white chip instead (the footer strip's picture, same media query as the <source>). */
.pf-tile__grid picture { display: block; min-height: 0; overflow: hidden; border-radius: calc(var(--radius) / 2); }
.pf-tile__grid picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.pf-tile__grid picture:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pf-tile__grid picture:last-child:nth-child(odd) img { object-position: 62% 40%; }
.pf-tile__grid img.is-logo { object-fit: contain; object-position: center; padding: 12px; }
@media (max-width: 1100px) {
  .pf-tile__grid { inset: 46px 12px 12px; gap: 8px; }
  .pf-tile__grid picture { background: var(--plate); box-shadow: inset 0 0 0 1px var(--line); }
  .pf-tile__grid picture img, .pf-tile__grid picture:last-child:nth-child(odd) img { object-fit: contain; object-position: center; padding: 14px 12px; }
}

/* ---------- review card: a navy chat card; the quote is cut off, click opens it (P13, P17) ---------- */
.pf-review { aspect-ratio: 3 / 4; padding: 1rem; background: var(--deep); border: 0; box-shadow: var(--shadow); cursor: pointer; }
@media (max-width: 600px) { .pf-review, .pf-tile { aspect-ratio: 1 / 1; } }
.pf-review__inner { position: relative; height: 100%; display: flex; flex-direction: column; gap: .8rem; padding-bottom: 1.2rem; overflow: hidden; }
.pf-review .chat-msg[data-side="staff"] { margin-top: auto; }
.pf-review .chat-msg { max-width: 100%; min-width: 0; } .pf-review .chat-msg > div, .pf-review-dialog .chat-msg > div { min-width: 0; } .pf-review .bubble, .pf-review-dialog .bubble { overflow-wrap: anywhere; }
.pf-review .bubble { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: 0; border-bottom: .65rem solid var(--white); } /* bottom gap is a border so clipped lines never peek through the padding */
.pf-review .chat-msg[data-side="staff"] .bubble { border-bottom-color: var(--cyan); }
.pf-review .chat-msg[data-side="client"] .bubble { -webkit-line-clamp: 5; }
.pf-review .chat-msg[data-side="staff"] .bubble { -webkit-line-clamp: 2; }
.pf-rmore { position: absolute; right: .25rem; bottom: 0; font: 700 .72rem/1 var(--head); color: var(--cyan-light); letter-spacing: .04em; }
:is(.pf-review, .pf-review-dialog) .msg-who { color: rgba(var(--on-dark-rgb), .72); }
:is(.pf-review, .pf-review-dialog) .msg-who b { color: var(--cyan-light); }
:is(.pf-review, .pf-review-dialog) .av { border-color: rgba(var(--cyan-rgb), .55); }
@media (hover: hover) { .pf-review:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow), 0 40px 70px -20px rgba(var(--cyan-rgb), .45); } }
.pf-review:focus-visible { transform: translateY(var(--lift)); box-shadow: var(--shadow), 0 40px 70px -20px rgba(var(--cyan-rgb), .45); }
.pf-review:focus:not(:focus-visible), .pf-review:focus-within:not(:focus-visible) { outline: none; }
.pf-review:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.pf-review-dialog { max-width: min(42rem, 94vw); }
.pf-review-dialog .portfolio-modal__inner { padding: 1.5rem; display: grid; gap: .8rem; }
.pf-review-dialog__body { display: grid; gap: 1rem; }
.pf-review-dialog__body { padding-top: 1.6rem; }
.pf-review-dialog .chat-msg { max-width: 100%; }
.pf-review-dialog .chat-msg[data-side="staff"] { align-self: flex-end; }

/* ---------- the chooser: three equal doors, the navy one in the middle ---------- */
.pf-ask { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-top: 6px; }
.pf-door { aspect-ratio: auto; }
.pf-door .pf-media { aspect-ratio: auto; height: 260px; }
.pf-door .pf-text { padding: 18px 22px 22px; }
.pf-door .pf-text h2 { margin: 0 0 6px; font: 800 1.45rem/1.15 var(--head); color: var(--ink); }
.pf-door .pf-text p { max-width: 30ch; font-size: .95rem; line-height: 1.45; }
.pf-go { position: absolute; right: 18px; bottom: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cyan); color: var(--on-dark); box-shadow: var(--shadow-cyan); pointer-events: none; }
.pf-go svg { width: 15px; height: 15px; }
@media (hover: hover) { .pf-door:hover .pf-go { background: var(--cyan-dark); } }
.pf-door:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
/* the Reviews door: the same navy chat as the review cards, one real quote, then the label */
.pf-door--reviews .pf-review__inner { padding: .35rem .35rem 0; }
.pf-door--reviews .bubble { -webkit-line-clamp: 6; }
.pf-door--reviews .pf-text { margin-top: auto; padding: 0 .25rem .9rem; }
.pf-door--reviews .pf-text h2 { color: var(--on-dark); } .pf-door--reviews .pf-text p { color: rgba(var(--on-dark-rgb), .72); }
@media (hover: hover) { .pf-door--reviews:hover .pf-go { background: var(--cyan-dark); } }
@media (max-width: 1100px) { .pf-ask { grid-template-columns: 1fr 1fr; } .pf-door--reviews { grid-column: 1 / -1; order: 3; } }
@media (max-width: 600px) { .pf-ask { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; gap: 14px; } .pf-door--reviews { grid-column: auto; order: 0; } .pf-door .pf-media { height: 190px; } }
@media (prefers-reduced-motion: reduce) { .pf-card { transition-duration: 200ms !important; transition-timing-function: ease !important; } }

/* ---------- filter bar ---------- */
.pf-sentinel { height: 1px; }
.pf-filterwrap { position: sticky; top: var(--pf-top, 0px); z-index: 20; padding: 12px 0 var(--space-md); margin-bottom: 0; display: grid; justify-items: center; }
.pf-filterwrap::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--soft); opacity: 0; transition: opacity var(--t-2) var(--e-out); }
.pf-filterwrap.is-stuck::before { opacity: 1; }
.pf-filter { width: 100%; display: grid; justify-items: center; gap: 12px; }
.pf-segs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pf-filter .pf-seg { padding: .8rem 1.3rem; }
.pf-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; animation: pf-chips-in var(--t-3) var(--e-out); }
.pf-chips[hidden] { display: none; }
.pf-sep { width: 1px; height: 1.4rem; background: var(--line); margin-inline: 6px; }
@keyframes pf-chips-in { from { opacity: 0; transform: translateY(-6px); } }
.pf-seg:focus-visible, .pf-chip:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.pf-filterwrap.is-stuck { padding-top: 6px; padding-bottom: 8px; } .pf-filterwrap.is-stuck .pf-filter { gap: 8px; }
.pf-filterwrap.is-stuck .pf-filter .pf-seg { padding: .6rem 1.1rem; } .pf-filterwrap.is-stuck .pf-chip { padding: .55rem .9rem; }
/* ---------- page chrome: breadcrumb + hero (pages.css is not loaded here, so the pillar-hero rhythm is repeated) ---------- */
.pf-crumb { padding: 0; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--tint-2) 0%, var(--tint-1) 60%, var(--white) 100%); }
.pf-crumb .container { padding-block: .625rem; }
.pf-crumb .breadcrumb { font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: .4375rem; }
.pf-crumb .breadcrumb a { color: var(--cyan-text); text-decoration: none; } .pf-crumb .breadcrumb a:hover { text-decoration: underline; }
.pf-hero { padding-block: 2.375rem .625rem; }
.pf-hero h1 { margin: .5rem 0 .875rem; }
.pf-hero .pillar-lead { font-size: 1.15rem; line-height: 1.6; color: var(--body); max-width: 80ch; margin: 0; }
section.soft.pf { padding-block: var(--space-sm) var(--space-xl); }
/* Wato 2026-10-19: no floating characters on the portfolio, like the support page */
body[data-no-eggs] .wato-egg { display: none !important; }
::view-transition-group(*) { animation-duration: var(--t-3); animation-timing-function: var(--e-out); }
@media (max-width: 600px) {
  .pf-filterwrap { padding-inline: 12px; }
  .pf-segs { flex-wrap: nowrap; gap: 6px; max-width: 100%; } .pf-filter .pf-seg { padding: .7rem .9rem; font-size: .85rem; }
  .pf-chips { gap: 6px; } .pf-sep { display: none; } .pf-chip { padding: .6rem .8rem; }
  /* stuck on a phone (Wato 2026-11-06, too much crammed in): one row of pills over one quiet row of chips.
     The chips drop their glow, so the four platforms fit a 390 screen with the next group peeking;
     the row runs edge to edge and fades out on the right to show it scrolls. About 85px tall at 390. */
  .pf-filterwrap.is-stuck .pf-filter { gap: 6px; }
  .pf-filterwrap.is-stuck .pf-segs { gap: 5px; }
  .pf-filterwrap.is-stuck .pf-filter .pf-seg { padding: .5rem .65rem; font-size: .8rem; }
  .pf-filterwrap.is-stuck .pf-chips { flex-wrap: nowrap; justify-content: flex-start; gap: 5px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; width: 100vw; margin-inline: calc((100% - 100vw) / 2); padding: 2px 2.75rem 2px 1rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.75rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.75rem), transparent); }
  .pf-filterwrap.is-stuck .pf-chips::-webkit-scrollbar { display: none; }
  .pf-filterwrap.is-stuck .pf-chip { flex: none; padding: .55rem .7rem; font-size: .74rem; box-shadow: none; }
  .pf-filterwrap.is-stuck .pf-sep { display: block; flex: none; height: 1rem; margin-inline: 3px; }
}