/* =========================================================================
   Article hero (.art-hero)
   Extracted from job-search-toolkit/index.css so resume-template pages can
   use the same hero without pulling in that file's bare h1/h2/p selectors,
   which would restyle the whole page.

   Loaded by: job-search-toolkit/index.css (@import, so article pages need no
   markup change) and directly by resume-template pages.
   ========================================================================= */

/* =====================================================================
   ARTICLE HERO
   Homepage hero language (kicker, DM Sans headline, blue CTA, personal
   byline, ratings strip) adapted for an article: a centred breadcrumb
   strip on top, an author and date line with icons, and an
   illustration in place of the resume carousel.
   ===================================================================== */
.art-hero {
  --art-blue: #1a73e8;
  --art-blue-hover: #1765cc;
  --art-ink: #0f172a;
  --art-grey: #5f6368;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* the gradient runs across the whole hero, breadcrumbs included */
  background: linear-gradient(180deg, #eef4ff 0%, #f5f9ff 45%, #ffffff 100%);
  padding: clamp(22px, 2.6vw, 34px) 24px clamp(16px, 1.8vw, 24px);
  /* main.css styles the bare `section` element (display:flex; margin:2rem auto;
     height:calc(100vh - 150px) in one breakpoint). Left alone that margin puts a
     white band between the navbar and this hero, so reset all of it. */
  display: block;
  margin: 0;
  width: 100%;
  height: auto;
  gap: 0;
}

/* ---- breadcrumbs: centred strip above the grid.
   IMPORTANT: main.css styles the bare `nav` element as the fixed site
   navbar (position:fixed; top:0; z-index:9999). Any other <nav> on the
   page inherits that and covers the real navbar, so every property of
   it has to be reset here. */
.art-hero nav.art-crumbs {
  position: static;
  top: auto;
  z-index: auto;
  height: auto;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto clamp(18px, 2.6vw, 34px);
  padding: 0;
  background: none;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--art-grey);
}

.art-hero .art-crumbs a {
  color: var(--art-grey);
  text-decoration: none;
  border-bottom: 1px solid #d7dbe0;
}

.art-hero .art-crumbs a:hover { color: var(--art-blue); border-bottom-color: var(--art-blue); }
.art-hero .art-crumbs__sep { color: #c4c7cb; }
.art-hero .art-crumbs__current { color: #1f2125; font-weight: 700; }

.art-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(28px, 4.5vw, 64px);
  max-width: 1200px;
  margin-inline: auto;
}

.art-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
  min-width: 0;
}

.art-hero h1 {
  margin: 0;
  color: var(--art-ink);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: left;
}

/* A two-part headline: the keyword phrase carries the weight, the question
   after it steps down so the pair reads as a title and its subtitle rather
   than as one long 800-weight block.
   main.css paints every `h1 span` with a blue gradient text fill, so the
   background, the clip and the fill colour all have to be unset here or the
   second line comes out blue. */
.art-hero__h1-alt {
  display: inline;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: inherit;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.art-hero__blurb {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(16.5px, 1.35vw, 20px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--art-grey);
}

/* CTA row */
.art-hero__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 0.35rem;
}

.art-hero__btn {
  display: inline-block;
  padding: 17px 34px;
  border-radius: 12px;
  background: var(--art-blue);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(26, 115, 232, .28), 0 10px 22px -6px rgba(26, 115, 232, .45);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.art-hero__btn:hover {
  background: var(--art-blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(26, 115, 232, .3), 0 14px 28px -6px rgba(26, 115, 232, .5);
}

.art-hero__btn:active { transform: translateY(0); }
.art-hero__btn:focus-visible { outline: 3px solid var(--art-blue); outline-offset: 3px; }

.art-hero__byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--art-grey);
}

.art-hero__byline img {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e8eaed;
}

.art-hero__byline a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: #c4c7cb;
}

.art-hero__byline a:hover { color: var(--art-blue); text-decoration-color: var(--art-blue); }

/* author / role / date / read time: one centred line at the foot of the hero */
.art-hero__meta {
  display: flex;
  /* Wraps only when the row genuinely does not fit. nowrap held it on one
     line down to the 600px breakpoint, so every width in between pushed the
     last item past the viewport and put the page into horizontal scroll. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  width: 100%;
  max-width: 1200px;
  margin: clamp(26px, 3.4vw, 44px) auto 0;
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid #e4ebf7;
  font-size: 13.5px;
  color: var(--art-grey);
}

.art-hero__metaitem { display: inline-flex; align-items: center; gap: 7px; }
.art-hero__meta .art-hero__author { font-weight: 600; color: #3c4043; }

.art-hero__ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: block;
}

/* LinkedIn badge in front of the author name */
.art-hero__li {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 50%;
  line-height: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}

.art-hero__li svg { width: 19px; height: 19px; display: block; border-radius: 50%; }
.art-hero__li:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(10, 102, 194, .35); }
.art-hero__li:focus-visible { outline: 2px solid #0A66C2; outline-offset: 2px; }

/* ratings strip */
.art-hero__creds { display: flex; align-items: center; gap: 14px; margin-top: 0.4rem; }
.art-cred { display: inline-flex; align-items: center; gap: 6px; }
.art-cred__logo--fiverr { width: 58px; height: auto; }
.art-cred__logo--google { width: 70px; height: auto; }
.art-cred__star { width: 14px; height: 14px; display: block; }

.art-cred__score {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #404145;
}

.art-cred__sep { width: 1px; height: 18px; background: #dadce0; }

/* illustration */
.art-hero__media { display: flex; justify-content: center; min-width: 0; }
.art-ill { width: 100%; max-width: 540px; height: auto; display: block; }

@media (max-width: 900px) {
  /* Stacked order: headline, blurb, illustration, then the CTA and the
     credentials. The illustration is a grid item and the copy lives inside
     .art-hero__text, so the text wrapper is dissolved with display:contents
     and every piece ordered directly on the one flex column. */
  .art-hero__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .art-hero__text { display: contents; }
  .art-hero h1 { order: 1; text-align: center; }
  /* Centred and ragged reads worse than centred and even. `pretty` stops the
     one-word last line, and the author's line break belongs to the desktop
     two-column hero: kept on a phone it strands "photos." on a line of its
     own. */
  .art-hero__blurb {
    order: 2;
    text-align: center;
    margin-inline: auto;
    text-wrap: pretty;
  }

  .art-hero__blurb br { display: none; }
  .art-hero__media { order: 3; }
  .art-hero__cta { order: 4; justify-content: center; width: 100%; }
  .art-hero__creds { order: 5; justify-content: center; margin-top: 0; }
  .art-hero__byline { justify-content: center; text-align: center; }
  .art-ill { max-width: 330px; }
}

@media (max-width: 600px) {
  .art-hero { padding: 12px 18px 18px; }
  /* Tighter stack so the CTA, the byline and the review scores land in the
     first screen rather than a scroll below it. */
  .art-hero__grid { gap: 16px; }
  .art-hero h1 { margin-bottom: 0; }
  .art-hero nav.art-crumbs { font-size: 12.5px; gap: 6px; }
  .art-hero h1 { font-size: clamp(1.65rem, 7.4vw, 2.1rem); }
  .art-hero__btn { width: 100%; text-align: center; padding: 16px 24px; }
  .art-hero__cta { width: 100%; }
  /* the button goes full width here, so a left-aligned byline under it
     reads as detached from the CTA it belongs to */
  .art-hero__byline { justify-content: center; text-align: center; }
  .art-hero__meta { flex-wrap: wrap; white-space: normal; gap: 8px 16px; }
  .art-ill { max-width: 280px; }
}