/*
URL:  https://exempel.se/falconbar/css/tv-menu.css
DIR:  /var/www/falconbar/public/css/tv-menu.css
FILE: tv-menu.css (V1.1)
DESC: Stil för TV-meny – 16:9, stor typografi, mörk sten/gradients, guld och röd glow.
*/

:root{
  --bg:#0f0c0a;
  --panel:#15100d;
  --gold:#d6b67d;
  --gold-strong:#e4cfa0;
  --muted:#c7b897;
  --red:#7a2b27;
  --red-glow:#b23a30;
  --shadow:0 24px 60px rgba(0,0,0,.6);
}

*{ box-sizing:border-box }
html,body{ height:100%; margin:0; background:var(--bg); color:var(--gold); }
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.tv{
  position:relative; height:100vh; width:100vw; overflow:hidden;
  background:
    radial-gradient(60% 60% at 50% 20%, rgba(178,58,48,.20) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.7) 85%),
    #120e0c;
}

/* Header */
.tv__header{
  position:relative; display:flex; align-items:center; justify-content:center;
  gap:28px; padding:18px 30px 8px; z-index:5;
}
.tv__logo{ height:88px; width:auto; filter:drop-shadow(0 0 16px rgba(178,58,48,.45)); }
.tv__title{
  font-family:"Cinzel", serif; font-weight:700; letter-spacing:.5px;
  font-size: clamp(22px, 2.6vw, 46px); margin:0;
  text-shadow:0 0 12px rgba(178,58,48,.28);
  color:var(--gold-strong);
}

/* Slide-yta */
.tv__slide{
  position:absolute; inset:120px 26px 90px 26px; border-radius:16px;
  background:
    linear-gradient(180deg, rgba(214,182,125,.06) 0%, rgba(214,182,125,.03) 100%),
    var(--panel);
  border:1px solid rgba(214,182,125,.20);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(214,182,125,.25);
  padding:28px;
  display:flex; flex-direction:column;
}

/* Sektionstitel */
.section__title{
  font-family:"Cinzel", serif; text-transform:uppercase;
  font-size: clamp(26px,2.2vw,42px);
  margin:0 0 14px; color:var(--gold-strong);
  text-shadow:0 0 10px rgba(178,58,48,.25);
}

/* Menygrid */
.menu{ display:grid; gap:18px; flex:1; grid-template-columns: repeat(3, 1fr); }
.menu__card{
  background:#17120f; border:1px solid rgba(214,182,125,.20);
  border-radius:14px; padding:18px 18px;
  box-shadow: inset 0 0 0 1px rgba(214,182,125,.22), 0 0 22px rgba(178,58,48,.12);
}
.menu__heading{
  font-family:"Cinzel", serif; font-size: clamp(18px,1.6vw,26px);
  margin:0 0 10px; color:var(--gold-strong);
}
.menu__list{ list-style:none; margin:0; padding:0; }
.menu__list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:6px 0; border-bottom:1px dashed rgba(214,182,125,.18);
  font-size: clamp(16px,1.5vw,26px);
  color:#f3ecd9;
}
.menu__list li b{ color:var(--gold-strong); }

/* Offer slide */
.offer{ display:grid; place-items:center; text-align:center;
  background: radial-gradient(40% 40% at 50% 40%, rgba(178,58,48,.25) 0%, rgba(0,0,0,0) 60%); }
.offer__title{
  font-family:"Cinzel", serif; font-size: clamp(42px,5vw,92px); margin:0 0 10px;
  color:var(--gold-strong); text-shadow:0 0 22px rgba(178,58,48,.35);
}
.offer__text{ font-size: clamp(18px,2vw,34px); color:var(--muted); }

/* Footer */
.tv__footer{
  position:absolute; left:0; right:0; bottom:0; height:70px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 26px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 85%);
}
.tv__ticker{
  flex:1; white-space:nowrap; overflow:hidden; color:var(--muted);
  border-top:1px solid rgba(214,182,125,.18); padding-top:10px;
}
.tv__time{ min-width:120px; text-align:right; color:var(--gold-strong);
  font-weight:700; font-size: clamp(18px,1.6vw,28px); }

/* Mindre skärmar (t.ex. 19") */
@media (max-width: 1100px){ .menu{ grid-template-columns:1fr 1fr; } }
@media (max-width: 820px){ .menu{ grid-template-columns:1fr; } }