/* ==========================================================================
   oftalmolog-online.ru — styles.css (исправлено: кнопки по центру на ноуте,
   одинаковая ширина, перенос и центрирование на узких; цвет кнопок — коралловый)
   ========================================================================== */

/* === Токены темы === */
:root{
  --bg:#121212;
  --surface:#1e1e1e;
  --surface-2:#232323;
  --surface-3:#2a2a2a;
  --text:#e7eaee;
  --muted:#99a4ac;
  --brand:#2c3e50;
  --brand-2:#34495e;
  --accent:#bfe0ff;
  --divider:#2b2b2b;
  --radius:10px;
  --radius-lg:12px;
  --shadow:0 0 6px rgba(255,255,255,.05);
  --shadow-lg:0 8px 22px rgba(0,0,0,.35);
  --trans:.2s;
  --trans-fast:.08s;

  /* Кнопки */
  --coral:#FF6F61;      /* Living Coral близко */
  --coral-2:#e85b50;    /* hover/active */
  --coral-text:#ffffff;

  /* Единая ширина кнопок (под обе подписи) */
  --btn-width:320px;
  --btn-min-h:44px;
  --btn-pad-y:12px;
  --btn-pad-x:16px;
  --btn-gap:12px;
}

/* === База === */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; padding:0;
  font-family:Helvetica, Arial, sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{ color:var(--muted); font-weight:600; margin:0 0 .6rem }
p{ margin:0 0 .6rem }
strong{ color:var(--muted); font-weight:700 }
a{ color:var(--accent); text-decoration:none; transition:color var(--trans) ease }
a:hover, a:focus-visible{ color:#fff; outline:none }
:focus-visible{ outline:2px solid #6aa8ff; outline-offset:2px }

/* === Шапка === */
header{
  background:var(--surface);
  padding:16px 0 6px;
  margin:0 0 20px;
  box-shadow:0 8px 4px rgba(0,0,0,.1);
}
.header-flex-container{ max-width:800px; margin:0 auto 16px; padding:0 16px }
.header-container{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap }
.header-container .image-container{ width:48px; height:48px; flex:0 0 48px }
.header-container .image-container img{ width:100%; height:100%; display:block; border-radius:50%; object-fit:cover }
.text-container{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0 }
.header-title{ font-size:22px; line-height:1.2; color:#cbd6dd }
.header-subtitle{ font-size:14px; line-height:1.35; color:#9fb0ba }

/* === Секции страницы === */
main{ padding:10px 12px }
section{
  max-width:800px; margin:0 auto 24px;
  background:var(--surface);
  padding:22px 24px;
  border-radius:var(--radius);
  border:1px solid var(--divider);
  box-shadow:var(--shadow);
}
.section-header{
  background:var(--brand); color:#fff;
  padding:16px 20px;
  margin:-4px -24px 16px -24px;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:var(--shadow);
}
.section-header-left-text{ font-size:20px; line-height:1.35; font-weight:600 }

/* === Кнопки действий: одинаковая ширина, по центру === */
.button-container{
  display:flex;                 /* контейнер тянется на ширину секции */
  justify-content:center;       /* ЦЕНТРИРУЕМ кнопки по горизонтали */
  align-items:stretch;
  flex-wrap:wrap;               /* разрешаем перенос */
  gap:var(--btn-gap);
  margin:14px 0 6px;
  width:100%;
}

/* Кнопки якоря: одинаковая ширина и компактность */
.link-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--btn-width);       /* одинаковая ширина обеих кнопок на широком экране */
  min-height:var(--btn-min-h);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  white-space:nowrap;           /* не переносим номер/текст */
  text-align:center;
  background:var(--coral);
  color:var(--coral-text);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:background var(--trans) ease, transform var(--trans-fast) ease, box-shadow var(--trans) ease;
}
.link-button:hover, .link-button:focus-visible{
  background:var(--coral-2);
  transform:translateY(-1px);
  box-shadow:var(--shadow-lg);
}

/* === Видео (встраиваемые) === */
.video-container{
  position:relative; width:100%; padding-bottom:56.25%;
  border-radius:var(--radius); background:var(--surface-3);
  box-shadow:var(--shadow); overflow:hidden; margin:18px 0 8px;
}
.video-container iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* === Карточки/заметки (article) === */
.article{
  background:var(--surface-3);
  border:1px solid var(--divider);
  border-radius:var(--radius);
  padding:12px 14px;
  margin:0 0 12px;
  box-shadow:var(--shadow);
  transition:transform var(--trans-fast) ease, box-shadow var(--trans) ease, border-color var(--trans) ease;
}
.article:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:#3a3a3a }
.article h4{ margin:0 0 6px; color:#cbd6dd; font-weight:600 }
.article p{ margin:0; color:#aab8c2 }

/* === Фото-блоки === */
.image-box{
  background:var(--surface-3);
  border:1px solid var(--divider);
  border-radius:var(--radius);
  padding:0;
  margin:12px 0 16px;
  box-shadow:var(--shadow);
}
.image-box img{
  display:block;
  width:calc(100% - 8px);
  margin:4px;
  height:auto;
  border-radius:var(--radius-lg);
  object-fit:cover;
}

/* === Списки прикладные === */
.clinics-list{ list-style:none; margin:0; padding:0 }
.clinics-list li{ margin:0 0 12px 0; padding:0 }
.clinics-list li strong{ display:block; margin:0 0 6px 0 }

/* Общие карточки-советы */
.apps{ display:flex; flex-direction:column; gap:10px; margin:8px 0 4px }
.app{
  background:var(--surface-2);
  border:1px solid var(--divider);
  border-radius:var(--radius);
  padding:10px 12px;
  margin:0;
  box-shadow:var(--shadow);
}
.app h4{ margin:0 0 6px; color:#cfdae1; font-size:15px; font-weight:600 }
.app p{ margin:0 }
#reels .app{ min-height:auto }

/* === Контакты === */
#contacts .row{ display:flex; gap:12px; margin:6px 0 }
#contacts .label{ flex:1; color:#9fb0ba }
#contacts .value{ flex:2 }
#contacts a{ color:#e6f4ff; font-weight:600; border-bottom:1px dashed rgba(230,244,255,.25) }
#contacts a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.5) }

/* === Таблицы (опционально) === */
table{ width:100%; border-collapse:collapse }
th,td{ border:1px solid var(--divider); padding:10px; text-align:center; vertical-align:middle }
th{ background:var(--surface-3); color:#d7e1e8; font-weight:600 }
td{ color:#b8c4cc }
table a{ color:#cfe6ff }
table a:hover{ color:#fff }

/* === Подвал === */
footer{
  background:var(--brand);
  color:#fff;
  padding:18px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.05);
}

/* === Медиа/адаптив === */
@media (max-width:640px){
  .header-container{ gap:10px }
  .header-container .image-container{ width:40px; height:40px; flex-basis:40px }
  .header-title{ font-size:18px }
  .header-subtitle{ font-size:13px }

  section{ padding:18px 14px }
  .section-header{ padding:12px 14px; margin:-4px -14px 14px -14px }
  .section-header-left-text{ font-size:18px }

  .image-box img{ width:calc(100% - 8px); margin:4px; border-radius:10px }

  #contacts .row{ flex-direction:column; gap:2px }

  /* Узкие экраны: кнопки в столбик, ЦЕНТР по контейнеру */
  .button-container{ justify-content:center }
  .link-button{ width:100% }
}