/* ── Hero subtitle (job title line) ── */
/* The theme renders this as <h2> inside #hero at clamp(40px, 8vw, 60px),
   which is almost as large as the name in <h1>. This brings it to roughly
   half that, so it reads as a label beneath the name, not a second headline.
   !important is needed because the theme's index.css loads after this file. */
#hero h2 {
  font-size: clamp(15px, 1.8vw, 21px) !important;
  text-wrap: balance;               /* evens out line lengths so no single word is left alone */
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  opacity: 0.65;
  margin-bottom: 0.5rem;
}
/* Roles are split into spans by layouts/partials/sections/hero/index.html.
   Desktop: a role never breaks mid-phrase; lines break only after a "|".
   Phones: one role per line, separators hidden. */
#hero .hero-role {
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  #hero .hero-role {
    display: block;
    white-space: normal;
  }
  #hero .hero-sep {
    display: none;
  }
}

/* ── Section spacing ── */
/* The theme stacks Bootstrap py-5 (3rem) on each <section> and again on its
   inner row, and makes the hero fill the whole screen (min-height: 100vh).
   That left 160-430px of blank space between sections, so the page looked
   finished before the reader reached Experience or Projects. */
#hero {
  min-height: auto !important;
  padding-top: 6rem !important;   /* clears the sticky navbar */
  padding-bottom: 1rem !important;
}
#hero .hero-bottom-svg {
  display: none;
}
#about, #experience, #education, #projects, #achievements, #blogs, #contact {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
#about .row.py-5,
#experience .py-5,
#education .row.py-5 {
  padding-top: 1.5rem !important;
  padding-bottom: 1rem !important;
}

/* ── Compact Experience / Education blocks (layouts/partials/compact-section.html) ── */
.compact-section {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.compact-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  text-align: center;
  margin-top: 1rem;
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  background: var(--secondary-color);
  box-shadow: 0 8px 32px rgba(15, 80, 100, 0.08);
}
/* The theme's index.css forces `#experience *` transparent and styles every
   `#experience a` as an underlined text link, all !important. The id + class
   selectors below outrank those so both blocks look identical. */
#experience .compact-card {
  background-color: var(--secondary-color) !important;
}
#experience .compact-card a.btn::after {
  content: none;
}
.compact-names {
  font-size: 1.1rem;
  font-weight: 500;
}
.compact-name {
  white-space: nowrap;   /* wrap between names, never inside one */
}
.compact-sep {
  /* clear gap so each name reads as a separate organisation; the right margin is
     smaller because the template's trailing space (the line-break point) adds to it */
  margin: 0 0.6rem 0 0.9rem;
  font-size: 1.3em;
  line-height: 1;
  vertical-align: -0.05em;
  color: var(--primary-color);
  font-weight: 700;
  opacity: 0.7;
}
@media (max-width: 575.98px) {
  .compact-card {
    flex-direction: column;
  }
  /* Phones: one name per line, so wrapped lines never end in a stray separator */
  .compact-name {
    display: block;
    white-space: normal;
  }
  .compact-sep {
    display: none;
  }
}

/* ── "View full …" / "Back to home" buttons ── */
/* The theme only styles its education card button (index.css). This gives the
   compact-block buttons and the plain-page back button the same outlined look. */
.compact-card a.btn,
#experience .compact-card a.btn,
#single a.btn {
  opacity: 0.9;
  border: 1px solid var(--primary-color) !important;
  color: var(--text-color) !important;
  border-radius: .75rem;
  box-shadow: none;
}
.compact-card a.btn:hover,
#single a.btn:hover {
  opacity: 0.8;
}

/* ── Blog section on the homepage (layouts/partials/sections/blogs.html) ── */
/* The theme styles recent-post cards only inside <footer> (footer.css). These
   repeat those rules for the homepage #blogs section. */
#blogs a { text-decoration: none; }
#blogs a h5 { color: var(--text-color) !important; }
#blogs .card {
  background-color: var(--secondary-color) !important;
  border-radius: .75rem;
  overflow: hidden;
  border: none;
}
#blogs .card:hover {
  transition: all 0.3s ease-out;
  box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
}
#blogs .card-text * { background-color: var(--secondary-color) !important; }
#blogs .card-footer {
  background-color: var(--background-color) !important;
  padding: .8em .7em;
  border: 1px solid var(--secondary-color);
}
#blogs .card-footer a {
  color: var(--text-link-color) !important;
  border-color: var(--primary-color) !important;
  transition: none;
  background-color: var(--background-color) !important;
}
#blogs .card-footer a:hover { color: var(--primary-color) !important; opacity: 0.8; }
#blogs .card-footer a:focus { box-shadow: none !important; }
#blogs .card > .card-header {
  padding: 0 !important;
  border: none !important;
  background-color: var(--secondary-color) !important;
}
#blogs .card > .card-header .card-img-top {
  width: 100%;
  height: 250px !important;
  object-fit: cover;
  background-color: transparent !important;
}
/* Same image frame on every project card so badges and titles line up;
   contain (not cover) so diagrams are never cropped */
#projects .card .card-head .card-img-top {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background-color: #fff;
}
#blogs > .text-center a.btn,
#projects > .container > .text-center a.btn,
.all-projects-page > .text-center a.btn {
  opacity: 0.9;
  border: 1px solid var(--primary-color) !important;
  color: var(--text-color) !important;
  border-radius: .75rem;
  box-shadow: none;
}
#blogs > .text-center a.btn:hover,
#projects > .container > .text-center a.btn:hover,
.all-projects-page > .text-center a.btn:hover { opacity: 0.8; }