/* public/assets/css/styles.css */

/* Reality Checkmate palette (separate from BRGR):
   Background: #181A1F
   Primary accent (gold): #C9A24D
   Main text (warm ivory): #EFE6D6
   Muted text: #A8A8A8
   Optional accent (burgundy): #7A2E2E
*/

:root{
  --bg: #181A1F;
  --text: #EFE6D6;
  --muted: #A8A8A8;
  --muted2: #8F8F8F;

  --gold: #C9A24D;     /* primary accent */
  --wine: #7A2E2E;     /* optional accent */

  --card: rgba(255,255,255,0.045);
  --border: rgba(239,230,214,0.14);

  --shadow: rgba(0,0,0,0.35);
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a{
  color: var(--gold);
  text-decoration:none;
  transition: color .3s ease;
}
a:hover{ color: var(--wine); }

.container{
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.header{
  padding: 2.5rem 0 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:1rem;
}

.brand img{
  width:48px;
  height:48px;
  border-radius:12px;
  object-fit:cover;
}

.brand-title{
  font-weight: 700;
  letter-spacing: .2px;
  margin:0;
  font-size: 1.25rem;
}

.nav{
  display:flex;
  gap:1rem;
  font-size:.95rem;
  color:var(--muted);
}

.hero{
  padding: 2.5rem 0 2.5rem;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 2rem;
  align-items:start;
}

@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
}

.h1{
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.1;
  margin:0 0 .75rem 0;
}

.tagline{
  font-size: 1.1rem;
  color: var(--text);
  margin:0 0 .75rem 0;
}

.supporting{
  color: var(--muted);
  margin:0 0 1.25rem 0;
  line-height: 1.6;
}

.actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem 1.1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .92rem;
  transition:
    transform .3s ease,
    background-color .3s ease,
    color .3s ease,
    border-color .3s ease;
}

.btn:hover{ transform: scale(1.03); }

/* Primary button: Gold */
.btn-primary{
  background: var(--gold);
  color: var(--bg);
}
.btn-primary:hover{
  background: var(--wine);
  color: var(--text);
}

/* Ghost button: Outline gold */
.btn-ghost{
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}
.btn-ghost:hover{
  border-color: var(--wine);
  color: var(--wine);
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem;
  box-shadow: 0 10px 30px var(--shadow);
}

.section{
  padding: 2.25rem 0;
}

.section h2{
  margin:0 0 .5rem 0;
  font-size: 1.6rem;
}

.section p.lede{
  margin:.25rem 0 1.25rem 0;
  color: var(--muted);
  line-height: 1.6;
}

.latest-grid{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 1.25rem;
}

@media (max-width: 980px){
  .latest-grid{ grid-template-columns: 1fr; }
}

.embed{
  width: 100%;
  aspect-ratio: 16/9;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:#000;
}

.meta{
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.5;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 980px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; }
}

.episode-card{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  padding:1rem;
}

.thumb{
  width:100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  aspect-ratio: 16/9;
  object-fit: cover;
}

.small{
  color: var(--muted2);
  font-size: .9rem;
}

.kicker{
  color: var(--muted);
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Icon row (the text placeholders like YouTube/Spotify/etc.) */
.icon-row{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
  font-size: .95rem;
  color: var(--muted);
}

/* Form fields – match the new palette */
input[type="email"], input[type="text"], textarea, select{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  border-radius: 12px;
  outline: none;
}

input::placeholder, textarea::placeholder{
  color: rgba(239,230,214,0.55);
}

select {
  background: #1F2229;
  color: #EFE4D2;
  border: 1px solid rgba(239,228,210,0.18);
}

select option {
  background: #1F2229;
  color: #EFE4D2;
}

.footer{
  padding: 2.25rem 0 3rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .95rem;
}
.footer a{ color: var(--muted); }
.footer a:hover{ color: var(--text); }