/* ===== RESPONSIVE (auto-repair) ===== */
@media (max-width: 1024px) {
.home-hero {
min-height: 520px;
padding: 100px 24px 60px;
}
.hero-content h1 {
font-size: 2.5rem;
}
.intro-grid {
gap: 40px;
}
.intro-text h2 {
font-size: 1.75rem;
}
.timeline-card {
width: 42%;
padding: 24px;
}
.timeline-item {
margin-bottom: 36px;
}
.timeline-header {
margin: 0 auto 48px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.stat-number {
font-size: 2.25rem;
}
.articles-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.featured-article {
grid-template-columns: 1.1fr 1fr;
}
.featured-article .article-card-body {
padding: 28px;
}
.featured-article .article-card-body h3 {
font-size: 1.375rem;
}
.newsletter-content h2 {
font-size: 1.75rem;
}
}
@media (max-width: 768px) {
.home-hero {
min-height: 480px;
padding: 80px 16px 56px;
}
.hero-content h1 {
font-size: 1.875rem;
}
.hero-content p {
font-size: 1rem;
margin-bottom: 28px;
}
.hero-actions {
flex-direction: column;
align-items: center;
}
.hero-actions .btn {
width: 100%;
max-width: 320px;
min-width: auto;
}
.home-intro {
padding: 60px 16px;
}
.intro-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.intro-visual {
order: -1;
}
.intro-text h2 {
font-size: 1.5rem;
}
.timeline-section {
padding: 60px 16px;
}
.timeline-header {
margin: 0 auto 40px;
}
.timeline-header h2 {
font-size: 1.75rem;
}
.timeline-line {
left: 16px;
}
.timeline-item,
.timeline-item:nth-child(odd),
.timeline-item:nth-child(even) {
flex-direction: column;
padding-left: 48px;
margin-bottom: 32px;
}
.timeline-dot {
left: 16px;
top: 0;
transform: translateX(-50%);
}
.timeline-card {
width: 100%;
padding: 20px;
}
.timeline-item:nth-child(odd) .timeline-card,
.timeline-item:nth-child(even) .timeline-card {
margin-left: 0;
margin-right: 0;
}
.timeline-card h3 {
font-size: 1.125rem;
}
.timeline-card p {
font-size: 0.875rem;
}
.stats-section {
padding: 48px 16px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.stat-item {
padding: 16px;
}
.stat-number {
font-size: 2rem;
}
.stat-label {
font-size: 0.8125rem;
}
.articles-section {
padding: 60px 16px;
}
.articles-header {
margin: 0 auto 36px;
}
.articles-header h2 {
font-size: 1.75rem;
}
.articles-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.article-card-body {
padding: 20px;
}
.article-card-body h3 {
font-size: 1rem;
}
.article-card-body p {
font-size: 0.875rem;
}
.article-card-footer {
padding: 14px 20px;
}
.featured-article {
grid-template-columns: 1fr;
}
.featured-article .article-card-image {
aspect-ratio: 16/9;
}
.featured-article .article-card-body {
padding: 24px;
}
.featured-article .article-card-body h3 {
font-size: 1.25rem;
}
.featured-article .article-card-body p {
font-size: 0.9375rem;
}
.newsletter-section {
padding: 60px 16px;
}
.newsletter-content h2 {
font-size: 1.5rem;
}
.newsletter-content p {
font-size: 0.9375rem;
margin-bottom: 24px;
}
.newsletter-form {
flex-direction: column;
gap: 10px;
}
.newsletter-form input[type="email"] {
padding: 12px 16px;
}
.newsletter-form button {
width: 100%;
padding: 12px 20px;
}
}
@media (max-width: 480px) {
.home-hero {
min-height: 420px;
padding: 72px 12px 40px;
}
.hero-content h1 {
font-size: 1.5rem;
margin-bottom: 14px;
}
.hero-content p {
font-size: 0.9375rem;
margin-bottom: 24px;
}
.hero-actions .btn {
max-width: 280px;
}
.home-intro {
padding: 48px 12px;
}
.intro-text h2 {
font-size: 1.375rem;
}
.intro-text p {
font-size: 0.9375rem;
}
.timeline-section {
padding: 48px 12px;
}
.timeline-header h2 {
font-size: 1.5rem;
}
.timeline-header p {
font-size: 0.9375rem;
}
.timeline-container {
padding-left: 0;
}
.timeline-line {
left: 12px;
}
.timeline-item,
.timeline-item:nth-child(odd),
.timeline-item:nth-child(even) {
padding-left: 40px;
margin-bottom: 24px;
}
.timeline-dot {
left: 12px;
width: 16px;
height: 16px;
}
.timeline-card {
padding: 16px;
}
.timeline-card-icon {
width: 36px;
height: 36px;
margin-bottom: 12px;
}
.timeline-card-icon svg {
width: 18px;
height: 18px;
}
.timeline-card h3 {
font-size: 1rem;
margin-bottom: 6px;
}
.timeline-card p {
font-size: 0.8125rem;
}
.stats-section {
padding: 40px 12px;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.stat-item {
padding: 12px;
}
.stat-number {
font-size: 1.75rem;
margin-bottom: 4px;
}
.articles-section {
padding: 48px 12px;
}
.articles-header {
margin: 0 auto 28px;
}
.articles-header h2 {
font-size: 1.5rem;
}
.articles-header p {
font-size: 0.9375rem;
}
.articles-grid {
gap: 20px;
}
.article-card-image {
aspect-ratio: 16/9;
}
.article-card-body {
padding: 16px;
}
.article-card-meta {
font-size: 0.75rem;
gap: 8px;
margin-bottom: 8px;
}
.article-card-body h3 {
font-size: 0.9375rem;
margin-bottom: 8px;
}
.article-card-body p {
font-size: 0.8125rem;
line-height: 1.5;
}
.article-card-footer {
padding: 12px 16px;
font-size: 0.75rem;
}
.read-time svg {
width: 12px;
height: 12px;
}
.featured-article {
border-radius: 8px;
}
.featured-article .article-card-body {
padding: 16px;
}
.featured-article .article-card-body h3 {
font-size: 1.125rem;
margin-bottom: 8px;
}
.featured-article .article-card-body p {
font-size: 0.875rem;
}
.newsletter-section {
padding: 48px 12px;
}
.newsletter-content h2 {
font-size: 1.25rem;
margin-bottom: 8px;
}
.newsletter-content p {
font-size: 0.8125rem;
margin-bottom: 20px;
}
.newsletter-form input[type="email"] {
padding: 12px 14px;
font-size: 14px;
}
.newsletter-form button {
padding: 12px 16px;
font-size: 14px;
}
.newsletter-note {
font-size: 11px;
}
}