/* NearMe's parts of Foreshore's site: job cards ("Recent jobs in <suburb>"), the home page's
   recent work, and the quote form's states. Built only on Nick's tokens in site.css, so it reads
   as his design rather than a new one.

   The site is light only (site.css explains why), so the two tokens below are fixed. */
:root{
  --nm-heading:var(--harbour);
  --nm-link:var(--foreshore);
}

/* Nick's eyebrow colour (--foreshore). */
.jobs-strip .section-eyebrow,.recent-work .section-eyebrow{color:var(--nm-link);}

/* ---------- RECENT JOBS ON A SUBURB PAGE ---------- */
.jobs-strip{padding-top:0;scroll-margin-top:90px;}
.jobs-strip h2{color:var(--nm-heading);}
.jobs-strip .section-head{margin-bottom:22px;}
.job-list{display:grid;gap:14px;}

.job-card{background:var(--white);border:1px solid rgba(16,47,61,.08);border-radius:var(--radius);overflow:hidden;}
.job-card[open]{box-shadow:0 4px 18px rgba(16,47,61,.08);}
.job-card-summary{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:center;padding:14px;cursor:pointer;list-style:none;}
.job-card-summary::-webkit-details-marker{display:none;}
.job-card-summary:focus-visible{outline:2px solid var(--nm-link);outline-offset:-2px;border-radius:var(--radius);}
.job-thumb{display:block;width:140px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--paper);}
.job-thumb img,.job-thumb video{width:100%;height:100%;object-fit:cover;display:block;}
.job-thumb-empty{display:block;width:100%;height:100%;background:var(--seaglass);opacity:.35;}
.job-meta{display:block;min-width:0;}
.job-date{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--slate);}
.job-title{font-size:17px;line-height:1.3;font-weight:700;color:var(--nm-heading);margin:4px 0 6px;overflow-wrap:anywhere;}
.job-preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;color:var(--slate);}
.job-more{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:700;color:var(--nm-link);}
.job-card[open] .job-more{display:none;}

.job-body{padding:2px 18px 20px;border-top:1px solid rgba(16,47,61,.08);}
.job-body-text{max-width:72ch;}
.job-body-text p{margin:14px 0 0;font-size:15px;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere;}
.job-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:18px;}
/* height:auto here, not left to site.css: the 480x360 attributes are only the box's shape. */
.job-gallery img,.job-gallery video{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:10px;background:var(--paper);}
.job-gallery img{object-fit:cover;}
.job-gallery video{object-fit:contain;background:var(--harbour);}

@media (max-width:640px){
  .job-card-summary{grid-template-columns:96px 1fr;gap:12px;padding:10px;}
  .job-thumb{width:96px;}
  .job-title{font-size:15.5px;}
  .job-preview{font-size:13.5px;}
  .job-body{padding:2px 14px 16px;}
}

/* More than five jobs: the rest behind one button, Nick's outline button. */
.jobs-more{margin-top:14px;}
.jobs-more > summary{display:inline-flex;align-items:center;padding:11px 22px;border-radius:999px;border:2px solid var(--nm-heading);color:var(--nm-heading);font-weight:700;font-size:14.5px;cursor:pointer;list-style:none;}
.jobs-more > summary::-webkit-details-marker{display:none;}
.jobs-more > summary:focus-visible{outline:2px solid var(--nm-link);outline-offset:2px;}
.jobs-more[open] > summary{margin-bottom:14px;}

/* ---------- RECENT WORK ON THE HOME PAGE ---------- */
.recent-work{margin-top:24px;}
.recent-work-list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
@media (max-width:640px){.recent-work-list{grid-template-columns:1fr;}}
.recent-work-item{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;height:100%;padding:10px;background:var(--white);border:1px solid rgba(16,47,61,.08);border-radius:var(--radius);}
.recent-work-item:hover{border-color:var(--seaglass);}
.recent-work-item:focus-visible{outline:2px solid var(--nm-link);outline-offset:2px;}
.recent-work-thumb{display:block;width:64px;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--paper);}
.recent-work-thumb img,.recent-work-thumb video{width:100%;height:100%;object-fit:cover;display:block;}
.recent-work-text{display:block;min-width:0;}
.recent-work-where{display:block;font-size:12.5px;font-weight:600;color:var(--slate);}
.recent-work-title{display:block;margin-top:2px;font-size:15px;line-height:1.3;font-weight:700;color:var(--nm-heading);overflow-wrap:anywhere;}

/* ---------- QUOTE FORM ----------
   Two classes deep on purpose: Nick's `.card p` would otherwise win and turn the message grey. */
.quote-form button[disabled]{opacity:.65;cursor:progress;}
/* Sand and harbour: readable, about 8.6:1. */
.quote-form .quote-form-error{margin:16px 0 0;padding:12px 14px;border-radius:8px;background:var(--sand);color:var(--harbour);font-size:14.5px;font-weight:600;}
.quote-form .quote-form-error[hidden]{display:none;}
.quote-form .quote-form-error a{color:var(--harbour);text-decoration:underline;white-space:nowrap;}
.card .quote-call a.more{color:var(--nm-link);}