/* Aylor Brands additions on top of the Sparrow theme: work cards, logo tiles, client story pages */

.work-card { display: block; color: inherit; }
.work-card:hover { text-decoration: none; color: inherit; }
.work-card > img,
.work-card > .logo-tile { transition: transform .4s ease, box-shadow .4s ease; }
.work-card:hover > img,
.work-card:hover > .logo-tile { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); }
.work-card .read-more { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }

.logo-tile {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; padding: 18%;
  background: #fff; border: 1px solid #dee2e6; border-radius: .25rem;
}
.logo-tile img { max-width: 100%; max-height: 100%; }
.logo-tile.dark { background: #000; border-color: #000; }
/* Uniform portfolio tiles: black card, any logo rendered as a flat white silhouette */
.logo-tile.mono { background: #000; border-color: #000; }
.logo-tile.mono img { filter: brightness(0) invert(1); }
/* Wider tile for the three-across homepage story row */
.logo-tile.wide { aspect-ratio: 16 / 10; padding: 10% 22%; }
.story-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; color: #999; }
.story-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.story-tags li { border: 1px solid #ced4da; border-radius: 2rem; padding: .2rem .8rem; font-size: .8rem; margin: 0 .5rem .5rem 0; }

.browser-frame { border: 1px solid #dee2e6; border-radius: .5rem; overflow: hidden; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .18); background: #fff; }
.browser-frame::before {
  content: ""; display: block; height: 28px;
  background:
    radial-gradient(circle at 16px 14px, #ff5f57 5px, transparent 6px),
    radial-gradient(circle at 34px 14px, #febc2e 5px, transparent 6px),
    radial-gradient(circle at 52px 14px, #28c840 5px, transparent 6px),
    #f1f1f1;
}
.browser-frame img { display: block; width: 100%; height: auto; }

.phone-frame { max-width: 270px; margin: 0 auto; border: 10px solid #111; border-radius: 2.4rem; overflow: hidden; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .35); background: #111; }
.phone-frame img { display: block; width: 100%; height: auto; }

.glance dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .15em; color: #999; font-weight: 700; margin-top: 1.25rem; }
.glance dt:first-child { margin-top: 0; }
.glance dd { margin: .25rem 0 0; }
@media (min-width: 992px) { .glance { position: sticky; top: 3rem; } }

.story-body h2 { font-size: 1.75rem; margin-top: 3rem; }
.story-body h2:first-child { margin-top: 0; }
.story-body p { font-size: 1.1rem; line-height: 1.8; }

.big-idea { font-family: 'PT Serif', serif; font-style: italic; line-height: 1.3; }

/* "The work" gallery on story pages: two-column masonry so mixed-shape pieces sit together */
.work-gallery { column-count: 2; column-gap: 1.5rem; }
@media (max-width: 767.98px) { .work-gallery { column-count: 1; } }
.work-gallery figure { break-inside: avoid; margin: 0 0 1.75rem; }
.work-gallery img { display: block; width: 100%; height: auto; border-radius: .35rem; background: #f4f4f4; box-shadow: 0 1rem 2rem rgba(0, 0, 0, .12); }
.work-gallery figcaption { font-size: .8rem; color: #888; margin-top: .6rem; }

.next-story { display: block; color: inherit; }
.next-story:hover { text-decoration: none; color: inherit; }
.next-story:hover .next-story-name { text-decoration: underline; }