/* Share landing page (template share.php) and the in-share case-study nav (case-study.php).
   Not a block: lives here because the layout auto-loads this folder. No V0.1 comp:
   the head follows page-hero, the tiles follow the News cards. */

.share-head { padding-top: 113px; padding-bottom: var(--space-120); }
.share-head__eyebrow { margin-bottom: 56px; }
.share-head__title { max-width: 12em; }
.share-head__note { margin-top: var(--space-64); }
/* The note's sign-off: signature image (transparent, any aspect) over the sender's name. */
.share-sign { margin-top: var(--space-40); display: grid; justify-items: start; gap: var(--space-8); }
.share-sign__mark { width: 240px; max-width: 100%; background: none; }
.share-sign__mark > img { height: auto; max-height: 96px; object-fit: contain; object-position: left; }

.share-work__label { font-weight: 400; padding-bottom: var(--space-32); border-bottom: 1px solid var(--border-strong); }
.share-work__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-64) 40px; padding-top: var(--space-40); }

.share-tile { position: relative; display: flex; flex-direction: column; gap: 20px; }
.share-tile__media { border-radius: 15px; } /* V0.1: News card radius */
.share-tile__media > img { transition: transform 900ms var(--ease-out); }
.share-tile__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.share-tile__body .tag { position: relative; z-index: 1; }
.share-tile__title a::after { content: ""; position: absolute; inset: 0; }
.share-tile__title span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 600ms var(--ease-out);
}
:where([data-input="mouse"], .no-js) .share-tile:hover .share-tile__media > img { transform: scale(1.045); }
:where([data-input="mouse"], .no-js) .share-tile:hover .share-tile__title span,
.share-tile__title a:focus-visible span { background-size: 100% 1px; }

.share-foot { padding-block: var(--space-120) var(--space-80); }

/* Case study opened inside a share. */
.study-nav { display: flex; align-items: center; height: 48px; }
.study-nav__back { transition: opacity var(--dur-fast); }
:where([data-input="mouse"], .no-js) .study-nav__back:hover { opacity: 0.6; }
.study-end {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-32); flex-wrap: wrap;
  padding-block: var(--space-80) var(--space-120); border-top: 1px solid var(--border-strong);
}
.study-end__next { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
:where([data-input="mouse"], .no-js) .study-end__next:hover .t-display-6 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

@media (max-width: 767px) {
  /* The cover (mobile experience, 2026-09-30): the pill at the top, a screen of air, the
     title low and on the page hero's scale, then the note. */
  .share-head { padding-top: var(--space-48); padding-bottom: var(--space-64); grid-template-rows: auto 1fr auto auto auto; }
  /* Measured by an empty item over the first three rows, as page-hero.css does it, so the
     note sits below the 58svh line instead of lifting the title. */
  .share-head::before { content: ""; grid-row: 1 / 4; grid-column: full; min-height: calc(58svh - var(--nav-height) - var(--space-48)); }
  .share-head__eyebrow { margin-bottom: var(--space-32); grid-row: 1; }
  .share-head__title { grid-row: 3; font-size: clamp(40px, 12.5vw, 56px); }
  .share-head__note { margin-top: var(--space-40); grid-row: 4; }
  .share-sign { grid-row: 5; }
  .share-work__grid { grid-template-columns: 1fr; gap: var(--space-48); }
  .study-end { flex-direction: column; align-items: flex-start; }
  .study-end__next { align-items: flex-start; text-align: left; }
  .study-nav__back { display: flex; align-items: center; min-height: 44px; }
}