/* ============================================================
   Handy Tradie 4 U — our-work.css
   "Our Work" video gallery (Instagram reel embeds).
   Requires base.css + service.css to be loaded first.
   ============================================================ */

/* extra top padding: the header logo overhangs into the hero, and there's no tall form here to push the copy down */
.work-hero{padding-top:104px}
.work-hero .svc-hero-copy{max-width:760px}
.work-hero .btn-ig{display:inline-flex;align-items:center;gap:10px;font-family:'Barlow',sans-serif;font-weight:800;font-size:15px;padding:13px 22px;border-radius:999px;background:var(--paper);color:var(--charcoal);border:2px solid var(--charcoal);transition:transform .18s ease}
.work-hero .btn-ig:hover{transform:translateY(-2px)}

.work-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 38px}
.work-filter{display:inline-flex;align-items:center;gap:8px;font-family:'Barlow',sans-serif;font-weight:800;font-size:14px;color:var(--charcoal);padding:9px 12px 9px 18px;border-radius:999px;border:2px solid var(--charcoal);background:var(--paper);cursor:pointer;transition:background .15s ease,color .15s ease}
.work-filter .count{min-width:24px;font-size:12px;line-height:20px;text-align:center;border-radius:999px;background:var(--cream);color:var(--charcoal)}
.work-filter:hover{background:var(--gold-wash)}
.work-filter[aria-pressed="true"]{background:var(--charcoal);color:#fff}
.work-filter[aria-pressed="true"] .count{background:var(--gold)}

.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start}
.work-card{background:var(--paper);border:2px solid var(--charcoal);border-radius:22px;overflow:hidden;box-shadow:0 2px 4px rgba(23,35,45,.05),0 14px 30px rgba(23,35,45,.1)}
.work-body{padding:18px 22px 16px;border-bottom:1.5px dashed var(--line)}
.work-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.work-tag{background:var(--gold-soft);color:var(--charcoal);border-radius:999px;padding:4px 11px;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.07em}
.work-card h3{font-size:20px;line-height:1.15;margin-bottom:6px}
.work-card p{color:var(--ink-soft);font-size:14.5px;line-height:1.55;font-weight:500}
.work-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-weight:800;font-size:13.5px;color:var(--orange);transition:gap .15s ease}
.work-link:hover{gap:10px}
.work-media{background:var(--cream)}
/* 640px is a placeholder until Instagram reports the embed's real height (see our-work.js) */
.work-media iframe{display:block;width:100%;height:640px;border:0;background:var(--cream)}

.work-more{text-align:center;margin-top:44px}
.work-more p{color:var(--ink-soft);font-size:16px;font-weight:600;margin-bottom:16px}

@media (max-width:1100px){
  .work-hero{padding-top:72px}
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media (max-width:760px){
  .work-hero{padding-top:40px}
}
@media (max-width:700px){
  .work-grid{grid-template-columns:minmax(0,1fr);max-width:460px;margin:0 auto}
  .work-filters{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-bottom:28px}
  .work-filter{flex-shrink:0}
}