/* The work grid: mixed sizes, the only layout (P7, 2026-09-26).
   Each tile keeps its artwork's proportions (work-layout.js sets how many 4px rows it spans),
   with 3px gutters and no frame, border or padding around the work. Nothing sits on the work at
   rest; hover or keyboard focus fades in who, what and how much.
   Touch screens (hover: none) have no hover, so each tile gets one quiet caption line under it
   instead ("Mira · ₹79,700") and a single tap opens the package. That caption is this one media
   query, so the default is easy to reverse (plan §4). */
:root .package-explorer .package-results-grid.is-mosaic,
:root .package-explorer.is-social-outcome .package-results-grid.is-mosaic{width:min(1500px,calc(100vw - 36px));grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:4px;grid-auto-flow:row;gap:3px;align-items:stretch}
:root .package-results-grid.is-mosaic .package-creator-card,
:root .package-results-grid.is-mosaic .package-creator-card:nth-child(5n+1),
:root .package-results-grid.is-mosaic .package-creator-card[data-work-shape="portrait"],
:root .package-results-grid.is-mosaic .package-creator-card[data-work-shape="feature"]{display:flex;flex-direction:column;grid-column:auto;grid-row:span var(--work-row-span,54);min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:#0b0b0c;box-shadow:none;overflow:hidden}
:root .package-results-grid.is-mosaic .package-creator-card:hover{border:0;box-shadow:none}
:root .package-results-grid.is-mosaic .package-creator-frame{position:relative;display:block;flex:1 1 auto;min-height:0;height:auto;aspect-ratio:auto}
:root .package-results-grid.is-mosaic .package-creator-card .package-creator-media,
:root .package-explorer.is-social-outcome .package-results-grid.is-mosaic .package-creator-media.is-social{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
:root .package-results-grid.is-mosaic .package-creator-media img,
:root .package-results-grid.is-mosaic .package-creator-media video,
:root .package-results-grid.is-mosaic .package-creator-media.is-social video{width:100%;height:100%;object-fit:cover}
:root .package-results-grid.is-mosaic .package-creator-card[data-work-shape="portrait"] .package-creator-media img,
:root .package-results-grid.is-mosaic .package-creator-card[data-work-shape="portrait"] .package-creator-media video{object-fit:contain}
:root .package-results-grid.is-mosaic .package-creator-veil{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;grid-template-areas:"who who" ". ." "what deal";column-gap:14px;min-height:0;padding:14px 16px 13px;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.72),transparent 32%,transparent 49%,rgba(0,0,0,.86));opacity:0;transition:opacity .15s ease;pointer-events:none}
@media(hover:hover){:root .package-results-grid.is-mosaic .package-creator-card:hover .package-creator-veil{opacity:1}}
:root .package-results-grid.is-mosaic .package-creator-card:focus-visible .package-creator-veil{opacity:1}
:root .package-results-grid.is-mosaic .package-creator-name,
:root .package-results-grid.is-mosaic .package-creator-package,
:root .package-results-grid.is-mosaic .package-creator-price,
:root .package-results-grid.is-mosaic .package-creator-enquire{color:#fff}
:root .package-results-grid.is-mosaic .package-creator-project,
:root .package-results-grid.is-mosaic .package-creator-time{color:rgba(255,255,255,.82)}
:root .package-results-grid.is-mosaic .package-load-more{grid-column:1/-1;grid-row:auto}
/* The caption line under a tile: touch screens only. */
.package-creator-caption{display:none}
@media(hover:none){
  :root .package-results-grid.is-mosaic .package-creator-caption{display:block;flex:none;overflow:hidden;padding:6px 2px 9px;background:#020202;color:rgba(255,255,255,.82);font:500 12px/1.3 var(--sans,system-ui);letter-spacing:-.005em;text-align:left;white-space:nowrap;text-overflow:ellipsis}
  :root .package-results-grid.is-mosaic .package-creator-card{background:#020202}
  /* Two lines: who and the card price (incl. PM & QA), then the price without a project manager & QA. */
  :root .package-results-grid.is-mosaic .package-creator-caption__line{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  :root .package-results-grid.is-mosaic .package-creator-caption small{color:rgba(255,255,255,.62);font-size:10.5px}
  :root .package-results-grid.is-mosaic .package-creator-caption__inclusion{margin-top:2px;color:rgba(255,255,255,.62);font-size:11px}
}
@media(max-width:1050px){:root .package-explorer .package-results-grid.is-mosaic,:root .package-explorer.is-social-outcome .package-results-grid.is-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){:root .package-explorer .package-results-grid.is-mosaic,:root .package-explorer.is-social-outcome .package-results-grid.is-mosaic{width:calc(100vw - 24px);gap:2px}:root .package-results-grid.is-mosaic .package-creator-veil{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto auto;grid-template-areas:"who" "." "what" "deal";gap:7px}:root .package-results-grid.is-mosaic .package-creator-deal{align-items:flex-start;text-align:left}}
@media(prefers-reduced-motion:reduce){:root .package-results-grid.is-mosaic .package-creator-veil{transition:none}}

/* Three selected portfolio samples live inside one ranked talent/package card. */
.package-results-grid.is-mosaic .package-creator-project-trio{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:3px;background:#0b0b0c}
.package-results-grid.is-mosaic .package-creator-project-sample{display:block;min-width:0;min-height:0;overflow:hidden;background:#101010}
.package-results-grid.is-mosaic .package-creator-project-sample.is-main{grid-row:1 / span 2}
.package-results-grid.is-mosaic .package-creator-project-sample img{display:block;width:100%;height:100%;object-fit:cover}
.package-results-grid.is-mosaic .package-creator-card[data-work-shape="portrait"] .package-creator-project-sample img{object-fit:contain}