/* Category page (Hi <name>! / pick your drink) — Figma BREWLINK WIREFRAME.
   Mobile-first; cards go in a row from 700px. */

.cat-page {
  --cream: #e8f5ee;
  --bar: var(--bl-brown-dark, #0f2e21);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--cream);
  /* soft coffee-toned colour blends over a cream-to-latte base */
  background-image:
    radial-gradient(70% 45% at 50% 0%, rgba(248,253,250, 0.9) 0%, transparent 70%),
    radial-gradient(60% 40% at 100% 100%, rgba(40,110,80, 0.28) 0%, transparent 70%),
    radial-gradient(60% 40% at 0% 100%, rgba(90,170,130, 0.25) 0%, transparent 70%),
    linear-gradient(180deg, #edf7f1 0%, #dcefe4 55%, #cfe6d9 100%);
  background-repeat: no-repeat;
  background-position: center, center, center, center;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  position: relative;
  isolation: isolate;
  font-family: 'Josefin Sans', sans-serif;
  color: #000;
}

.cat-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: clamp(52px, 8vh, 64px);
  padding: 0 clamp(16px, 6vw, 36px);
  background: var(--bar);
}

.cat-logout-form { margin: 0; }

.cat-logout {
  padding: 6px 14px;
  font: inherit;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.8rem;
  color: #e6f3ec;
  background: transparent;
  border: 1px solid #c9dbd1;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}

.cat-logout:hover { background: rgba(255, 255, 255, 0.12); }

.cat-brewid {
  font-size: 0.95rem;
  color: #c9dbd1;
  letter-spacing: 0.3px;
}

.cat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(20px, 5vh, 32px) 16px 32px;
  text-align: center;
}

.cat-hi {
  margin: 0;
  font-size: clamp(1.15rem, 5vw, 1.4rem);
  font-weight: 400;
  word-break: break-word;
}

.cat-title {
  margin: clamp(16px, 4vh, 34px) 0 0;
  font-size: clamp(1.15rem, 5.4vw, 1.9rem);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.15;
}

.cat-sub {
  margin: 6px 0 0;
  font-size: clamp(0.7rem, 3vw, 1.05rem);
  font-weight: 400;
  text-transform: uppercase;
}

.cat-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3vh, 24px);
  width: 100%;
  margin-top: clamp(14px, 3.5vh, 30px);
}

.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: min(72%, 240px);
  height: clamp(100px, 16vh, 122px);
  margin-top: 10px;
  padding: 6px 8px;
  color: #000;
  background: var(--bl-white, #fff);
  border: 1px solid rgba(15,46,33, 0.1);
  border-radius: var(--bl-radius-lg, 18px);
  box-shadow: var(--bl-shadow-card, 0 6px 16px rgba(15,46,33, 0.16));
  transition: transform 0.2s var(--bl-ease, ease), box-shadow 0.2s;
}

.cat-card:hover {
  color: #000;
  transform: translateY(-5px);
  box-shadow: var(--bl-shadow-card-hover, 0 14px 26px rgba(15,46,33, 0.22));
}

.cat-card img {
  /* cup pops out above the card, like the wireframe */
  flex: 0 0 auto;
  height: calc(100% - 18px);
  margin-top: -22px;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.cat-card span {
  margin-top: 2px;
  font-size: clamp(0.9rem, 3.8vw, 1.05rem);
  text-transform: uppercase;
  line-height: 1.1;
}

/* beans strip only when the layout is wide (matches the desktop frame) */
@media (max-width: 699px) {
}

@media (min-width: 700px) {
  .cat-grid {
    flex-direction: row;
    justify-content: center;
    gap: clamp(20px, 4vw, 40px);
    margin-top: clamp(20px, 4vh, 36px);
  }

  .cat-card {
    width: clamp(150px, 22vw, 200px);
    height: clamp(112px, 22vh, 150px);
  }

  .cat-title { font-size: clamp(1.6rem, 3vw, 2.2rem); }
  .cat-sub { font-size: clamp(0.95rem, 1.6vw, 1.2rem); }
  .cat-hi { font-size: 1.4rem; }
  .cat-logout { font-size: 0.72rem; padding: 6px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-card { transition: none; }
}

.cat-page { overflow-x: clip; }

.cat-card { position: relative; }

/* photo cards: photo centred in the button, label centred underneath it */
.cat-card--photo {
  --hover: #bcd8c9;
  justify-content: center;
  padding: 6px 8px 8px;
  overflow: hidden;
  height: clamp(118px, 19vh, 150px);
  border-top: 4px solid var(--edge, var(--bl-brown));
  transition: background-color 0.25s, border-color 0.25s, transform 0.2s var(--bl-ease, ease), box-shadow 0.2s;
}

/* each drink lights its button up in its own colour */
.cat-card--coffee { --hover: #e8f5ee; --edge: #1f5a41; }
.cat-card--frappe { --hover: #e6f5ed; --edge: #3f8f6a; }
.cat-card--fruity { --hover: #fff3d6; --edge: #d98a00; }

/* phones have no real hover: the same colour shows while the button is pressed,
   and .is-picked (set by the dashboard script on tap) holds it until the page
   changes */
.cat-card--photo { -webkit-tap-highlight-color: transparent; }

.cat-card--photo:hover,
.cat-card--photo:focus-visible,
.cat-card--photo:active,
.cat-card--photo.is-picked {
  background-color: var(--hover);
  border-color: var(--edge);
}

.cat-card--photo img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 0;
  margin: 0;
  object-fit: contain;
  object-position: center;
  /* photo backdrop is pure white, so it takes on the button colour */
  mix-blend-mode: multiply;
}

.cat-card--photo span {
  flex: 0 0 auto;
  width: 100%;
  margin: 2px 0 0;
  text-align: center;
  color: #000;
}

@media (min-width: 700px) {
  .cat-card--photo { height: clamp(140px, 25vh, 180px); }
}
/* =====================================================================
   TABLETS (iPad): bigger buttons and type, content centred in the page
   ===================================================================== */
@media (min-width: 700px) {
  .cat-main {
    justify-content: center;
    padding-bottom: 12vh;
  }

  .cat-hi { font-size: clamp(1.5rem, 2.6vw, 2rem); }
  .cat-title { font-size: clamp(2rem, 4vw, 3.2rem); }
  .cat-sub { font-size: clamp(1.05rem, 2vw, 1.6rem); }

  .cat-grid { gap: clamp(24px, 4vw, 56px); margin-top: clamp(28px, 5vh, 56px); }

  .cat-card { width: clamp(170px, 24vw, 300px); }
  .cat-card--photo { height: clamp(150px, 24vh, 240px); }
  .cat-card span { font-size: clamp(1rem, 1.9vw, 1.5rem); }

  .cat-bar { height: clamp(56px, 7vh, 76px); padding: 0 clamp(24px, 4vw, 48px); }
  .cat-logout { font-size: clamp(0.8rem, 1.4vw, 1rem); padding: 8px 18px; }
  .cat-brewid { font-size: clamp(1rem, 1.8vw, 1.4rem); }
}
/* =====================================================================
   ACCOUNT button (replaces LOG OUT): person icon + label, opens a menu
   ===================================================================== */
.cat-bar { height: clamp(52px, 8vh, 64px); }


.cat-account-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 8px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.6rem;
  line-height: 1.1;
  color: #e6f3ec;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--bl-radius-pill, 8px);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.cat-account-btn i { font-size: 1.2rem; line-height: 1; }
.cat-account-btn:hover,
.cat-account-btn:focus-visible { background: #fff; color: var(--bl-brown-dark, #0f2e21); border-color: #fff; }

/* phones: readable "Account" label and subtitle */
@media (max-width: 699px) {
  .cat-account-btn { min-width: 44px; min-height: 44px; justify-content: center; font-size: 0.78rem; }
  .cat-sub { font-size: clamp(0.85rem, 3.6vw, 1.05rem); }
}

@media (min-width: 700px) {
  .cat-account-btn { font-size: clamp(0.66rem, 1vw, 0.75rem); }
  .cat-account-btn i { font-size: clamp(1.3rem, 1.8vw, 1.5rem); }
  .cat-bar { height: clamp(56px, 7vh, 76px); }
}

/* headings in the same bold Josefin Sans as "WELCOME TO BREWLINK!" */
.cat-hi,
.cat-title,
.cat-sub,
.cat-card span,
.cat-brewid { font-weight: 700; }

.cat-account-btn { font-weight: 600; }
.cat-brewid { font-size: 1.05rem; }
/* =====================================================================
   DASHBOARD, the dark minimal look (like the home page): deep green page,
   big white title, the three drinks on mint cards
   ===================================================================== */
.cat-page--dark {
  color: #fff;
  background-color: var(--bl-night, #0b2419);
  background-image:
    radial-gradient(55% 40% at 50% 62%, rgba(159, 227, 191, 0.14), rgba(159, 227, 191, 0) 70%),
    radial-gradient(70% 45% at 50% 0%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%);
}

.cat-page--dark .cat-bar { background: transparent; border-bottom: 1px solid var(--bl-night-line, rgba(255, 255, 255, 0.1)); }

.cat-page--dark .cat-hi {
  font-size: clamp(0.85rem, 3.4vw, 1rem);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bl-mint, #9fe3bf);
}

.cat-page--dark .cat-title {
  margin-top: 12px;
  font-family: var(--bl-font-display);
  font-size: clamp(1.9rem, 8.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  color: #fff;
}

.cat-page--dark .cat-sub {
  margin-top: 12px;
  font-size: clamp(0.85rem, 3.4vw, 1.1rem);
  letter-spacing: 1px;
  color: var(--bl-on-dark-muted, #a7c4b6);
}

.cat-page--dark .cat-card--photo,
.cat-page--dark .cat-card--coffee,
.cat-page--dark .cat-card--frappe,
.cat-page--dark .cat-card--fruity {
  --hover: #d4f3e2;
  background-color: var(--bl-mint-card, #bde9d2);
  border: 0;
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.cat-page--dark .cat-card--photo span {
  font-family: var(--bl-font-display);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--bl-night, #0b2419);
}

.cat-page--dark .cat-card--photo:hover,
.cat-page--dark .cat-card--photo:focus-visible,
.cat-page--dark .cat-card--photo.is-picked { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(0, 0, 0, 0.45); }