/* ==========================================================================
   Страница «О мастере» (/o-mastere). Большая часть секций переиспользует
   готовые классы главной (styles.css/home.css: .about__grid, .advantages,
   .process, .home-works__grid, .reviews, .home-faq) — здесь только то, чего
   нигде больше нет: заголовок первого экрана и сертификаты.
   ========================================================================== */

/* ---------- Первый экран — зеркало hero главной ----------
   Та же коробка (max-width/padding), та же пропорция колонок и тот же
   column-gap, что у #main .hero в home.css — только фото и текст
   поменялись местами (фото первое в разметке, значит слева). Строка
   фактов и кнопки — это и есть .hero__stats/.hero__cta из home.css,
   переиспользуются как есть (страница грузит home.css). */
.master-hero {
  max-width: 1360px;
  margin: 0 auto;
  padding: 88px 28px 96px;
}

.master-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  column-gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
/* Разметка отдаёт сперва фото, потом текст — переставляем визуально
   порядком, чтобы получилось точь-в-точь как в hero (текст слева,
   фото справа), не трогая HTML/JS. */
.master-hero__copy { order: 1; }
.master-hero__photo {
  order: 2;
  border-radius: var(--r-lg, 18px);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--line);
}
.master-hero__photo picture,
.master-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Текст — те же классы .hero__title/.hero__subtitle, что и на главной
   (стили едут из home.css), здесь только сама разметка страницы и фото.
   Единственная своя мелочь: курсив на цитате-девизе. */
.master-hero__quote { font-style: italic; }
.master-hero__copy .hero__subtitle:last-of-type { margin-bottom: 32px; }
/* hero__subtitle в home.css ограничен 460px (#main .hero__subtitle) —
   здесь это рассказ на несколько предложений, чуть шире. Нужен #main в
   селекторе, иначе проигрывает по специфичности исходному правилу. */
#main .master-hero__copy .hero__subtitle { max-width: 560px; }

/* ---------- Сертификаты и обучение ----------
   Карточки горизонтальные. Сами сертификаты разного формата (один снят
   вертикально, другой горизонтально), поэтому вписываем целиком (contain),
   а не обрезаем: у документа нельзя отрезать ни шапку, ни подпись. */
.master-certs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.certificate-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px rgba(35, 27, 27, 0.06);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.certificate-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.certificate-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  margin-bottom: 10px;
}

.certificate-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.certificate-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}

.certificate-card__year {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* Планшет — фото над текстом (тот же приём, что у hero: grid-template-columns
   схлопывается в 1fr). */
@media (min-width: 721px) and (max-width: 900px) {
  .master-hero__grid { grid-template-columns: 1fr; }
  .master-hero__photo { aspect-ratio: 4 / 3; }
}

/* Строка доверия под первым экраном — лежит вне сетки (см. o-mastere.html).
   Раньше render.js вставлял её ВНУТРЬ .master-hero__grid третьим ребёнком:
   из-за order (NAP:0, текст:1, фото:2) фото падало во второй ряд сетки. */
.master-hero > .delivery-nap {
  margin: 24px auto 0;
  text-align: center;
  color: var(--ink-soft);
}
.master-hero > .delivery-nap a { color: var(--accent-deep); }
/* Страховка: если NAP снова окажется внутри сетки — full-width нижним рядом. */
.master-hero__grid > .delivery-nap { grid-column: 1 / -1; order: 10; margin: 0; }

/* Телефон: фото остаётся (в отличие от hero главной) — просто сверху над
   текстом, как на планшете. */
@media (max-width: 720px) {
  .master-hero { padding: 0; }
  .master-hero__grid { display: block; }
  .master-hero__photo { aspect-ratio: 4 / 3; margin-bottom: 20px; }
  .master-hero__copy { padding: 0 20px; }
  .master-hero > .delivery-nap { padding: 16px 20px 0; }
  /* Сертификаты — по одному в ряд: два горизонтальных документа рядом на
     телефоне нечитаемы. */
  .master-certs__grid { grid-template-columns: 1fr; gap: 14px; }
}