@tailwind base;
@tailwind components;
@tailwind utilities;

/* -----------------------------------
   Header helpers
----------------------------------- */
@layer components {
  .nav-link {
    @apply inline-flex items-center uppercase text-white/90 hover:text-yellow-300 transition;
  }

  .icon-ring {
    @apply w-8 h-8 rounded-full border border-yellow-400 flex items-center justify-center;
    overflow: hidden;
  }

  .icon-ring > img {
    @apply block;
    width: 70%;
    height: 70%;
    object-fit: contain;
  }
}

/* -----------------------------------
   Section + card styles
----------------------------------- */
@layer components {
  .section-title {
    @apply text-xl font-bold mb-4 uppercase;
  }

  /* Reward cards */
  .reward-card {
    @apply relative flex items-center justify-center text-center;
    border-radius: 2rem;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    height: 15rem;
  }

  .reward-card img {
    @apply absolute inset-0 w-full h-full;
    object-fit: cover;
    transform: scale(1.8);
  }

  .reward-card::before {
    content: "";
    @apply absolute inset-0;
    background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.7));
    z-index: 5;
  }

  .reward-card .content {
    @apply relative flex flex-col items-center;
    z-index: 10;
    height: 100%;
    width: 100%;
    padding: 1rem;
  }

  .reward-card .top {
    @apply flex flex-col items-center justify-center;
    flex: 1;
  }

  .reward-card .card-title {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: .5rem;
  }

  .reward-card .card-sub {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.4;
    max-width: 85%;
  }

  .reward-card .pill-btn {
    margin-top: auto;
  }

  /* Different background positions */
  .reward-card:nth-child(1) img { object-position: center top; }
  .reward-card:nth-child(2) img { object-position: right center; }
  .reward-card:nth-child(3) img { object-position: left center; }
  .reward-card:nth-child(4) img { object-position: center bottom; }

  /* Stream highlights */
  .thumb {
    @apply rounded-xl bg-[#313843];
    flex-shrink: 0;
    position: relative;
    display: block;
    overflow: hidden;
    width: 470px;
  }

  .thumb .thumb-img {
    width: 100%;
    height: 14rem;
    object-fit: cover;
    display: block;
  }

  @media (min-width: 768px) {
    .thumb { width: 520px; }
    .thumb .thumb-img { height: 15rem; }
  }

  @media (min-width: 1024px) {
    .thumb { width: 570px; }
    .thumb .thumb-img { height: 16rem; }
  }

  .thumb .thumb-label {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 1;
  }

  /* Pills */
  .pill-btn {
    @apply bg-white text-black rounded-full font-semibold inline-flex items-center justify-center whitespace-nowrap transition;
    @apply px-5 py-2 shadow;
    font-size: .9rem;
    gap: .3rem;
  }
  .pill-btn:hover { @apply bg-gray-200; }

  .pill-label {
    @apply bg-white text-black rounded-full font-semibold inline-flex items-center justify-center shadow whitespace-nowrap;
    @apply px-4 py-1;
    font-size: .75rem;
  }

  /* Chips */
  .chip {
    @apply bg-white text-black px-4 py-2 rounded-full font-semibold;
  }
}