/* ═══════════════════════════════════════
   TOPMEDAL.CH — City pages stylesheet
   style-cities.css
═══════════════════════════════════════ */
:root {
  --navy:      #0d1b2e;
  --navy-mid:  #162840;
  --gold:      #c8973a;
  --gold-l:    #e2b45e;
  --cream:     #faf7f2;
  --white:     #ffffff;
  --text:      #0d1b2e;
  --text-mid:  #3a4f66;
  --border:    rgba(200,151,58,0.25);
  --font-d: 'Cormorant Garamond', serif;
  --font-b: 'DM Sans', sans-serif;
  --r: 4px;
  --sg: 0 8px 40px rgba(200,151,58,0.2);
  --sd: 0 20px 60px rgba(13,27,46,0.2);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-b); background: var(--cream); color: var(--text); line-height: 1.65; overflow-x: hidden; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
a { color: var(--gold); }
a:hover { color: var(--gold-l); }

/* HEADER */
header { background: var(--navy); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: 1180px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-icon { width: 38px; height: 38px; background: linear-gradient(135deg, var(--gold), var(--gold-l)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.logo-text strong { font-family: var(--font-d); font-size: 20px; font-weight: 700; color: #fff; display: block; line-height: 1; }
.logo-text span { font-size: 10px; letter-spacing: 0.1em; color: var(--gold); }
nav { display: flex; align-items: center; gap: 20px; }
nav a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.25s; }
nav a:hover { color: var(--gold-l); }
.nav-cta { background: var(--gold); color: var(--navy) !important; padding: 8px 18px; border-radius: var(--r); font-weight: 600 !important; }
.nav-cta:hover { background: var(--gold-l) !important; }

/* BREADCRUMB */
.breadcrumb { background: var(--navy-mid); padding: 10px 0; }
.breadcrumb .container { font-size: 13px; color: rgba(255,255,255,0.5); }
.breadcrumb a { color: rgba(255,255,255,0.5); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-l); }
.breadcrumb span { color: var(--gold-l); }

/* HERO */
.hero { background: var(--navy); padding: 70px 0; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, rgba(200,151,58,0.12), transparent 60%); pointer-events: none; }
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; position: relative; z-index: 1; }
.hero-badge { display: inline-block; background: rgba(200,151,58,0.15); border: 1px solid var(--border); padding: 5px 14px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-l); margin-bottom: 20px; }
.hero-content h1 { font-family: var(--font-d); font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 700; line-height: 1.1; color: #fff; margin-bottom: 20px; }
.hero-content h1 em { font-style: italic; color: var(--gold-l); display: block; }
.hero-desc { font-size: 16px; color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: 32px; max-width: 460px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-l)); color: var(--navy); padding: 13px 30px; border-radius: var(--r); font-weight: 600; font-size: 14px; text-decoration: none; transition: transform 0.25s, box-shadow 0.25s; box-shadow: var(--sg); display: inline-block; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(200,151,58,0.35); color: var(--navy); }
.btn-outline { border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 13px 26px; border-radius: var(--r); font-size: 14px; text-decoration: none; transition: 0.25s; display: inline-block; }
.btn-outline:hover { border-color: var(--gold); color: var(--gold-l); }
.hero-stats { display: flex; gap: 32px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); }
.stat-num { font-family: var(--font-d); font-size: 2rem; font-weight: 700; color: var(--gold-l); display: block; line-height: 1; }
.stat-label { font-size: 11px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; display: block; }
.hero-visual { display: flex; justify-content: center; align-items: center; }
.medal-showcase { width: 300px; height: 300px; position: relative; display: flex; align-items: center; justify-content: center; }
.medal-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(200,151,58,0.2); animation: ring-spin 22s linear infinite; width: 280px; height: 280px; }
.medal-ring.r2 { width: 220px; height: 220px; animation-direction: reverse; animation-duration: 16s; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.medal-center { width: 160px; height: 160px; background: linear-gradient(135deg, #c8973a, #e8c06a 40%, #b07820 70%, #d4a040); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px rgba(200,151,58,0.15), 0 0 0 12px rgba(200,151,58,0.07), var(--sg); animation: medal-float 4s ease-in-out infinite; position: relative; z-index: 2; overflow: hidden; }
.medal-center img { width: 130px; height: 130px; object-fit: contain; border-radius: 50%; }
@keyframes medal-float { 0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.04) rotate(2deg)} }

/* SEO TEXT SECTION */
.seo-section { padding: 80px 0; background: var(--white); }
.seo-section h2 { font-family: var(--font-d); font-size: clamp(1.7rem, 2.5vw, 2.4rem); font-weight: 700; color: var(--navy); margin-bottom: 32px; border-left: 4px solid var(--gold); padding-left: 20px; }
.seo-text p { font-size: 16px; color: var(--text-mid); line-height: 1.8; margin-bottom: 18px; max-width: 800px; }
.seo-text h3 { font-family: var(--font-d); font-size: 1.4rem; font-weight: 600; color: var(--navy); margin: 32px 0 14px; }
.seo-text a { color: var(--gold); font-weight: 500; }
.seo-text strong { color: var(--navy); }

/* PRODUCTS */
.products-section { padding: 80px 0; background: var(--cream); }
.section-title { font-family: var(--font-d); font-size: clamp(1.7rem, 2.5vw, 2.4rem); font-weight: 700; color: var(--navy); margin-bottom: 40px; text-align: center; }
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
.prod-card { background: var(--white); border: 1px solid rgba(13,27,46,0.09); border-radius: 8px; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.prod-card:hover { transform: translateY(-5px); box-shadow: var(--sd); border-color: var(--gold); }
.prod-img { width: 100%; height: 160px; overflow: hidden; background: linear-gradient(135deg,#f5f0e8,#ede5d5); }
.prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.prod-card:hover .prod-img img { transform: scale(1.06); }
.prod-body { padding: 18px 20px 20px; }
.prod-ref { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.prod-name { font-family: var(--font-d); font-size: 1.05rem; font-weight: 600; color: var(--navy); margin-bottom: 10px; line-height: 1.3; }
.prod-price { font-family: var(--font-d); font-size: 1.2rem; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.prod-btn { display: block; background: var(--navy); color: #fff; text-align: center; padding: 10px; border-radius: var(--r); font-size: 13px; font-weight: 600; text-decoration: none; transition: background 0.25s; }
.prod-btn:hover { background: var(--gold); color: var(--navy); }
.cta-center { text-align: center; }
.btn-primary-lg { background: linear-gradient(135deg, var(--gold), var(--gold-l)); color: var(--navy); padding: 16px 40px; border-radius: var(--r); font-weight: 600; font-size: 15px; text-decoration: none; transition: transform 0.25s, box-shadow 0.25s; box-shadow: var(--sg); display: inline-block; }
.btn-primary-lg:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(200,151,58,0.35); color: var(--navy); }

/* CITIES */
.cities-section { padding: 60px 0; background: var(--navy); }
.cities-title { font-family: var(--font-d); font-size: 1.8rem; font-weight: 600; color: var(--white); margin-bottom: 28px; text-align: center; }
.cities-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cities-grid a { background: rgba(255,255,255,0.06); border: 1px solid rgba(200,151,58,0.2); color: rgba(255,255,255,0.75); text-decoration: none; padding: 10px 22px; border-radius: 24px; font-size: 14px; font-weight: 500; transition: 0.25s; }
.cities-grid a:hover { background: rgba(200,151,58,0.15); border-color: var(--gold); color: var(--gold-l); }

/* FOOTER */
footer { background: #080f1a; padding: 40px 0 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.ft-desc { font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 10px; max-width: 300px; }
.ft-links-wrap { display: flex; gap: 20px; flex-wrap: wrap; }
.ft-links-wrap a { color: rgba(255,255,255,0.4); font-size: 13px; text-decoration: none; transition: color 0.2s; }
.ft-links-wrap a:hover { color: var(--gold-l); }
.ft-copy { font-size: 12px; color: rgba(255,255,255,0.25); padding: 16px 24px; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .medal-showcase { width: 220px; height: 220px; }
  .medal-ring { width: 200px; height: 200px; }
  .medal-ring.r2 { width: 160px; height: 160px; }
  .medal-center { width: 120px; height: 120px; }
  .medal-center img { width: 95px; height: 95px; }
  nav a:not(.nav-cta) { display: none; }
  .prod-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { flex-direction: column; }
}
@media (max-width: 480px) {
  .prod-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
}