/*
 * LOT 101 Connected — the estate wheel.
 *
 * Plain CSS reading the theme's design tokens, not the theme's Tailwind
 * utilities. Same rule the events plugin follows, for the same two reasons:
 * the theme's utilities are compiled from a @source scan that never looks
 * inside a plugin, so a class used only here would not exist in the built
 * sheet; and a plugin that styles itself with another package's utility names
 * breaks silently the day that package rebuilds.
 *
 * Every token is written with a fallback, so the widget still looks like
 * itself under a theme that has none of them.
 *
 * Enqueued after the theme's stylesheet (see includes/assets.php), so the few
 * places this does override the theme win on source order rather than on
 * !important.
 */

.l1c {
  --l1c-ink: var(--color-on-surface, #000);
  --l1c-muted: var(--color-on-surface-variant, #4a3d37);
  --l1c-surface: var(--color-surface, #fdf4ee);
  --l1c-face: #fff;
  --l1c-line: var(--color-outline-variant, rgba(74, 61, 55, 0.2));
  --l1c-accent: var(--color-accent-forest, #2f4937);

  /* The wheel's own hairline weight, and how much it thickens when its
  module is live. Named here so the two stay in step. */
  --l1c-stroke: 1px;
  --l1c-stroke-active: 2px;

  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 3.5rem);
}

/* ---- the wheel ---------------------------------------------------------- */

.l1c__wheel {
  /* Room for the labels, which hang outside the square the wheel is drawn
  in. The wheel itself stays a true square; this padding is what stops a
  label at three o'clock running into the panel. */
  padding-inline: clamp(0px, 4vw, 3.25rem);
  padding-block: clamp(0px, 2vw, 1.5rem);
}

.l1c-wheel {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  /* Labels are meant to leave the box. */
  overflow: visible;

  /* A size container, so the nodes can be expressed in units of the wheel
  itself (1cqw = 1% of its width). That is what lets a node's visible face
  stay a fixed fraction of the drawing while its HIT AREA has a floor in real
  pixels — two different sizes for one element, which percentages alone
  cannot give, because a percentage width on an absolutely positioned node
  and a percentage on the face inside it resolve against different boxes.
  See .l1c-node below. */
  container-type: size;
}

.l1c-wheel__spokes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.l1c-spoke {
  stroke: var(--l1c-ink);
  stroke-width: var(--l1c-stroke);
  stroke-linecap: round;
  opacity: 0.55;
  transition:
    stroke 0.3s ease-out,
    stroke-width 0.3s ease-out,
    opacity 0.3s ease-out;
}

.l1c-spoke.is-active {
  stroke: var(--l1c-accent);
  stroke-width: var(--l1c-stroke-active);
  opacity: 1;
}

/* The hub and the six nodes are the same object at two sizes: a square face
with a mark centred in it, sitting on the point it is positioned at.
--l1c-size is set per element in the markup as a plain number — the node's
width as a percentage of the wheel — and turned into a length here.

The button is the HIT AREA and never goes below 44px, which is the floor a
touch target has to clear and which the wheel would otherwise breach on a
phone: at ~130px across, a node is 24px. The face inside it is the VISIBLE
square and keeps its exact fraction of the drawing at every size, so the
diagram's proportions never bend to accommodate a thumb. The estate map's
markers solve the same problem the same way — a 44px button with a small dot
drawn inside it. */
.l1c-hub,
.l1c-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(calc(var(--l1c-size, 19) * 1cqw), 44px);
  height: max(calc(var(--l1c-size, 19) * 1cqw), 44px);
  translate: -50% -50%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}

.l1c-node__face {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--l1c-size, 19) * 1cqw);
  height: calc(var(--l1c-size, 19) * 1cqw);
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--l1c-face);
  border: var(--l1c-stroke) solid var(--l1c-ink);
  transition:
    border-color 0.3s ease-out,
    border-width 0.3s ease-out,
    scale 0.3s ease-out;
}

.l1c-hub .l1c-node__face {
  border-color: var(--l1c-ink);
}

.l1c-node__mark {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.l1c-hub .l1c-node__mark {
  /* The hub's mark fills its node; the six botanical motifs float inside
  theirs. That is not an inconsistency, it is what the artwork is: the master
  positive lock-up is a solid square block with LOT 101 knocked out of it,
  already carrying its own margin inside the square, and inset inside a white
  node it reads as a black square mistakenly sitting in a white one. Filling
  the node makes the centre the dark anchor the ring of light squares turns
  around, which is how a square badge wants to be used.

  The face keeps its white background: the knockout is transparent, not white,
  so the letterforms take their colour from whatever is behind them. It also
  keeps its border, invisible at rest because it is the same near-black as the
  block, and the thing that still shows selection — 2px of forest green around
  the block, exactly as on the other six. */
  width: 100%;
  height: 100%;
}

/* No artwork yet: the node still reads as a place rather than an empty box. */
.l1c-node__fallback {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(0.875rem, 2vw, 1.25rem);
  color: var(--l1c-muted);
}

.l1c-hub .l1c-node__fallback {
  font-size: clamp(0.75rem, 1.6vw, 1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-inline: 0.5em;
  text-align: center;
}

/* Hover and selection are the same visual state, reached two ways: the
border goes forest green and thickens, and the face lifts very slightly.
Scale rather than width/height so nothing around it reflows. */
@media (hover: hover) and (pointer: fine) {
  .l1c-node:hover .l1c-node__face,
  .l1c-hub:hover .l1c-node__face {
    border-color: var(--l1c-accent);
    border-width: var(--l1c-stroke-active);
    scale: 1.06;
  }
}

.l1c-node[aria-pressed='true'] .l1c-node__face,
.l1c-hub[aria-pressed='true'] .l1c-node__face {
  border-color: var(--l1c-accent);
  border-width: var(--l1c-stroke-active);
  scale: 1.06;
}

.l1c-node:focus-visible,
.l1c-hub:focus-visible {
  outline: 2px solid var(--color-ink, #000);
  outline-offset: 4px;
}

/* ---- node labels -------------------------------------------------------- */

.l1c-node__label {
  position: absolute;
  font-family: var(--font-eyebrow, ui-monospace, monospace);
  font-size: clamp(0.5625rem, 1.05vw, 0.75rem);
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l1c-muted);
  /* max-content, then a ceiling, rather than nowrap.
  The label is absolutely positioned inside its node button, so the button is
  its containing block — left 50% inside a 70px button leaves a 35px
  shrink-to-fit width, and every two-word name breaks in half. max-content is
  what says "as wide as the words are"; the ceiling is then the safety net for
  an editor who types a long name into a module, so it wraps inside the wheel
  instead of running out through the page gutter. */
  width: max-content;
  max-width: 44cqw;
  transition: color 0.3s ease-out;
  pointer-events: none;
}

.l1c-node[aria-pressed='true'] .l1c-node__label {
  color: var(--l1c-accent);
}

/* Outward from the centre. The side is worked out at render time — see
lot101_connected_position() — because "outward" is not something CSS can be
told about a position it was handed as two percentages. */
.l1c-node--right .l1c-node__label {
  text-align: left;
  left: calc(100% + 0.6em);
  top: 50%;
  translate: 0 -50%;
}

.l1c-node--left .l1c-node__label {
  text-align: right;
  right: calc(100% + 0.6em);
  top: 50%;
  translate: 0 -50%;
}

.l1c-node--top .l1c-node__label {
  text-align: center;
  bottom: calc(100% + 0.6em);
  left: 50%;
  translate: -50% 0;
}

.l1c-node--bottom .l1c-node__label {
  text-align: center;
  top: calc(100% + 0.6em);
  left: 50%;
  translate: -50% 0;
}

/* ---- the panel ---------------------------------------------------------- */

.l1c__panels {
  display: grid;
}

.l1c-panel {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease-out;
}

.l1c-panel.is-selected {
  opacity: 1;
  pointer-events: auto;
}

/*
 * The six lock-ups are sized by a shared HEIGHT, not a shared width: they run
 * from 6.7:1 (Werriberri) to 12.8:1 (Megalong), so a common width would print
 * them at half each other's size. The theme's sub-brand strip sizes them the
 * same way, for the same reason.
 *
 * width:100% with object-contain rather than width:auto, because these files
 * declare a viewBox and no width/height — there is no intrinsic size for
 * height:auto to work back from, only a ratio. Giving the box a real width and
 * letting object-contain letterbox inside it is what the theme's strip does,
 * and it is the reliable form. max-width is the generous upper bound that
 * keeps HEIGHT the limiting dimension: the widest lock-up needs 12.8x its
 * height, and below that width it simply scales down with everything else.
 *
 * --l1c-logo-scale is the per-lock-up correction, set in the markup. It
 * multiplies the HEIGHT rather than applying a transform: a scaled transform
 * overflows the element's own box, so Tea Rooms at 1.3 pushed its eyebrow up
 * out of the panel and off the top of the band. Multiplying the height makes
 * the box genuinely taller, which the layout can see.
 */
.l1c-panel {
  --l1c-logo-h: clamp(1.5rem, 2.4vw, 2rem);
}

.l1c-panel__logo {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: calc(var(--l1c-logo-h) * var(--l1c-logo-scale, 1));
  object-fit: contain;
  object-position: left center;
  margin-top: 0.75rem;
}

.l1c-panel__kind {
  color: var(--l1c-muted);
  margin: 0;
}

.l1c-panel__title {
  margin: 0;
  color: var(--l1c-ink);
}

.l1c-panel__copy {
  margin: 1.5rem 0 0;
  max-width: 42ch;
  color: var(--l1c-muted);
  text-wrap: pretty;
}

.l1c-panel__cta {
  margin-top: 2rem;
  width: fit-content;
}

/* The theme's .btn-primary is display:flex, which on an anchor with
width:fit-content is fine; this is only here so the widget still has a
button under a theme that has no button system at all. */
.l1c-standalone .l1c-panel__cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 1.5rem;
  background: var(--color-brand-green, #828f7b);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ---- narrow screens ----------------------------------------------------- */

/*
 * Wheel left, panel right, at every width — Lucy's call, 17 Sep 2026, asked
 * for and confirmed against the alternative of stacking them.
 *
 * What gives way instead of the layout is everything around the wheel. The
 * labels go first, then the split moves towards the panel and the panel's
 * copy drops to 16px. The wheel ends up a ring of botanical marks about
 * 130px across, which is what Emma's original looks like anyway, and the
 * panel does the naming.
 *
 * If the labels turn out to be wanted more than the side-by-side layout is
 * at phone widths, the switch is the second block below: stack the grid to a
 * single column there and let the labels stay.
 */

/*
 * Labels only where they are legible. Below 1024px the wheel is around 300px
 * and shrinking, and a six-label ring on it starts wrapping two-word names
 * onto two lines and crowding the panel's edge. They are dropped rather than
 * shrunk or wrapped: every node still carries its full name as its accessible
 * name, and the panel beside it names whatever is selected in type you can
 * read. Same judgement as the estate map's marker labels on 6 Sep 2026.
 */
@media (max-width: 63.99rem) {
  .l1c-node__label {
    display: none;
  }
}

@media (max-width: 47.99rem) {
  .l1c {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 0.75rem;
    align-items: start;
  }

  .l1c__wheel {
    padding: 0;
    /* Held near the top of the panel's first lines rather than centred
    against a panel that may run to six lines of copy and a button. */
    position: sticky;
    top: 0;
  }

  .l1c-panel {
    --l1c-logo-h: 1.375rem;
  }

  .l1c-panel__logo {
    margin-top: 0.5rem;
  }

  .l1c-panel__copy {
    margin-top: 0.75rem;
    /* 18px in a ~190px column is four or five words a line. */
    font-size: 1rem;
  }

  .l1c-panel__cta {
    margin-top: 1.25rem;
  }
}

/* ---- reduced motion ----------------------------------------------------- */

/*
 * The theme already zeroes transition-duration globally under this query, so
 * this is for the standalone case and for the one thing a duration of zero
 * does not fix: a face that still jumps 6% larger the instant it is touched.
 */
@media (prefers-reduced-motion: reduce) {
  .l1c-spoke,
  .l1c-node__face,
  .l1c-node__label,
  .l1c-panel {
    transition: none;
  }

  .l1c-node:hover .l1c-node__face,
  .l1c-hub:hover .l1c-node__face,
  .l1c-node[aria-pressed='true'] .l1c-node__face,
  .l1c-hub[aria-pressed='true'] .l1c-node__face {
    scale: 1;
  }
}

/* ---- without JavaScript ------------------------------------------------- */

/*
 * There is no separate no-JS layout here, and that is a decision rather than
 * an omission. The selected panel and the wheel are both server-rendered, so
 * a page with no script running still shows the estate's mark, the six
 * botanical nodes and the section's own statement beside them — a complete,
 * true thing that simply does not respond to clicks. Revealing the other six
 * panels in that state would mean either six stacked panels that contradict
 * the single-panel design, or markup whose aria-hidden attributes lie about
 * what is visible. The theme's estate map made the same call in the same
 * place; this matches it rather than inventing a second pattern.
 */

/* ---- utility ------------------------------------------------------------ */

.l1c-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}