/* ============================================================================
   COMPONENTS — grid carousel, cards, buttons, tool icons, avatar, form.
   ========================================================================= */

/* ---- Grid carousel ------------------------------------------------------
   Cards read left to right across the full width. When the line is full the
   next card starts a second line; when both lines are full the grid scrolls
   sideways, one screenful ("page") at a time.

   Row count is set per section in index.html — one attribute:
       <div class="carousel" data-rows="3">
   It is a maximum: a handful of cards just sit on one centred line. Three
   rows switches the cards to a denser treatment (tighter padding, two lines
   of description) so the extra row still fits on one screen.

   Grid can fill left-to-right *or* overflow sideways, not both — so each
   card's row and column are assigned by js/carousel.js. Sizing stays here.
   ------------------------------------------------------------------------ */

.carousel {
  display: grid;
  /* Only used when JavaScript is off — the explicit placement overrides it.
     Without it the cards would stack in a single tall column. */
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--carousel-rows, 2), auto);
  grid-auto-columns: var(--card-w);
  gap: var(--card-gap);
  align-content: start;
  /* A line with room to spare sits centred; `safe` drops back to left
     alignment once the cards overflow, so nothing strands off-screen. */
  justify-content: safe center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 6px;
  margin: 0 -2px;
  scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
  height: 0;
}

/* How many rows, and how much card fits in one. Add a line here if you ever
   want a 4-row grid. */
.carousel[data-rows="1"] {
  --carousel-rows: 1;
}

.carousel[data-rows="2"] {
  --carousel-rows: 2;
}

.carousel[data-rows="3"] {
  --carousel-rows: 3;
  --desc-lines: 2;
  --card-pad: 16px;
  --card-row-gap: 8px;
  --card-title-size: 15px;
}

/* ---- Card --------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--card-row-gap, 12px);
  padding: var(--card-pad, 20px);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: 0 1px 2px var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Scrolling stops on the first card of each page, not on every card. Set by
   js/carousel.js. */
.card.is-page-start {
  scroll-snap-align: start;
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--fg-faint);
  box-shadow: 0 6px 16px var(--shadow-soft);
}

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card__top i {
  font-size: 20px;
  color: var(--fg);
}

.card__tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: right;
}

.card__title {
  font-size: var(--card-title-size, 16px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
}

.card__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-muted);
  /* Clip long blurbs to whole lines — fewer of them in a denser grid — so a
     wordy entry can never stretch or break a row. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--desc-lines, 4);
  line-clamp: var(--desc-lines, 4);
  overflow: hidden;
}

.card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}

.card__cta i {
  font-size: 11px;
}

/* ---- Carousel arrows ----------------------------------------------------- */

.arrows {
  display: flex;
  gap: 8px;
}

.arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 12px;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.arrow:hover:not(:disabled) {
  border-color: var(--fg);
}

.arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Set by js/carousel.js when a grid fits on screen and has nothing to scroll. */
.arrows.is-off {
  display: none;
}

/* ---- Lightbulb theme toggle ---------------------------------------------
   aria-pressed="true"  → dark theme active  → outlined, dim bulb
   aria-pressed="false" → light theme active → solid, glowing bulb
   ------------------------------------------------------------------------ */

.bulb {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.bulb:hover {
  border-color: var(--fg);
}

.bulb i {
  transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.2s ease;
}

.bulb[aria-pressed="false"] i {
  color: #d6a83d;
  text-shadow: 0 0 10px var(--bulb-glow);
}

.bulb:hover i,
.bulb:focus-visible i {
  transform: scale(1.14);
}

.bulb:active i {
  transform: scale(0.9);
}

/* ---- Tool icons ---------------------------------------------------------- */

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.tools i {
  font-size: 26px;
  color: var(--fg-muted);
  transition: color 0.2s ease, transform 0.2s ease;
}

.tools i:hover {
  color: var(--fg);
  transform: translateY(-2px);
}

/* ---- Avatar -------------------------------------------------------------- */

.avatar {
  width: min(240px, 42vw);
  height: min(240px, 42vw);
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: min(110px, 20vw);
  color: var(--fg);
}

/* ---- Contact form (placeholder) ------------------------------------------ */

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
  margin-top: 28px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-body);
}

.field input,
.field textarea {
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-alt);
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--fg-muted);
}

.btn {
  align-self: flex-start;
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 8px;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  transition: opacity 0.2s ease;
}

.btn:hover {
  opacity: 0.85;
}

.form__note {
  font-size: 12.5px;
  color: var(--fg-faint);
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 720px) {
  /* One row on phones so cards stay readable, whatever data-rows says. */
  .carousel {
    --carousel-rows: 1 !important;
    --desc-lines: 3 !important;
    --card-w: min(78vw, 300px);
    scroll-snap-type: x mandatory;
  }

  /* Swipe instead of tapping arrows. */
  .arrows {
    display: none;
  }

  .avatar {
    width: min(150px, 36vw);
    height: min(150px, 36vw);
    font-size: min(70px, 17vw);
  }

  .tools {
    gap: 18px;
  }

  .tools i {
    font-size: 23px;
  }

  /* Keep the contact section inside one screen too. */
  .form {
    gap: 14px;
    margin-top: 20px;
  }

  .field textarea {
    height: 96px;
  }

  .footer {
    margin-top: 24px;
  }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .carousel {
    --card-w: 240px;
  }
}