/* ============================================================================
   promo.css — the course buttons and the LINE floating button.

   Shared by the gallery (default.layout.html) and the demo viewer
   (viewer.layout.html) so the two never drift apart: the pair of buttons in the
   viewer's top bar and the pair in the gallery hero are the same control, and a
   colour changed in one place has to change in both.

   Layout tweaks that belong to one host — how the pair stacks inside the
   viewer's bar, for instance — stay in that host's own sheet.
   ============================================================================ */

:root {
  /* AA against white text at button sizes — a lighter orange fails it. */
  --promo-orange: #C2410C;
  --promo-orange-hover: #A6360A;
  /* LINE brand green */
  --promo-line: #06C755;
  --promo-line-hover: #05A948;
}

/* -- the pair of buttons ------------------------------------------------------- */
.pbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: .9375rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
  transition: background-color .18s;
}
.pbtn--course { background: var(--promo-orange); }
.pbtn--course:hover { background: var(--promo-orange-hover); }
.pbtn--line { background: var(--promo-line); }
.pbtn--line:hover { background: var(--promo-line-hover); }
.pbtn:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* The lucide file is drawn in currentColor, which an <img> would flatten to black. Masked, the
   downloaded SVG keeps taking the button's own colour. */
.pbtn__icon {
  width: 18px; height: 18px; flex: none;
  background: currentColor;
  -webkit-mask: url('../icons/file-text.svg') center / contain no-repeat;
  mask: url('../icons/file-text.svg') center / contain no-repeat;
}
/* The LINE mark is a fixed brand colour lockup, so it stays a real image. */
.pbtn__logo { width: 24px; height: 24px; flex: none; display: block; border-radius: 4px; }

.pbtn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pbtn-row--center { justify-content: center; }

/* -- floating LINE button ------------------------------------------------------
   A round button with the label sitting beside it rather than inside it: the circle is the
   thing the thumb aims at, the bubble is what tells you what it does. The bubble is always
   visible — a tooltip that only appears on hover is invisible on the device most of these
   visitors are holding. */
.linefab {
  position: fixed;
  right: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 2.5vw, 28px);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.linefab__bubble {
  position: relative;
  background: #fff;
  color: #16161A;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 9px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .16);
  white-space: nowrap;
}
/* the tail, pointing at the circle */
.linefab__bubble::after {
  content: '';
  position: absolute; top: 50%; right: -6px;
  width: 12px; height: 12px;
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
}
.linefab__circle {
  width: 56px; height: 56px; flex: none;
  border-radius: 50%;
  background: var(--promo-line);
  display: grid; place-items: center;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .22);
  transition: background-color .18s, transform .18s;
}
.linefab:hover .linefab__circle { background: var(--promo-line-hover); transform: translateY(-2px); }
.linefab:focus-visible .linefab__circle { outline: 3px solid #16161A; outline-offset: 3px; }
.linefab__circle img { width: 30px; height: 30px; display: block; border-radius: 5px; }

@media (prefers-reduced-motion: reduce) {
  .linefab:hover .linefab__circle { transform: none; }
}

/* Below this the bubble would sit on top of the page's own content for the width of a phone.
   The circle keeps its accessible name from the link's aria-label. */
@media (max-width: 560px) {
  .linefab__bubble { display: none; }
  .linefab__circle { width: 52px; height: 52px; }
  .linefab__circle img { width: 27px; height: 27px; }
}