/* Featured Work: the button in the home page header and the popup it opens
   (index.html). Loaded after layout.css; the popup reuses the Works tiles
   and .popup-modal styles. */

/* Header button, top right, just below the nav bar */
header .featured-work-btn {
   position: absolute; top: 66px; right: 30px; z-index: 90;
   padding: 10px 20px; border-radius: 3px;
   font: 12px/20px 'opensans-bold', sans-serif; letter-spacing: 2.5px; text-transform: uppercase;
   color: #fff; background: #11ABB0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
   -webkit-transition: background-color .2s ease-in-out;
   transition: background-color .2s ease-in-out;
}
header .featured-work-btn:hover,
header .featured-work-btn:focus { color: #fff; background: #0F9095; }
header .featured-work-btn i { margin-right: 8px; }

@media only screen and (max-width: 767px) {
   /* sits below the mobile menu button, which is 48px tall at right: 30px */
   header .featured-work-btn { top: 64px; padding: 8px 14px; letter-spacing: 1.5px; }
}

/* Popup listing the featured works (same look as the Works section) */
.popup-modal.featured-work-modal { max-width: 760px; background: #ebeeee; }
.featured-work-modal h1 {
   font: 15px/24px 'opensans-semibold', sans-serif; text-transform: uppercase; letter-spacing: 1px;
   text-align: center; color: #313131; padding: 36px 36px 6px; margin: 0;
}
.featured-work-modal p.subtitle {
   font: 14px/24px 'opensans-regular', sans-serif; color: #5F6B6B;
   text-align: center; padding: 0 36px; margin: 0 0 24px;
}

/* Center rows with fewer tiles than the grid has columns */
.featured-grid { display: flex; flex-wrap: wrap; justify-content: center; padding: 0 16px; }
.featured-grid .columns { margin-bottom: 36px; }

/* Square tiles regardless of source image dimensions */
.featured-grid .portfolio-item .item-wrap a {
   position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #fff;
}
.featured-grid .portfolio-item .item-wrap img { width: 100%; height: 100%; object-fit: contain; }

/* "Back" link in a work's popup, between its main link and Close */
.popup-modal a.featured-work-back { margin-left: 24px; }