/*!
 * Copyright (c) 2024-2026 STMicroelectronics.
 * All rights reserved.
 * This software is licensed under terms that can be found in the LICENSE file
 * in the root directory of this software component.
 * If no LICENSE file comes with this software, it is provided AS-IS.
 * SPDX-License-Identifier: SLA0044
 */

/**
 * Last Updated Block Styling
 *
 * Displays page last updated information with responsive design
 * supporting both light and dark themes.
 */

.sy-last-updated {
  margin-top: 3rem;
  margin-bottom: 2rem;
  padding: 1rem 1.5rem;
  border-left: 0.25rem solid var(--sy-c-primary, #3b82f6);
  background-color: var(--sy-c-bg-soft, #f8fafc);
  border-radius: 0.5rem;
  /* No max-width needed - naturally constrained by parent container */
  /* - default/compact: inside max-w-6xl div (72rem) */
  /* - layout.html (simple/landing): inside sy-content (64rem) */
  /* - large_read_area: inside large-read-inner (120rem max) */
}

.sy-last-updated-content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.sy-last-updated-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--sy-c-primary, #3b82f6);
}

.sy-last-updated-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.sy-last-updated-main {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.sy-last-updated-label {
  font-weight: 600;
  color: var(--sy-c-text-1, #1e293b);
  font-size: 0.875rem;
}

.sy-last-updated-date {
  color: var(--sy-c-text-2, #475569);
  font-size: 0.875rem;
  font-family: var(--sy-font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace);
}

.sy-last-updated-description {
  color: var(--sy-c-text-2, #475569);
  font-size: 0.875rem;
  font-style: italic;
}

/* Dark theme support */
.dark .sy-last-updated {
  background-color: var(--sy-c-bg-soft-dark, #1e293b);
  border-left-color: var(--sy-c-primary-dark, #60a5fa);
}

.dark .sy-last-updated-icon {
  color: var(--sy-c-primary-dark, #60a5fa);
}

.dark .sy-last-updated-label {
  color: var(--sy-c-text-1-dark, #f1f5f9);
}

.dark .sy-last-updated-date,
.dark .sy-last-updated-description {
  color: var(--sy-c-text-2-dark, #cbd5e1);
}

/* Responsive design */
@media (max-width: 768px) {
  .sy-last-updated {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    padding: 0.875rem 1rem;
  }

  .sy-last-updated-content {
    gap: 0.5rem;
  }

  .sy-last-updated-icon {
    width: 1rem;
    height: 1rem;
  }
}

@media (max-width: 480px) {
  .sy-last-updated {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-radius: 0;
  }
}