/* =========================================================
   SMDM — Find a Job
   ========================================================= */
:root{
  --line:#e9eef3;
  --azureish-white-soft:#f4fbfa;
}

/* ---------- Search ---------- */
.job-searchbar{ margin:28px 0 18px !important; }

.custom-search-bar{
  display:flex;
  gap:10px;
  align-items:center;
  width:100%;
}
.job-searchbar__inner,
.job-searchbar .wp-block-search__inside-wrapper{ max-width:unset; }

.job-searchbar__input,
.job-searchbar .wp-block-search__input{
  flex:1 1 340px;
  padding:.6rem .75rem;
  border:1px solid var(--line);
  border-radius:8px;
  box-sizing:border-box;
}

/* ---------- Wrapper ---------- */
.job-cards{
  display:grid;
  margin:24px 0;
  box-sizing:border-box;
}
.job-section{ margin:0 0 60px !important; }

/* ---------- Grid ---------- */
.job-grid{
  --row-h:220px;
  --gap:36px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-auto-rows:var(--row-h);
  grid-auto-flow:dense;
  gap:var(--gap);
}

/* ---------- Card ---------- */
.job-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  height:100%;
  padding:22px 44px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  box-sizing:border-box;
  overflow:visible;
}

/* Small field labels above Job Title / Employer / Description */
.job-card__field-label{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#868193;
  margin-bottom:2px;
}

/* Tighten headings under labels */
.job-card__title,
.job-card__org-name{ margin:0; }

.job-card__title{ color:var(--wp--preset--color--dark-cerulean); }
.job-card.size-full .job-card__title{ font-size:var(--wp--preset--font-size--large, 1.65rem); }
.job-card.size-half .job-card__title{ font-size:var(--wp--preset--font-size--large, 1.35rem); }
.job-card.size-quarter .job-card__title{ font-size:var(--wp--preset--font-size--medium, 1.1rem); }
.job-card.size-classified .job-card__title{ font-size:var(--wp--preset--font-size--small, .95rem); }

/* Slightly tighter padding on smaller tiers */
.job-card.size-quarter{ padding:18px 20px; }
.job-card.size-classified{ padding:14px 16px; }

/* ---------- Top area (title/employer/logo) ---------- */
.job-card__top{ margin-bottom:10px; }

.job-card.size-full .job-card__top,
.job-card.size-half .job-card__top{
  display:grid;
  grid-template-columns:7fr 3fr;
  grid-template-rows:auto auto;
  grid-template-areas:
    "title logo"
    "org   logo";
  column-gap:24px;
  align-items:flex-start;
}

.job-card.size-full .job-card__head,
.job-card.size-half .job-card__head{ grid-area:title; }

.job-card.size-full .job-card__org,
.job-card.size-half .job-card__org{ grid-area:org; }

.job-card__logo-wrap{
  grid-area:logo;
  display:flex;
  align-items:center;
  justify-content:center;
}

.job-card__logo{
  object-fit:contain;
  width:100%;
  max-width:100%;
  max-height:130px;
}

.job-card.size-quarter .job-card__top,
.job-card.size-classified .job-card__top{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
}

.job-card.size-quarter .job-card__logo{
  max-width:160px;
  max-height:72px;
}
.job-card.size-classified .job-card__logo-wrap{ display:none; }

/* ---------- Employer row ---------- */
.job-card__org{
  display:grid;
  grid-template-columns:5fr auto;
  align-items:center;
  gap:8px;
  margin-top:6px;
}
.job-card__org-name{
  font-weight:600;
  color:var(--quartz, #4B4657);
}
.job-card__org a{ text-decoration:none; }
.job-card__org a:hover{ text-decoration:underline; }

/* ---------- Description ---------- */
.job-card__desc{
  position:relative;
  margin:.4rem 0 .6rem;
  padding-top:10px;
  font-size:.95rem;
  line-height:1.55;
  color:var(--quartz, #4B4657);
}
.job-card__desc::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:var(--line);
}
.job-card__desc > :first-child{ margin-top:0; }
.job-card__desc > :last-child{ margin-bottom:0; }

.job-card:not(.size-full) .job-card__desc img{ display:none; }
.job-card.size-full .job-card__desc img{
  display:block;
  max-width:100%;
  height:auto;
}

/* Clamp the description text area */
.job-card_desc_innter{
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  white-space:normal;
}
.job-card.size-quarter .job-card_desc_innter{ -webkit-line-clamp:25; }
.job-card.size-half    .job-card_desc_innter{ -webkit-line-clamp:25; }
.job-card.size-full    .job-card_desc_innter{ -webkit-line-clamp:25; }

/* ---------- Footer ---------- */
.job-card__foot{
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.job-card__date{
  font-size:var(--wp--preset--font-size--small);
  color:var(--roman-silver, #868193);
}
.job-card__foot .wp-block-button{ margin:0; }

.job-card__view{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.5rem 1.4rem;
  border-radius:6px;
  text-decoration:none;
  white-space:nowrap;
}

/* ---------- Tier footprints ---------- */
.job-card.size-full{ grid-column:1 / -1; }
.job-card.size-half{ grid-column:span 2; }
.job-card.size-quarter,
.job-card.size-classified{ grid-column:span 1; }

/* ---------- Empty state ---------- */
.job-cards__empty{
  padding:16px;
  background:#fafafa;
  border:1px dashed var(--line);
  border-radius:8px;
}

/* ---------- Pager ---------- */
.job-cards__pager{ margin-top:16px; }
.job-cards__pager .pagination{
  display:flex;
  gap:8px;
  list-style:none;
  padding:0;
  margin:16px 0 0;
}
.job-cards__pager .pagination li a,
.job-cards__pager .pagination li span{
  display:inline-block;
  padding:.35rem .7rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  text-decoration:none;
}

/* =========================================================
   Modal
   ========================================================= */
.smdm-modal{ position:fixed; inset:0; z-index:9999; }
.smdm-modal[hidden]{ display:none !important; }
.smdm-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }

.smdm-modal__dialog{
  position:relative;
  margin:6vh auto 0;
  width:min(900px, calc(100vw - 40px));
  max-height:90vh;
  background:#fff;
  border-radius:10px;
  padding:20px 22px 16px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);

  display:grid;
  gap:10px 16px;

  /* IMPORTANT: right column auto so buttons don't wrap vertically */
  grid-template-columns:1fr auto;

  /* 4 rows: title/meta/desc/footer */
  grid-template-rows:auto auto minmax(0, 1fr) auto;

  /* Desktop: dates bottom-left + buttons bottom-right */
  grid-template-areas:
    "title  logo"
    "meta   logo"
    "desc   desc"
    "footL  actions";
}

.smdm-modal__close{
  position:absolute;
  top:8px; right:10px;
  background:none;
  border:0;
  cursor:pointer;
}

.smdm-modal__label{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#868193;
  margin:0 0 2px;
}

/* Logo (keep controlled even with auto column) */
.smdm-modal__logo{
  grid-area:logo;
  width:110px;
  height:110px;
  object-fit:contain;
  background:#fff;
  padding:6px;
  justify-self:end;
  align-self:start;
}

.smdm-modal__titleblock{ grid-area:title; }
#smdm-job-modal-title{ margin:0; }

.smdm-modal__meta{ grid-area:meta; }

/* Allow description area to shrink so inner scroller works */
.smdm-modal__descwrap{
  grid-area:desc;
  min-height:0;
}

/* Scroll lives here */
.smdm-modal__desc{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  min-height:0;
  max-height:100%;
  line-height:1.55;
  margin:0;
}

/* Footer left dates */
.smdm-modal__footer-left{
  grid-area:footL;
  display:flex;
  gap:18px;
  align-items:flex-end;
  flex-wrap:wrap;

  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.smdm-modal__footer-left .smdm-modal__metaitem{
  min-width:180px;
}

/* Actions bottom-right */
.smdm-modal__actions{
  grid-area:actions;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:flex-end;
  flex-wrap:nowrap; /* keep buttons on one line */

  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.smdm-modal__actions .wp-block-button{ margin:0; }
.smdm-modal__actions .wp-block-button__link{
  white-space:nowrap;
  min-width:120px;
  padding-left:18px;
  padding-right:18px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:980px){
  .job-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:640px){
  .job-grid{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    grid-auto-flow:row;
    gap:18px;
  }

  .job-card{
    grid-column:auto !important;
    grid-row-end:auto !important;
    height:auto;
    padding:16px 16px 18px;
  }

  .job-card.size-full,
  .job-card.size-half,
  .job-card.size-quarter,
  .job-card.size-classified{
    grid-column:auto !important;
  }

  .job-card.size-full .job-card__top,
  .job-card.size-half .job-card__top{
    display:block;
    text-align:center;
  }

  .job-card.size-full .job-card__logo-wrap,
  .job-card.size-half .job-card__logo-wrap{
    margin:0 auto 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    max-width:260px;
  }

  .job-card.size-full .job-card__logo,
  .job-card.size-half .job-card__logo{
    max-width:260px;
    max-height:90px;
  }

  .job-card__desc{
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid #e1dee8;
  }

  /* Modal: stack everything, footer becomes dates then buttons */
  .smdm-modal__dialog{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "logo"
      "title"
      "meta"
      "desc"
      "footL"
      "actions";
  }

  .smdm-modal__logo{
    width:90px;
    height:90px;
    justify-self:start;
  }

  .smdm-modal__footer-left,
  .smdm-modal__actions{
    margin-top:12px;
    padding-top:10px;
  }

  /* Optional: full width buttons on mobile */
  .smdm-modal__actions{
    justify-content:stretch;
  }
  .smdm-modal__actions .wp-block-button{
    flex:1 1 0;
  }
  .smdm-modal__actions .wp-block-button__link{
    width:100%;
    text-align:center;
  }

  .custom-search-bar{ flex-wrap:wrap; gap:10px; }

  .custom-search-bar > .job-searchbar__inner,
  .custom-search-bar > .wp-block-search__inside-wrapper{
    flex:0 0 100%;
    width:100%;
  }

  .custom-search-bar .job-searchbar__input,
  .custom-search-bar .wp-block-search__input{
    width:100%;
    max-width:none;
  }

  .custom-search-bar > .wp-block-button{
    flex:1 1 0;
    text-align:center;
  }

  .custom-search-bar > .wp-block-button button{ width:50%; }
  .custom-search-bar .wp-block-button__link{
    width:100%;
    text-align:center;
  }
}

/* ---------- Print ---------- */
@media print{
  .job-cards{ grid-template-columns:1fr !important; gap:12px; }
  .job-card{ box-shadow:none; border-color:#ccc; }
  .job-card__view,
  .job-cards__pager{ display:none !important; }
}