/* ============================================================
   MMW-STYLE WORK SECTION (v2)
   Mechanic measured from makemywebsite.com.au:

   .elementor-element-<id> > .elementor-widget-container {
     background-image: url(...screenshot.webp);
     background-position: top center;
     background-repeat: no-repeat;
     background-size: cover;
     transition: background 2.5s;
   }
   :hover > .elementor-widget-container {
     background-image: url(...screenshot.jpg);   // same site, taller crop
     background-position: bottom center;
   }

   i.e. a FULL-PAGE website screenshot shown in a tall portrait card,
   which scrolls from top -> bottom on hover. The card title is a
   22px uppercase heading in the site's accent colour.

   Our version: one screenshot, animated background-position on hover
   (no second asset needed), plus a red hover ring + the project name
   as an overlay that slides up.
   ============================================================ */

.work{background:var(--mmw-ink);position:relative;overflow:hidden;color:#A8ADB5;}
.work .sec-head h2{color:var(--mmw-white);}
.work .sec-head p{color:#A8ADB5;}
.work::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 82% 12%, rgba(237,28,36,.10), transparent 62%);
}

.work__grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:26px;
}

/* ---------- the card ---------- */
.work-card{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--radius);
  background:#0B0C0F;
  border:1px solid rgba(255,255,255,.08);
  aspect-ratio:4 / 5;                 /* tall portrait, like MMW */
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.work-card:hover{
  border-color:var(--mmw-red);
  box-shadow:0 22px 48px rgba(237,28,36,.22);
  transform:translateY(-6px);
}
.work-card:focus-visible{outline:3px solid var(--mmw-red);outline-offset:3px;}

/* the scrolling site screenshot */
.work-card__shot{
  position:absolute;inset:0;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:top center;
  transition:background-position 2.4s cubic-bezier(.25,.8,.3,1),transform .5s var(--ease);
  transform:scale(1.02);
}
.work-card:hover .work-card__shot{
  background-position:bottom center;
  transform:scale(1.02);
}

/* readability scrim — stronger, so the caption never fights the site text */
.work-card__shot::after{
  content:'';position:absolute;inset:auto 0 0;height:52%;
  background:linear-gradient(to top, rgba(6,7,9,.97) 0%, rgba(6,7,9,.88) 45%, rgba(6,7,9,0) 100%);
  pointer-events:none;
}

/* ---------- caption ---------- */
.work-card__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:22px 20px 20px;
  background:linear-gradient(to top, rgba(6,7,9,.96) 0%, rgba(6,7,9,.9) 60%, rgba(6,7,9,0) 100%);
}
.work-card__tag{
  display:block;font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:#9AA0A8;margin-bottom:8px;
  transition:color .3s var(--ease);
}
.work-card__title{
  font-family:var(--font-display);font-size:17px;font-weight:700;
  letter-spacing:.01em;color:var(--mmw-white);margin:0 0 8px;line-height:1.22;
}
.work-card__go{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mmw-red);
  opacity:0;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.work-card:hover .work-card__go{opacity:1;transform:none;}
.work-card:hover .work-card__tag{color:var(--mmw-white);}

/* corner arrow button */
.work-card__arrow{
  position:absolute;top:14px;right:14px;z-index:3;
  width:38px;height:38px;border-radius:50%;
  background:rgba(6,7,9,.62);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
  color:var(--mmw-white);font-size:15px;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.work-card:hover .work-card__arrow{
  background:var(--mmw-red);border-color:var(--mmw-red);transform:rotate(45deg);
}

/* ---------- the 6th cell: "more" ---------- */
.work-card--more{
  aspect-ratio:1 / 1.32;
  border:1px dashed rgba(255,255,255,.2);
  background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:26px;
}
.work-card--more:hover{border-color:var(--mmw-red);background:rgba(237,28,36,.06);box-shadow:none;}
.work-card--more__icon{
  width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  display:flex;align-items:center;justify-content:center;
  color:var(--mmw-white);font-size:22px;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.work-card--more:hover .work-card--more__icon{background:var(--mmw-red);border-color:var(--mmw-red);transform:rotate(90deg);}
.work-card--more__title{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--mmw-white);margin:0;}
.work-card--more__sub{font-size:14px;color:#8D929A;margin:0;line-height:1.55;}

/* ---------- view-all link ---------- */
.work__foot{
  display:flex;justify-content:center;margin-top:52px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .work__grid{grid-template-columns:repeat(2,1fr);gap:20px;}
}
@media (max-width:780px){
  .work__grid{grid-template-columns:repeat(2,1fr);gap:16px;}
  .work-card,.work-card--more{aspect-ratio:1 / 1.22;}
  .work-card__cap{padding:16px 15px 15px;}
  .work-card__title{font-size:16px;}
  .work-card__go{opacity:1;transform:none;font-size:11.5px;}
  .work-card__arrow{width:32px;height:32px;font-size:13px;top:10px;right:10px;}
}
@media (max-width:420px){
  .work__grid{grid-template-columns:1fr;gap:18px;}
  .work-card,.work-card--more{aspect-ratio:16 / 11;}
}

@media (max-width:640px){
  .work__foot{width:100%;}
  .work__foot .btn{
    white-space:normal !important;text-align:center;line-height:1.5;
    width:100% !important;min-width:0 !important;max-width:100% !important;
    padding-left:18px;padding-right:18px;
  }
}

/* ---------- the last cell: a full-width CTA bar under the grid ----------
   9 project cards fill 3 rows of 3; the CTA becomes a full-width bar
   rather than an orphan 10th cell. */
.work__grid .work-card--more{
  grid-column:1 / -1;
  aspect-ratio:auto;
  min-height:172px;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:28px;
  padding:34px 40px;
  text-align:left;
}
.work__grid .work-card--more__icon{flex:0 0 auto;}
.work__grid .work-card--more__sub{margin:0;}
.work__grid .work-card--more .work-card__go{margin-left:auto;}
@media (max-width:760px){
  .work__grid .work-card--more{flex-direction:column;align-items:flex-start;gap:16px;padding:28px 24px;}
  .work__grid .work-card--more .work-card__go{margin-left:0;}
}

/* ---------- the work-section footer: CTA + full-portfolio link ---------- */
.work__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:22px;margin-top:38px;
}
.work__foot-link{
  font-family:var(--font-body);font-size:15px;font-weight:600;
  letter-spacing:.02em;color:#A8ADB5;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.26);
  padding-bottom:2px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.work__foot-link:hover{color:var(--mmw-red);border-color:var(--mmw-red);}

/* ---------- "Also built" strip: the WEB APPS ----------
   Deliberately NOT a card. The grid above is a set of tall visual
   screenshots; an app is a tool, not a brochure, so it gets a quiet
   inline row instead of another thumbnail competing for attention.
   Same dark ink surface as the section, separated by a hairline
   rule so it reads as a footnote on the portfolio, not a 5th column. */

.work-apps{
  position:relative;z-index:2;
  margin-top:34px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.10);
}
.work-apps__head{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-bottom:6px;
}
.work-apps__label{
  font-family:var(--font-display);font-size:12px;font-weight:700;
  letter-spacing:.20em;text-transform:uppercase;color:var(--mmw-red);
}
.work-apps__kicker{
  font-family:var(--font-body);font-size:14px;color:#8D929A;
}

.work-apps__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:0 34px;
}
.work-apps__item{position:relative;}
/* hairline divider between inline items (not on the first) */
.work-apps__item + .work-apps__item::before{
  content:'';position:absolute;left:-18px;top:50%;transform:translateY(-50%);
  width:1px;height:22px;background:rgba(255,255,255,.14);
}

.work-apps__link{
  display:inline-flex;align-items:baseline;gap:9px;
  padding:9px 0;
  font-family:var(--font-body);text-decoration:none;
  color:var(--mmw-white);
  transition:color .25s var(--ease);
}
.work-apps__name{
  font-family:var(--font-display);font-size:16px;font-weight:700;
  letter-spacing:-.01em;
}
.work-apps__meta{
  font-size:13px;color:#8D929A;
  transition:color .25s var(--ease);
}
.work-apps__arrow{
  font-size:13px;color:var(--mmw-red);
  opacity:.65;
  transform:translate(0,0);
  transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.work-apps__link:hover{color:var(--mmw-red);}
.work-apps__link:hover .work-apps__meta{color:#B9BEC6;}
.work-apps__link:hover .work-apps__arrow{opacity:1;transform:translate(3px,-3px);}
.work-apps__link:focus-visible{outline:3px solid var(--mmw-red);outline-offset:3px;border-radius:4px;}

@media (max-width:760px){
  .work-apps{margin-top:26px;padding-top:20px;}
  .work-apps__list{display:block;}
  .work-apps__item + .work-apps__item{margin-top:4px;}
  .work-apps__item + .work-apps__item::before{
    content:none;
  }
  /* name + arrow stay on one line; the meta drops under the name */
  .work-apps__link{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:'name arrow' 'meta meta';
    align-items:center;
    gap:2px 8px;
    padding:11px 0;
  }
  .work-apps__name{grid-area:name;font-size:15.5px;}
  .work-apps__arrow{grid-area:arrow;align-self:center;}
  .work-apps__meta{grid-area:meta;font-size:12.5px;}
}