/*────────────────────────────────── Utility & Reset ─────────────────────────*/

:root {
  --gap: 1rem;
  --card-padding: 1rem;
  --card-radius: 0.75rem;
  --font: system-ui, sans-serif;
  --logo-size: 60px;


  --brand: #ec4899;         
  --background: #ffffff;
  --surface: #ffffff;
  --surface-alt: #fdf2f8;   
  --text: #111111;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --hover: #fce7f3;
}


@media (prefers-color-scheme: dark) {
  :root {
    --brand: #ec4899;     
    --background: #111827;  
    --surface: #1f2937;    
    --surface-alt: #111827; 
    --text: #f8fafc;       
    --text-muted: #9ca3af;  
    --border: #374151;     
    --hover: #1e293b;       
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font);
  background: var(--background);
  color: var(--text);
}

/*──────────────────────────────── Header & Footer ───────────────────────────*/
header,
footer {
  padding: var(--gap) 2rem;
  background: var(--surface-alt);
}


/* Ensure headings adapt */
h1,
h2 {
  margin: 0;
}

    h1 {
      font-size: 250%;
    }

    header {
      display: flex;
      align-items: center;

      gap: 0.5rem;
      height: 100px;
    }

    .logo {
      width: var(--logo-size);
      height: var(--logo-size);
      transition: transform 0.1s ease, background 0.1s ease;
    }

    .logo:hover {
  transform: translateY(-4px);
}

    .select {
        padding:20px 0 0 2rem;
    }

    .llama-title {
      padding: 0;
      margin: 0;
      display: block;
    }

    h3 {
      padding: 0;
      margin: 0;
      color: var(--brand);
    }
/*─────────────────────────────── Grid Layout ───────────────────────────────*/
@media (min-width: 900px) {
.grid {
  display: grid;
  gap: var(--gap);
  padding: 1rem 10rem;
  /* Slightly narrower cards so more fit per row */
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
}

.discord {
  padding: 2rem 10rem;
}
}

@media (max-width: 1000px) {
  .grid {
    display: grid;
    gap: 1rem;
    padding: 1rem;

  }

  .discord {
  padding: 1rem;
}
}



/*────────────────────────────── Bucket Buttons ─────────────────────────────*/
.bucket {
  cursor: pointer;
  padding: 2.5rem 1rem;
  border: 2px solid var(--brand);
  border-radius: var(--card-radius);
  text-align: center;
  font-size: 1.25rem;
  background: var(--surface);
  transition: transform 0.1s ease, background 0.1s ease;
}

.bucket:hover {
  transform: translateY(-2px);
  background: var(--hover);
}

/*─────────────────────────────── Model Cards ───────────────────────────────*/
/* ─────────────────────────────── Model Cards ─────────────────────────────── */
.card {
  display: flex;
  flex-wrap: wrap;           /* allow children to wrap to next line */
  align-items: flex-start;
  gap: var(--gap);
  padding: var(--card-padding);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--background);   
  transition: transform 0.1s ease, background 0.1s ease;
  position: relative;          
  overflow: hidden; 
}



.content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
}

.desc {
  margin: 0;
  line-height: 1.4;
  flex-basis: 100%;   
}


/* Thumbnail image */
.thumb {
  width: 80px;
  height: 80px;
  border-radius: 0.5rem;
  object-fit: cover;
  flex-shrink: 0;
  background-color: #fff;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.thumb[src] {
  opacity: 1;
}

/* Content column inside card */

/* Model title */
.name {
  font-size: 1.1rem;
  margin: 0;
}

/* Meta info (size, license, date) */
.meta {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* Description text */


/* "Model Card" button */
.repo {
  align-self: flex-start; 
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  margin-top: auto;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: transform 0.1s ease, background 0.1s ease;
  color: #fff;
  background: var(--brand);
  width: 8rem;
}



.repo:hover {
  transform: translateY(-2px);
}

.talk, 
.q4 {
  align-self: flex-start; 
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  margin-top: auto;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  box-shadow:0px 0px 0px 2px var(--brand) inset;
  color: var(--brand);
  background: var(--background);
  width: 8rem;
}

.talk:hover, 
.q4:hover {
  transform: translateY(-2px);
}



.repo,
.talk,
.q4 {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Back link on models.html */
.back {

  color: var(--brand);
  text-decoration: none;
  font-size: 1.1rem;
}

.back2 {
margin: 1rem 0 0 2rem;
display: flex;
align-items: center;
flex-wrap:wrap;
padding: 0;
gap: 1rem;
}

.actions { display: flex; gap: 0.5rem; margin-top: auto;  display: flex;       
  flex-wrap: wrap;}

.llama {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 150px;
  height: auto;
  padding: 0;
  margin: 0;           /* preserve aspect ratio */
}

.info {
  display: flex;
  gap: 2rem;
}

.info a {
  color: var(--brand);
  text-decoration: none;
}

.discord {
  font-size: 1.1rem;
}

.discord a {
  color: var(--brand);
  text-decoration: none;
}


/* Tag chips -------------------------------------------------------------- */
.tags   { display:flex; flex-wrap:wrap; align-items: center; gap:0.5rem; margin: 0 0 0 3.5rem;}
.tag    { cursor:pointer; padding: 5px 10px; border:1px solid var(--brand);
          border-radius:1.5rem; font-size:0.9rem; color:var(--brand); user-select:none; line-height: 1.1rem, justify-content:center;}
.tag:hover           { background:var(--hover); }
.tag.active          { background:var(--brand); color:#fff; }

/* Tag chips *inside* cards ------------------------------------------- */
.tags2   { display:flex; flex-wrap:wrap; align-items: center; gap:0.5rem; margin: 0 0 0 0rem;}
.tag-line          { margin-top: 1rem; flex-wrap: wrap; gap: .35rem; }
.tag-line .tag     { padding: .15rem .55rem; font-size: .75rem; }


/* make the “(57)” muted grey */
#bucket-title .count {
  color: var(--brand);
}


.pagination{
  display:flex;flex-wrap:wrap;gap:.5rem;
  justify-content:center;margin:1rem 0 1rem 0;
}
.pagination a{
  padding:.4rem .7rem;border:1px solid var(--brand);
  border-radius:.4rem;color:var(--brand);text-decoration:none;
  user-select:none;cursor:pointer;
}
.pagination a.active{background:var(--brand);color:#fff;}
.pagination a.disabled{opacity:.4;pointer-events:none;border-color:var(--border);}

.info {
  display: flex;
  justify-content: center;
  margin: 0 0 1rem 0;
  padding: 0;
}

.info p {
  margin: 0;
  padding: 0;
  color: gray;
}


footer {
  margin-top: auto; 
  display: flex;  
  justify-content: center;
}


@media (max-width: 1000px) {

  .grid {

  gap: 1rem;
  padding: 1rem;
}

.back {
  padding: 0;
  margin: 0;
}

.back2 {
  margin: 1rem 0 0 1rem;
  padding: 0;
}

.tags   { display:flex; flex-wrap:wrap; align-items: center; gap:0.5rem; margin: 0 0 0 0;}

.thumb {
  width: 60px;
  height: 60px;
}

.talk:hover {
  transform: translateY(0px);
}

.repo:hover {
  transform: translateY(0px);
}

    .logo:hover {
  transform: translateY(0px);
}

.bucket:hover {
  transform: translateY(0px);
}

}