/* ============================================
   css/home.css — СТИЛИ ГЛАВНОЙ СТРАНИЦЫ
   ============================================ */

/* === ВИДЕОДНЕВНИКИ === */
.video-diaries {
  background: var(--color-bg-primary);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.video-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.2s;
  align-items: flex-start;
}

.video-item:last-child {
  border-bottom: none;
}

.video-item:hover {
  background: var(--color-bg-secondary);
  margin: 0 -8px;
  padding: 16px 8px;
  border-radius: 12px;
}

.video-thumb {
  flex-shrink: 0;
  width: 90px;
  height: 160px;
  background: var(--color-bg-secondary);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.video-thumb video,
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-info {
  flex: 1;
  min-width: 0;
}

.video-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.video-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--color-text-tertiary);
  flex-wrap: wrap;
}

.video-author {
  display: flex;
  align-items: center;
  gap: 6px;
}

.video-author-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.video-description {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.video-stats {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--color-text-tertiary);
  flex-wrap: wrap;
}

.video-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.video-item-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background 0.2s;
}

.play-button svg {
  margin-left: 2px;
}

.video-item:hover .play-button {
  background: rgba(0, 0, 0, 0.8);
}

.video-thumb::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s;
  pointer-events: none;
}

.video-item:hover .video-thumb::after {
  background: rgba(0, 0, 0, 0.1);
}

/* === АУДИОДНЕВНИКИ === */
.audio-diaries {
  background: var(--color-bg-primary);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-card);
  margin-top: 24px;
}

.audio-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.2s;
}

.audio-item:last-child {
  border-bottom: none;
}

.audio-item:hover {
  background: var(--color-bg-secondary);
  margin: 0 -8px;
  padding: 16px 8px;
  border-radius: 12px;
}

.audio-play-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-brand);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.2s, transform 0.15s;
}

.audio-play-btn:hover {
  background: var(--color-brand-hover);
  transform: scale(1.05);
}

.audio-play-btn:active {
  transform: scale(0.95);
}

.audio-info {
  flex: 1;
  min-width: 0;
}

.audio-author {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.audio-date {
  font-size: 13px;
  color: var(--color-text-quaternary);
  margin-bottom: 8px;
}

.audio-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 8px;
  line-height: 1.4;
}

.audio-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--color-text-tertiary);
  flex-wrap: wrap;
}

.audio-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.audio-duration {
  font-size: 13px;
  color: var(--color-text-quaternary);
}

/* === ТЕКСТОВЫЕ ДНЕВНИКИ === */
.blog-diaries {
  /* основные стили в инлайне, здесь переопределения */
}

.blog-diaries .video-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
}

.blog-diaries .video-item:last-child {
  border-bottom: none;
}

/* === ПСИХОЛОГИ === */
.psychologists-section {
  background: var(--color-bg-primary);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
  overflow: visible;
}

.psychologist-card {
  flex-shrink: 0;
  width: 120px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
  overflow: visible;
}

.psychologist-card a {
  text-decoration: none;
  color: inherit;
}

.psychologist-card:hover {
  transform: translateY(-4px);
}

.psychologist-avatar {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: visible;
  background: var(--color-bg-secondary);
  margin-bottom: 8px;
  box-shadow: var(--shadow-card);
}

.psychologist-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.psychologist-details {
  min-width: 0;
}

.psychologist-name {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
  color: inherit;
  text-decoration: none;
}

.psychologist-specialty {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-bottom: 2px;
}

.psychologist-rating {
  font-size: 11px;
  color: var(--color-brand);
}

/* ============================================
   АДАПТАЦИЯ: ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (до 360px)
   ============================================ */
@media (max-width: 360px) {
  .horizontal-scroll {
    margin-bottom: 16px;
    overflow: hidden;
    width: 100%;
  }

  .two-columns {
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    width: 100%;
  }

  .left-column,
  .right-column {
    width: 100%;
    flex: none;
  }

  .section-title {
    font-size: 14px;
  }

  .section-link {
    font-size: 10px;
  }

  .actors-horizontal {
    gap: 8px;
    padding: 4px 0;
  }

  .actor-card {
    width: 90px;
  }

  .actor-name {
    font-size: 10px;
  }

  .actor-role {
    font-size: 8px;
  }

  .video-diaries {
    padding: 12px;
  }

  .video-item {
    gap: 6px;
    padding: 8px 0;
  }

  .video-thumb {
    width: 60px;
    height: 90px;
    border-radius: 8px;
  }

  .video-thumb .play-button {
    width: 22px;
    height: 22px;
  }

  .video-thumb .play-button svg {
    width: 12px;
    height: 12px;
  }

  .video-title {
    font-size: 12px;
    margin-bottom: 3px;
  }

  .video-meta {
    gap: 6px;
    margin-bottom: 3px;
    font-size: 9px;
  }

  .video-author-avatar {
    width: 16px;
    height: 16px;
  }

  .video-description {
    font-size: 10px;
    margin-bottom: 3px;
    padding-bottom: 3px;
  }

  .video-stats {
    gap: 6px;
    font-size: 9px;
  }

  .video-stat svg {
    width: 10px;
    height: 10px;
  }

  .audio-diaries {
    padding: 12px;
    margin-top: 12px;
  }

  .audio-item {
    gap: 6px;
    padding: 8px 0;
  }

  .audio-play-btn {
    width: 30px;
    height: 30px;
  }

  .audio-play-btn svg {
    width: 12px;
    height: 12px;
  }

  .audio-author {
    font-size: 11px;
  }

  .audio-date {
    font-size: 9px;
  }

  .audio-title {
    font-size: 12px;
  }

  .audio-stats {
    gap: 6px;
    font-size: 9px;
  }

  .audio-stat svg {
    width: 10px;
    height: 10px;
  }

  .audio-duration {
    font-size: 9px;
  }

  .users-section,
  .psychologists-section {
    padding: 12px;
    margin-bottom: 12px;
  }

  .users-title {
    font-size: 13px;
  }

  .users-count {
    font-size: 9px;
  }

  .user-cards {
    gap: 8px;
  }

  .user-card {
    width: 70px;
  }

  .user-name {
    font-size: 9px;
  }

  .user-status,
  .user-stats {
    font-size: 7px;
  }

  .psychologist-card {
    width: 75px;
  }

  .psychologist-name {
    font-size: 9px;
  }

  .psychologist-specialty,
  .psychologist-rating {
    font-size: 7px;
  }

  .view-all-card {
    width: 35px;
  }

  .view-all-circle {
    width: 28px;
    height: 28px;
  }

  .view-all-arrow {
    width: 14px;
    height: 14px;
  }

  .view-all-label {
    font-size: 7px;
  }

  .quote-section {
    padding: 12px 8px;
    margin-bottom: 12px;
  }

  .quote-text {
    font-size: 12px;
  }

  .quote-author {
    font-size: 9px;
  }

  .scroll-btn {
    display: none;
  }

  .ds-seo-wrapper {
    padding: 0 8px;
  }

  .ds-seo-block {
    padding: 12px;
    font-size: 11px;
  }

  .ds-features-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ds-feature-card {
    padding: 10px;
  }

  .ds-feature-card h3 {
    font-size: 12px;
  }

  .ds-feature-card p {
    font-size: 10px;
  }

  .ds-seo-section h2 {
    font-size: 14px;
  }

  .ds-seo-section:first-child h2 {
    font-size: 16px;
  }

  .ds-seo-section p,
  .ds-seo-section ol li,
  .ds-seo-list li {
    font-size: 11px;
  }
}

/* ============================================
   АДАПТАЦИЯ: ТЕЛЕФОНЫ (361px - 480px)
   ============================================ */
@media (min-width: 361px) and (max-width: 480px) {
  .main-container {
    padding: 16px 12px;
  }

  .two-columns {
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
  }

  .left-column,
  .right-column {
    width: 100%;
    flex: none;
  }

  .horizontal-scroll {
    margin-bottom: 20px;
  }

  .section-title {
    font-size: 16px;
  }

  .section-link {
    font-size: 12px;
  }

  .actors-horizontal {
    gap: 12px;
  }

  .actor-card {
    width: 110px;
  }

  .actor-name {
    font-size: 12px;
  }

  .actor-role {
    font-size: 10px;
  }

  .video-diaries {
    padding: 16px;
  }

  .video-item {
    gap: 8px;
    padding: 10px 0;
  }

  .video-thumb {
    width: 70px;
    height: 110px;
  }

  .video-title {
    font-size: 14px;
  }

  .video-meta {
    font-size: 11px;
  }

  .video-description {
    font-size: 12px;
  }

  .video-stats {
    font-size: 11px;
  }

  .audio-diaries {
    padding: 16px;
    margin-top: 16px;
  }

  .audio-play-btn {
    width: 36px;
    height: 36px;
  }

  .audio-author {
    font-size: 13px;
  }

  .audio-date {
    font-size: 11px;
  }

  .audio-title {
    font-size: 14px;
  }

  .audio-stats {
    font-size: 11px;
  }

  .audio-duration {
    font-size: 11px;
  }

  .users-section,
  .psychologists-section {
    padding: 16px;
    margin-bottom: 16px;
  }

  .users-title {
    font-size: 15px;
  }

  .users-count {
    font-size: 11px;
  }

  .user-card {
    width: 90px;
  }

  .user-name {
    font-size: 11px;
  }

  .user-status,
  .user-stats {
    font-size: 9px;
  }

  .psychologist-card {
    width: 95px;
  }

  .psychologist-name {
    font-size: 11px;
  }

  .psychologist-specialty,
  .psychologist-rating {
    font-size: 9px;
  }

  .view-all-card {
    width: 45px;
  }

  .view-all-circle {
    width: 36px;
    height: 36px;
  }

  .view-all-label {
    font-size: 9px;
  }

  .quote-section {
    padding: 16px 12px;
  }

  .quote-text {
    font-size: 14px;
  }

  .quote-author {
    font-size: 11px;
  }

  .scroll-btn {
    display: none;
  }

  .ds-features-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   АДАПТАЦИЯ: ПЛАНШЕТЫ (481px - 768px)
   ============================================ */
@media (min-width: 481px) and (max-width: 768px) {
  .main-container {
    padding: 24px 20px;
  }

  .two-columns {
    flex-direction: row;
    gap: 20px;
    margin-top: 24px;
  }

  .left-column {
    flex: 1.2;
  }

  .right-column {
    flex: 0.8;
    min-width: 260px;
  }

  .horizontal-scroll {
    margin-bottom: 32px;
  }

  .section-title {
    font-size: 18px;
  }

  .section-link {
    font-size: 14px;
  }

  .actor-card {
    width: 130px;
  }

  .actor-name {
    font-size: 14px;
  }

  .actor-role {
    font-size: 12px;
  }

  .video-diaries {
    padding: 20px;
  }

  .video-item {
    gap: 12px;
    padding: 14px 0;
  }

  .video-thumb {
    width: 80px;
    height: 130px;
  }

  .video-title {
    font-size: 16px;
  }

  .video-meta {
    font-size: 12px;
  }

  .video-description {
    font-size: 13px;
  }

  .video-stats {
    font-size: 12px;
  }

  .audio-diaries {
    padding: 20px;
    margin-top: 20px;
  }

  .audio-play-btn {
    width: 42px;
    height: 42px;
  }

  .audio-author {
    font-size: 14px;
  }

  .audio-date {
    font-size: 12px;
  }

  .audio-title {
    font-size: 15px;
  }

  .audio-stats {
    font-size: 12px;
  }

  .audio-duration {
    font-size: 12px;
  }

  .users-section,
  .psychologists-section {
    padding: 20px;
    margin-bottom: 20px;
  }

  .users-title {
    font-size: 16px;
  }

  .users-count {
    font-size: 13px;
  }

  .user-card {
    width: 100px;
  }

  .user-name {
    font-size: 13px;
  }

  .user-status,
  .user-stats {
    font-size: 11px;
  }

  .psychologist-card {
    width: 110px;
  }

  .psychologist-name {
    font-size: 13px;
  }

  .psychologist-specialty,
  .psychologist-rating {
    font-size: 11px;
  }

  .view-all-card {
    width: 50px;
  }

  .view-all-circle {
    width: 40px;
    height: 40px;
  }

  .view-all-label {
    font-size: 11px;
  }

  .quote-section {
    padding: 24px 20px;
  }

  .quote-text {
    font-size: 16px;
  }

  .quote-author {
    font-size: 13px;
  }

  .ds-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}