@import './variables.css';

/* Container */
.container { width: var(--container-width); margin-inline: auto; }

/* Header */
.header { background: var(--color-background); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; }
.header__inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; }
.header__logo { font-weight: 800; font-size: var(--text-xl); color: var(--color-primary); text-decoration: none; }
.header__nav { display: flex; align-items: center; gap: var(--space-4); }
.header__link { text-decoration: none; font-size: var(--text-sm); font-weight: 500; color: var(--color-text); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.header__link:hover { background: var(--color-surface); }
.header__cta { background: var(--color-primary); color: #fff; padding: var(--space-2) var(--space-6); border-radius: var(--radius-md); font-weight: 700; }
.header__cta:hover { background: var(--color-primary-hover); }
.header__lang { background: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); font-size: 0.75rem; font-weight: 600; cursor: pointer; min-width: 36px; }
.header__burger { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; }

/* Hero */
.hero { padding: var(--space-24) 0; text-align: center; background: linear-gradient(135deg, #1e40af 0%, #0ea5e9 100%); color: #fff; }
.hero__title { font-size: var(--text-5xl); font-weight: 800; margin-bottom: var(--space-4); line-height: 1.1; }
.hero__subtitle { font-size: var(--text-lg); opacity: 0.9; max-width: 600px; margin: 0 auto var(--space-8); }
.hero__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
.hero__btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-4) var(--space-8); border-radius: var(--radius-xl); font-weight: 700; font-size: var(--text-base); text-decoration: none; min-height: 52px; transition: transform 0.2s; }
.hero__btn:hover { transform: translateY(-2px); }
.hero__btn--primary { background: #fff; color: var(--color-primary); }
.hero__btn--secondary { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); }

/* Section */
.section { padding: var(--space-16) 0; }
.section--alt { background: var(--color-surface); }
.section__title { font-size: var(--text-3xl); font-weight: 800; text-align: center; margin-bottom: var(--space-12); }

/* Cards grid */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-6); }
.card { background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; transition: box-shadow 0.2s; }
.card:hover { box-shadow: var(--shadow-lg); }
.card__img { aspect-ratio: 16/10; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--space-6); }
.card__title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-2); }
.card__text { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.card__btn { display: inline-flex; padding: var(--space-3) var(--space-6); background: var(--color-primary); color: #fff; border-radius: var(--radius-md); text-decoration: none; font-weight: 600; font-size: var(--text-sm); }
.card__btn:hover { background: var(--color-primary-hover); }

/* Announcements */
.announcement { background: var(--color-primary-light); border-left: 4px solid var(--color-primary); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.announcement__title { font-weight: 700; margin-bottom: var(--space-2); }

/* Footer */
.footer { background: var(--color-text); color: #e2e8f0; padding: var(--space-12) 0; }
.footer__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.footer__social { display: flex; gap: var(--space-4); }
.footer__social a { color: #94a3b8; text-decoration: none; font-size: var(--text-sm); text-transform: capitalize; }
.footer__social a:hover { color: #fff; }
.footer__copy { font-size: 0.75rem; color: #64748b; }
.footer__links a { color: #94a3b8; text-decoration: none; font-size: 0.75rem; }

/* Cookie banner */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-text); color: #e2e8f0; padding: var(--space-4); z-index: 999; display: none; }
.cookie-banner.active { display: block; }
.cookie-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.cookie-banner__text { font-size: var(--text-sm); flex: 1; }
.cookie-banner__actions { display: flex; gap: var(--space-2); }
.cookie-banner__btn { padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); border: none; cursor: pointer; font-weight: 600; font-size: var(--text-sm); font-family: var(--font-family); }
.cookie-banner__btn--accept { background: var(--color-primary); color: #fff; }
.cookie-banner__btn--settings { background: transparent; color: #e2e8f0; border: 1px solid #475569; }
.cookie-banner__btn--minimal { background: transparent; color: #94a3b8; }

/* Responsive */
@media (max-width: 768px) {
  .hero__title { font-size: var(--text-3xl); }
  .hero { padding: var(--space-12) 0; }
  .header__nav { display: none; }
  .header__burger { display: block; }
  .cards { grid-template-columns: 1fr; }
  .footer__inner { flex-direction: column; text-align: center; }
}
@media (max-width: 340px) {
  .hero__title { font-size: var(--text-2xl); }
  .hero__btn { width: 100%; }
}