/*
 * The home page's "Our Product Suite" tiles.
 *
 * Companion to inc/product-suite.php, which is where the story of what was
 * broken is written down. In short: each tile drew its graphic as a glyph from
 * an icon font that cannot load, so the client got six empty boxes. The filter
 * puts each product's real logotype in place of its glyph; this file composes
 * the tiles around them.
 *
 * ---------------------------------------------------------------------------
 * THE PROBLEM THIS FILE ACTUALLY SOLVES
 * ---------------------------------------------------------------------------
 * Six marks drawn by different hands. A wordmark led by a solid glyph (Share
 * Ledger, Prove), a stacked lockup whose "me" is drawn at display size (Me
 * Modules), the corporate ring-and-wordmark lockup twice (ShareRing Link,
 * ShareRing Me), and one tile that is not a product at all and has no mark to
 * draw (And Much More). Size those to one box and the row is a ransom note: that
 * is the whole reason the optical registry in tokens.css exists, and it is
 * REUSED here rather than re-derived. This file introduces exactly one number of
 * its own, --sr-tile-logo-scale, and it is a multiplier on the registry, not a
 * second copy of it.
 *
 * The composition rests on the same two lines the Products flyout rests on, and
 * for the same reasons (see the long note above .sr-product in header.css):
 *
 *   The horizontal one. Every tile opens with a WELL of the same height, and
 *   every mark is laid on one baseline inside it, --sr-tile-baseline down from
 *   the top. Marks are not sized to a common width or a common box; each is set
 *   to the height at which its own wordmark carries the weight of its
 *   neighbours. Because the tiles sit in a grid and their tops align, that one
 *   baseline runs straight across all three tiles of a row.
 *
 *   The vertical one. Each file carries a different amount of transparent air on
 *   its left edge, from 4.0% of the rendered height on the lockups to 10.3% on
 *   Prove. Left alone, three marks in a row start on three different rules and
 *   the tiles look misaligned without it being obvious why. Each is pulled back
 *   by its own measured inset (--sr-logo-x) until its INK, not its bounding box,
 *   starts on the tile's left padding rule: the same rule the description and the
 *   "Learn more" beneath it start on.
 *
 * That left rule is also why the tiles are set left rather than centred, which is
 * the one thing here that changes a tile beyond fixing it. Centring a logotype
 * centres its BOUNDING BOX, air included, so six marks carrying six different
 * amounts of air come out visibly off-centre from each other and no amount of
 * measuring can fix it, because the thing being centred is not the ink. Set to a
 * rule, they are exact, and the registry's whole left-inset apparatus presumes a
 * rule to be set to.
 *
 * The sixth tile has no logotype and is not given an invented one. Its name is
 * set in type, in the same well, on the same baseline: a tile in the same suite,
 * not a gap where a logotype should have been.
 *
 * ---------------------------------------------------------------------------
 * SPECIFICITY
 * ---------------------------------------------------------------------------
 * Elementor's generated page CSS styles these six tiles BY ELEMENT ID, and it
 * reaches (0,5,0) doing it:
 *
 *   .elementor-146 .elementor-element.elementor-element-6f0f428:hover > .elementor-element-populated
 *   .elementor-146 .elementor-element.elementor-element-d234a50 .elementor-cta__title:not(:last-child)
 *
 * and it prints AFTER this file, so an equal-specificity rule here loses the tie.
 * Every selector below therefore repeats .sr-main until it clears (0,5,0) with
 * room to spare. That is the same lever, for the same reason, as the repeated
 * .elementor-kit-5 in elementor-tokens.css: win on specificity, not on source
 * order, and not with !important, which is reserved.
 *
 * ---------------------------------------------------------------------------
 * SCOPE
 * ---------------------------------------------------------------------------
 * Every selector is gated on .sr-tile, a class that exists nowhere except on the
 * wrapper inc/product-suite.php prints around these six widgets. Nothing here can
 * reach any other Elementor content, on this page or any other. The tile SURFACE
 * is found with :has(), because the surface is Elementor's own column wrap and
 * the only thing that knows it is a product tile is what is inside it.
 */

/* --------------------------------------------------------------- the surface */

/* The tile. Elementor already paints this element white; what it did not have was
   an edge, a lift, or any state that answers a keyboard.
 *
 * Flex column with the button pushed to the foot (margin-top: auto, below) so that
 * six descriptions of six different lengths still line their "Learn more" up along
 * one rule. Without it the row's CTAs stagger by up to a line and a half, which is
 * the most visible thing that can be wrong with a card grid. */
.sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile) {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}

/* One state for both, because a tile that answers a mouse and ignores a keyboard
   is a tile that is broken for the people who most need the affordance. The
   focus-within also means the tile lifts when its "Learn more" is tabbed to,
   which is how you find it. */
.sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile):hover,
.sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile):focus-within {
  transform: translateY(-2px);
  border-color: var(--sr-chrome-accent);
  box-shadow: var(--shadow-md);
}

/* The lift is decoration. The tile must still answer without it. */
@media (prefers-reduced-motion: reduce) {
  .sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile) {
    transition: none;
  }

  .sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile):hover,
  .sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile):focus-within {
    transform: none;
  }
}

/* Elementor pads and centres the CTA's content box, which is where the tile's
   old inner padding lived (20px 30px 10px). The padding moves up to the tile
   itself, above, so that ONE rule runs down the tile and the mark, the
   description and the "Learn more" all start on it. Zeroed here so the two
   cannot stack. */
.sr-main.sr-main.sr-main.sr-main .sr-tile .elementor-cta__content {
  align-items: flex-start;
  padding: 0;
  text-align: start;
}

.sr-main.sr-main.sr-main.sr-main .sr-tile .elementor-cta__description {
  text-align: start;
}

/* ------------------------------------------------------------------ the well */

/* The three lengths the registry is made of, taken up together by one multiplier:
   the marks keep every measured relationship they have to each other and simply
   arrive bigger, because a tile is not a menu row. --sr-logo-r and --sr-logo-x
   need no multiplier and get none: both are already fractions, which is exactly
   why they survive being resized. */
.sr-tile {
  --sr-tile-well: calc(var(--sr-logo-well) * var(--sr-tile-logo-scale));
  --sr-tile-baseline: calc(var(--sr-logo-baseline) * var(--sr-tile-logo-scale));
  --sr-tile-logo-h: calc(var(--sr-logo-h) * var(--sr-tile-logo-scale));
}

.sr-main.sr-main.sr-main.sr-main .sr-tile .elementor-cta__icon {
  display: flex;
  align-items: flex-start;
  min-height: var(--sr-tile-well);
  margin: 0 0 var(--space-5);
  padding: 0;
}

/* The box Elementor wrapped the glyph in. It carried the icon's 65px font-size;
   there is no glyph any more. Zeroing the font-size is what stops the empty line
   box from adding a phantom half-line to the well and pushing every mark off the
   baseline it was measured onto. */
.sr-main.sr-main.sr-main.sr-main .sr-tile .elementor-icon {
  display: flex;
  /* Centred, not flex-start: the box now holds a mark slot and a wordmark of
     different heights, and centring is what puts the glyph's mass on the
     lettering's optical centre. Baselines cannot serve here, because a ring, a
     diamond and a book have none in common. */
  align-items: center;
  gap: var(--sr-mark-gap);
  font-size: 0;
  line-height: 0;
}

/* The mark slot and the wordmark, the same two pieces the menu draws.

   A tile is a card, so it needs no shared column with its neighbours the way a
   menu row does, but it gets the identical treatment for a simpler reason: one
   registry, one markup shape, one set of rules. The tile drawing a flattened
   single file while the nav composed two halves is exactly what let the two
   surfaces drift apart before.

   Sizes are the tile's own, scaled up from the chrome's by --sr-tile-logo-scale,
   so the tiles read larger without re-picking a single value. */
.sr-main.sr-main.sr-main.sr-main .sr-tile .sr-product__mark {
  flex: 0 0 calc(var(--sr-mark-col) * var(--sr-tile-logo-scale));
  width: calc(var(--sr-mark-col) * var(--sr-tile-logo-scale));
  height: calc(var(--sr-product-row-h) * var(--sr-tile-logo-scale));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sr-main.sr-main.sr-main.sr-main .sr-tile .sr-product__mark-img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(var(--sr-mark-size) * var(--sr-tile-logo-scale) * var(--sr-mark-scale, 1));
  max-height: calc(var(--sr-mark-size) * var(--sr-tile-logo-scale) * var(--sr-mark-scale, 1));
  object-fit: contain;
}

.sr-main.sr-main.sr-main.sr-main .sr-tile .sr-product__word {
  display: block;
  flex: none;
  width: auto;
  height: var(--sr-tile-logo-h);
  /* Cap-centred, exactly as the menu rows are. See header.css. */
  transform: translateY(calc(var(--sr-tile-logo-h) * (0.5 - var(--sr-logo-capmid, 0.5))));
}

/* ------------------------------------------------------------------ the name */

/* The product's name, still in the document, still the crawlable text and still
   the heading a screen reader announces. Clipped, not removed: display:none would
   take it out of the accessibility tree along with the pixels, and the logotype
   above it carries an EMPTY alt precisely because this text is here. The tile is
   never reduced to a bare image. */
.sr-main.sr-main.sr-main.sr-main .sr-tile.sr-product .elementor-cta__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "And Much More": the tile that names no product. There is no mark to draw and
   none is invented, so its NAME is its mark. It is set in the well the other five
   put their logotypes in, at the size a wordmark would occupy there, and its
   line-height IS the well, which is what puts its baseline on exactly the line the
   five marks sit on. (See --sr-logo-baseline in tokens.css: the baseline is
   calibrated as where Inter Tight lands in a well-height line box, and the whole
   well scales as one piece, so this holds at every value of the multiplier.)
   Semibold and tight, not the body weight, for the reason the flyout's nameless
   rows are: beside five logotypes, a name set in body weight reads as a logotype
   that failed to load. */
.sr-main.sr-main.sr-main.sr-main .sr-tile--named .elementor-cta__icon {
  display: none;
}

.sr-main.sr-main.sr-main.sr-main .sr-tile--named .elementor-cta__title {
  margin: 0 0 var(--space-5);
  color: var(--sr-ink);
  font-size: calc(var(--type-body) * var(--sr-tile-logo-scale));
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--sr-tile-well);
  text-align: start;
}

/* ------------------------------------------------------------ the Learn more */

/* Pinned to the foot of the tile, so all six sit on one rule however long the
   description above them runs. The hairline over it is Elementor's own (the button
   widget's top border, already on --sr-hairline via elementor-tokens.css); it now
   spans the tile's content rule to its content rule rather than bleeding to both
   bezels, which is what makes it read as a division of the tile rather than as the
   lid of a box. */
.sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile) > .elementor-widget-button {
  margin-top: auto;
  padding-top: var(--space-5);
}

/* The hairline itself lives on this box (Elementor puts the button widget's top
   border here), and so did a 30px horizontal padding, which held the "Learn more"
   30px inside the rule the mark and the description both start on. The rule was
   already right; only the words were indented. The horizontal padding goes, the
   vertical stays as the air between the rule and the words. */
.sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile) > .elementor-widget-button > .elementor-widget-container {
  padding-top: var(--space-4);
  padding-inline: 0;
}

.sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile) .elementor-button-wrapper {
  text-align: start;
}

/* The arrow is DRAWN, not typed, so it is not in the accessible name and not in
   the anchor text a crawler reads. It steps forward on hover and on focus, which
   is the tile's only motion beyond the lift. */
.sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile) .elementor-button-text::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-inline-start: 0.55em;
  border-top: var(--rule) solid currentColor;
  border-right: var(--rule) solid currentColor;
  transform: translateY(-0.05em) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}

.sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile):hover .elementor-button-text::after,
.sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile) .elementor-button:focus-visible .elementor-button-text::after {
  transform: translateX(0.2em) translateY(-0.05em) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile) .elementor-button-text::after {
    transition: none;
  }

  .sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile):hover .elementor-button-text::after,
  .sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile) .elementor-button:focus-visible .elementor-button-text::after {
    transform: translateY(-0.05em) rotate(45deg);
  }
}

.sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile) .elementor-button:focus-visible {
  outline: var(--rule) solid var(--sr-focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* The product's name inside the anchor, so that the link says what it links to.
   Six links that all read "Learn more" are six identical links in a screen
   reader's link list. Clipped for the same reason, and by the same rule, as the
   heading above. */
.sr-tile__for {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* At one tile across, the tile is as wide as the gutter allows and the widest mark
   (the ShareRing Link lockup) is what decides whether the section can breathe. The
   registry steps down as one piece, exactly as it steps up: one number, and every
   relationship between the six marks preserved. */
@media (max-width: 767px) {
  :root {
    --sr-tile-logo-scale: 1.25;
  }

  .sr-main.sr-main.sr-main.sr-main .elementor-widget-wrap:has(.sr-tile) {
    padding: var(--space-5);
  }
}