/* Makarska Gastro – Hero Listen (restorani.php / barovi.php)
   Eine Datei: Basis (Wellen/Sonne/Meer, animiert) + Listen-Varianten. */
/* Makarska Gastro – Hero-Hintergrund "Wellen" & "Sonne"
   Nutzung: Klasse auf den roten Hero-Container setzen:
     <section class="mg-hero mg-hero--wellen"> ... </section>   (rot mit Wellen)
     <section class="mg-hero mg-hero--sonne">  ... </section>   (Himmel, Sonne, Meer)
   Überschrift:  <h1 class="mg-hero__title">Što ima ovdje,<br>koliko košta,<br><em class="mg-hero__accent">gdje ga naći?</em></h1>
   Keine Bilder nötig – alles CSS + eingebettetes SVG. */
.mg-hero{
  --mg-bord:#851B2F; --mg-bord-dark:#6B1425; --mg-gold:#BE9440; --mg-cream:#F6EFE3; --mg-ink:#2A2024;
  --mg-wave-w:480px; --mg-wave-h:130px; --mg-horizon:56%; --mg-sun:230px; --mg-sun-x:calc(50% + 250px);
  position:relative; isolation:isolate; overflow:hidden; background:var(--mg-bord);
}
.mg-hero > *{position:relative;z-index:2}
.mg-hero__title{color:#fff}
.mg-hero__accent{color:var(--mg-gold);font-style:italic}

/* 1) Rot mit Wellen am unteren Rand */
.mg-hero--wellen::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--mg-wave-h);z-index:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22480%22 height=%22130%22 viewBox=%220 0 480 130%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 22 Q60 8 120 22 T240 22 T360 22 T480 22 L480 130 L0 130 Z%22 fill=%22%236B1425%22/%3E%3Cpath d=%22M0 52 Q60 38 120 52 T240 52 T360 52 T480 52%22 fill=%22none%22 stroke=%22%23F6EFE3%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-opacity=%22.8%22/%3E%3Cpath d=%22M0 74 Q60 60 120 74 T240 74 T360 74 T480 74%22 fill=%22none%22 stroke=%22%23BE9440%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-opacity=%22.8%22/%3E%3Cpath d=%22M0 96 Q60 82 120 96 T240 96 T360 96 T480 96%22 fill=%22none%22 stroke=%22%23F6EFE3%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-opacity=%22.8%22/%3E%3Cpath d=%22M0 118 Q60 104 120 118 T240 118 T360 118 T480 118%22 fill=%22none%22 stroke=%22%23BE9440%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-opacity=%22.8%22/%3E%3C/svg%3E") repeat-x left bottom / var(--mg-wave-w) var(--mg-wave-h);
  opacity:.95;
}

/* 2) Himmel (creme) + Sonne (gold) + Meer mit Wellen (bordeaux) */
.mg-hero--sonne{background:var(--mg-cream)}
.mg-hero--sonne .mg-hero__title{color:var(--mg-ink)}
.mg-hero--sonne .mg-hero__accent{color:var(--mg-bord)}
.mg-hero--sonne::before{ /* Sonne */
  content:"";position:absolute;z-index:0;pointer-events:none;border-radius:50%;background:var(--mg-gold);
  width:var(--mg-sun);height:var(--mg-sun);left:var(--mg-sun-x);
  top:calc(var(--mg-horizon) - var(--mg-sun) * .62);
}
.mg-hero--sonne::after{ /* Meer */
  content:"";position:absolute;left:0;right:0;bottom:0;top:calc(var(--mg-horizon) - 22px);z-index:1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22480%22 height=%22130%22 viewBox=%220 0 480 130%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 22 Q60 8 120 22 T240 22 T360 22 T480 22 L480 130 L0 130 Z%22 fill=%22%23851B2F%22/%3E%3Cpath d=%22M0 52 Q60 38 120 52 T240 52 T360 52 T480 52%22 fill=%22none%22 stroke=%22%23F6EFE3%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-opacity=%22.8%22/%3E%3Cpath d=%22M0 74 Q60 60 120 74 T240 74 T360 74 T480 74%22 fill=%22none%22 stroke=%22%23BE9440%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-opacity=%22.8%22/%3E%3Cpath d=%22M0 96 Q60 82 120 96 T240 96 T360 96 T480 96%22 fill=%22none%22 stroke=%22%23F6EFE3%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-opacity=%22.8%22/%3E%3Cpath d=%22M0 118 Q60 104 120 118 T240 118 T360 118 T480 118%22 fill=%22none%22 stroke=%22%23BE9440%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-opacity=%22.8%22/%3E%3C/svg%3E") repeat-x left top / var(--mg-wave-w) var(--mg-wave-h),
             linear-gradient(var(--mg-bord),var(--mg-bord)) left calc(var(--mg-wave-h) - 2px) / 100% 100% no-repeat;
}

/* Mobil */
@media (max-width:640px){
  .mg-hero{--mg-wave-w:320px;--mg-wave-h:88px;--mg-horizon:55%;--mg-sun:150px;--mg-sun-x:calc(100% - 120px)}
  .mg-hero--sonne::after{top:calc(var(--mg-horizon) - 15px)}
}
@media (prefers-reduced-motion:no-preference){
  .mg-hero--wellen::after,.mg-hero--sonne::after{animation:mgdrift 40s linear infinite}
}
@keyframes mgdrift{from{background-position-x:0,0}to{background-position-x:var(--mg-wave-w),0}}

/* Makarska Gastro – Listen-Hero (Restorani / Kafići)
   Braucht zusätzlich mg-hero.css. Container:
   <section class="mg-hero mg-hero--sonne mg-hero--liste mg-hero--restorani">  oder  ... mg-hero--kafici">
   Inhalt (alles optional, Klassen nur zum Stylen):
     <h1 class="mg-hero__title">Svi restorani</h1>
     <p class="mg-hero__place">Makarska</p> <span class="mg-hero__rule"></span>
     <p class="mg-hero__sub">Otkrijte najbolje restorane u Makarskoj</p>
     <div class="mg-hero__stats"> <span class="mg-hero__chip"><b>89</b> restorana pronađeno</span> ... </div>  */
.mg-hero--liste{
  --mg-wave-w:290px; --mg-wave-h:78px;           /* kleinere Wellen, damit Zahlen lesbar bleiben */
  --mg-horizon:calc(100% - 175px);                /* Meer = untere 175px, Zahlen liegen im ruhigen Bordeaux */
  --mg-sun:310px; --mg-sun-x:calc(50% + 300px); --mg-icon-size:36%;
  min-height:430px; text-align:center; padding-bottom:30px !important;
}
.mg-hero--liste::after{top:calc(var(--mg-horizon) - 13px) !important}
.mg-hero--liste .mg-hero__stats{position:absolute;left:0;right:0;bottom:30px;margin:0 !important;padding:0 16px}
.mg-hero--restorani{--mg-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cg stroke=%22%23851B2F%22 stroke-width=%225%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M36 14v28c0 8 5 12 12 12s12-4 12-12V14M48 14v28M48 54v52%22/%3E%3Cellipse cx=%2282%22 cy=%2236%22 rx=%2212%22 ry=%2220%22/%3E%3Cpath d=%22M82 56v50%22/%3E%3C/g%3E%3C/svg%3E")}
.mg-hero--kafici{--mg-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cg stroke=%22%23851B2F%22 stroke-width=%225%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 54h66v18c0 18-12 30-33 30S22 90 22 72z%22/%3E%3Cpath d=%22M88 60h6a12 12 0 0 1 0 24h-8%22/%3E%3Cpath d=%22M12 112h86%22/%3E%3Cpath d=%22M42 22c-4 6 4 10 0 18M62 22c-4 6 4 10 0 18%22/%3E%3C/g%3E%3C/svg%3E")}
.mg-hero--liste::before{
  background:var(--mg-icon) 50% 18% / var(--mg-icon-size) no-repeat, var(--mg-gold);
}
.mg-hero--liste .mg-hero__title{margin:0;font-weight:700;font-size:clamp(32px,4vw,48px);line-height:1.1}
.mg-hero--liste .mg-hero__place{margin:6px 0 0;font-style:italic;font-size:clamp(20px,2.4vw,28px);color:var(--mg-bord)}
.mg-hero--liste .mg-hero__rule{display:block;width:70px;height:3px;margin:14px auto 12px;background:var(--mg-gold);border-radius:2px}
.mg-hero--liste .mg-hero__sub{margin:0;font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--mg-ink)}
/* Zahlen/Chips liegen im Meer */
.mg-hero--liste .mg-hero__stats{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.mg-hero--liste .mg-hero__chip{padding:10px 18px;border:1px solid rgba(246,239,227,.55);background:rgba(107,20,37,.88);color:var(--mg-cream);font-size:14px;border-radius:4px}
.mg-hero--liste .mg-hero__chip b{color:var(--mg-gold);font-size:17px;margin-right:4px}
/* Variante Café: Zahlen ohne Kasten, Label klein */
.mg-hero--kafici .mg-hero__chip{border:0;background:none;padding:6px 14px;display:flex;flex-direction:column;gap:2px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.mg-hero--kafici .mg-hero__chip b{font-size:26px;letter-spacing:0;margin:0}
@media (max-width:640px){
  .mg-hero--liste{--mg-wave-w:230px;--mg-wave-h:62px;--mg-horizon:calc(100% - 205px);--mg-sun:150px;--mg-sun-x:calc(100% - 100px);--mg-icon-size:40%;min-height:420px}
  .mg-hero--liste::after{top:calc(var(--mg-horizon) - 10px) !important}
  .mg-hero--liste .mg-hero__stats{bottom:22px}
  .mg-hero--liste .mg-hero__sub{font-size:11px;letter-spacing:.12em}
  .mg-hero--liste .mg-hero__stats{gap:8px}
  .mg-hero--liste .mg-hero__chip{padding:8px 12px;font-size:12.5px}
}

/* Seiten-Feinschliff Listen-Hero (Padding oben, Header-Reset) */
header.mg-hero--liste{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:64px 20px 30px !important;font-family:'Poppins',var(--font,system-ui),sans-serif}
header.mg-hero--liste .mg-hero__title,header.mg-hero--liste .mg-hero__place,header.mg-hero--liste .mg-hero__sub{max-width:900px}
@media (max-width:640px){header.mg-hero--liste{padding:46px 16px 22px !important}}
@media (max-width:640px){
  header.mg-hero--liste{--mg-sun:120px;--mg-sun-x:calc(100% - 78px)}
  .mg-hero--kafici .mg-hero__stats{gap:0;flex-wrap:nowrap}
  .mg-hero--kafici .mg-hero__chip{flex:1 1 0;min-width:0;padding:4px 3px;text-align:center;align-items:center;font-size:9px;letter-spacing:.06em;line-height:1.25}
  .mg-hero--kafici .mg-hero__chip b{font-size:19px}
}