/* =========================================================
   responsive.css - adaptive fixes for the home page.
   Loaded LAST in header.php. Remove the line to roll back.
   Breakpoints: 1199 (laptop/tablet landscape), 992, 640.
   ========================================================= */

/* ---------- Global: nothing wider than the screen ---------- */
html, body {
  overflow-x: clip;
}

/* ---------- Header: burger up to 1199px ---------- */
@media (max-width: 1279px) {
  .topbar__clock {
    display: none;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .header__menu {
    display: none;
  }
  .header__logo-tagline {
    display: none;
  }
  .header__burger {
    display: flex;
  }
  .header__mobile-panel {
    display: block;
  }
}

/* ---------- Projects ---------- */
.projects__note {
  height: auto;
}
.project-row {
  height: auto;
  min-height: 165px;
}
.project-row__title {
  max-width: 100%;
}

/* 993-1439: number + title on the left, text below title, button right */
@media (min-width: 993px) and (max-width: 1439px) {
  .projects__head {
    gap: 40px;
  }
  .projects__title {
    font-size: 64px;
  }
  .projects__note {
    padding-top: 20px;
  }
  .project-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "num title cta"
      "num desc  cta";
    column-gap: 24px;
    row-gap: 10px;
    align-items: start;
    padding: 28px 30px;
  }
  .project-row__num {
    grid-area: num;
    margin: 0;
    padding: 6px 0 0;
  }
  .project-row__title {
    grid-area: title;
    width: auto;
    font-size: 24px;
  }
  .project-row__desc {
    grid-area: desc;
    margin: 0;
    max-width: 760px;
  }
  .project-row__cta {
    grid-area: cta;
    align-self: center;
    margin-left: 16px;
  }
}

/* Tablet: button under the text, fixed size */
@media (min-width: 641px) and (max-width: 992px) {
  .project-row {
    padding: 24px;
  }
  .project-row__desc {
    margin-left: 0;
  }
  .project-row__cta {
    width: 227px;
    height: 72px;
  }
}

/* Phone: one clean card per project */
@media (max-width: 640px) {
  .project-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-height: 0;
    padding: 20px 16px;
  }
  .projects__list li {
    padding: 0;
  }
  .project-row__num {
    padding: 0;
    margin: 0;
  }
  .project-row__title {
    flex: none;
    width: auto;
    margin: 0;
  }
  .project-row__desc {
    flex: none;
    margin: 0;
  }
  .project-row__cta {
    flex: none;
    width: 100%;
    height: 64px;
    margin: 10px 0 0;
  }
}

/* ---------- Specialists ---------- */
.specialists__head,
.specialists__body {
  width: 100%;
  max-width: var(--container-max);
}
.specialist-row__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .specialists__title {
    font-size: 64px;
  }
  .specialists__media {
    width: 420px;
    height: 500px;
  }
  .specialists__list {
    padding-right: 460px;
  }
  .specialist-row__name {
    font-size: 30px;
  }
  .specialists__body {
    min-height: 560px;
  }
}

/* No hover on tablets: list full width, photo panel off */
@media (min-width: 641px) and (max-width: 1199px) {
  .specialists__title {
    font-size: 48px;
    line-height: 1.2;
  }
  .specialists__list {
    padding-right: 0;
  }
  .specialist-row__name {
    font-size: 26px;
  }
  .specialists__body {
    min-height: 0;
    padding-bottom: 60px;
  }
  .specialists__media {
    display: none;
  }
}

@media (max-width: 640px) {
  .specialists__head {
    padding-left: 0;
  }
  .specialists__body {
    padding: 20px 0;
  }
  .specialist-row {
    grid-template-columns: 95px minmax(0, 1fr);
    gap: 16px;
    height: auto;
    min-height: 64px;
  }
  .specialist-row__name {
    max-width: none;
    font-size: 18px;
  }
}

/* ---------- Footer ---------- */
.footer-contact-item__value {
  white-space: normal;
}
.footer-contact-item__value a {
  white-space: nowrap;
}
@media (min-width: 993px) and (max-width: 1279px) {
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 40px;
  }
  .footer__brand {
    grid-column: 1 / 3;
    border-bottom: 1px solid var(--color-divider);
    padding-bottom: 32px;
  }
  .footer__brand-desc {
    max-width: 100%;
  }
}