/* Trend: the slides of roommates and tradesmen (lib/lent/slide.ts, App\Front\Parts\LentSlide). Their own file, inlined by LentPage beside the filter's: the feed's
   cut of style.css stays as it is. ASCII only; pills 9px, never a capsule.

   --lent-tone is the trade's colour (config worker_ads.group_accents), set on the slide; a roommate has none of their
   own and takes the brand's, as their catalogue card does. */

/* The person, in a line over the price, when photographs fill the frame - as a shorts feed names its author. */
.lent-who{
  display:flex; align-items:center; gap:9px; max-width:100%; margin:0 0 11px;
  font-size:14.5px; color:#fff; text-shadow:var(--lent-ink);
}
.lent-who b{ min-width:0; font-weight:650; letter-spacing:-.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lent-who-face{
  position:relative; flex:none; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in oklab, var(--lent-tone, var(--accent)) 78%, #000);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9), 0 2px 10px rgba(0,0,0,.45);
}
.lent-who-face-pic{ position:absolute; inset:0; border-radius:50%; background-size:cover; background-position:center; }
.lent-who-face-txt{ font-size:12px; font-weight:800; letter-spacing:.02em; color:#fff; text-shadow:none; }
.lent-who-face-seal{
  position:absolute; right:-5px; bottom:-4px; width:16px; height:16px; border-radius:50%;
  display:grid; place-items:center; background:#fff; color:var(--ok); font-size:14px; line-height:1; text-shadow:none;
}

/* The pay: "85 AZN-dan" keeps the sign's size and the ending small and plain; "Razilashma ile" is words, not a figure. */
/* Outweighs the feed's own `.lent-price > span:not(.lent-cur)` (the period: small capitals, spaced) - an ending is
   plain lowercase, close to the sign. */
.lent-body .lent-price .lent-suf{
  font-family:'Manrope','Manrope Fallback',system-ui,-apple-system,sans-serif;
  font-size:.5em; font-weight:700; letter-spacing:0; text-transform:none; color:rgba(255,255,255,.72); margin-left:.06em;
}
.lent-price--words b{ font-size:.8em; letter-spacing:-.016em; }

/* A tradesman's slide: the trade first, in the price's own type and near its size, and the pay under it at the
   title's. The descendant selector
   outweighs the phone's own .lent-price size in the feed's stylesheet. */
.lent-body .lent-title--lead{
  margin:0; max-width:100%;
  font-family:'Manrope','Manrope Fallback',system-ui,-apple-system,sans-serif;
  font-size:30px; font-weight:800; line-height:1.18; letter-spacing:-.022em;
  text-shadow:var(--lent-ink-lg);
  /* The title is clamped to two lines (overflow:hidden), and Manrope's descenders - the tail of "g" in "Rengsaz" -
     reach below a tight line box: room for them under the last line. */
  padding-bottom:.08em;
}
/* The pay stands out as a plate: the feed's glass, a wallet in the trade's colour in front of the figure - first in
   the row under the rule, where a home has its facts. The row's own chip look is not the plate's: its item is bare. */
.lent-body .lent-specs li.lent-specs-pay{
  padding:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
}
.lent-body .lent-specs:has(.lent-specs-pay){ align-items:center; gap:8px; }
.lent-body .lent-price--pay{
  align-self:flex-start; align-items:center; margin:0; padding:7px 13px 7px 11px; border-radius:9px;
  font-size:16px; text-shadow:var(--lent-ink);
  background:linear-gradient(to bottom, rgba(255,255,255,.16), rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.09), 0 2px 8px rgba(0,0,0,.28);
  backdrop-filter:blur(10px) saturate(150%);
}
.lent-body .lent-price--pay > i{
  flex:none; margin-right:8px; font-size:16px; text-shadow:none;
  color:color-mix(in oklab, var(--lent-tone, var(--accent)) 45%, #fff);
}
.lent-body .lent-price--pay b{ font-weight:800; letter-spacing:-.012em; }
.lent-body .lent-price--pay .lent-cur, .lent-body .lent-price--pay .lent-suf{ font-size:.82em; font-weight:800; }
.lent-body .lent-price--pay.lent-price--words b{ font-size:1em; }
@media (max-width:768px){
  .lent-body .lent-title--lead{ font-size:clamp(26px, 7.2vw, 31px); }
}

/* A tradesman's other trades: text under the trade, every one of them - it wraps rather than cuts; three at most (WorkerAd::EXTRA_PROFESSIONS), so it stays a short block. */
.lent-also{
  margin:4px 0 0; max-width:100%; font-size:13px; font-weight:500; line-height:1.4; letter-spacing:.008em;
  color:rgba(255,255,255,.74); text-shadow:var(--lent-ink); text-wrap:pretty;
}

/* ---- No photograph: a card of the person (posterHtml) ----------------------------------------------------------

   Not an empty frame and not a pale one: a deep tile of the trade's colour, as dense as a photograph, so it sits in
   the feed as one more picture (the roommate catalogue card learnt it: a light cover is the cell that stands out). The
   face large in the upper half, two faint rings round it, the trade's mark huge and faint behind; the words under it
   are every slide's. */
/* The room round the card (a desktop's; under 1025px .lent-back is not drawn): the card's own tile, through the blur,
   dimming and saturation a photograph's copy gets (.lent-back in style.css). */
.lent-back--tone{
  background:
    radial-gradient(70% 40% at 50% 30%, rgba(255,255,255,.16), rgba(255,255,255,0) 70%),
    linear-gradient(172deg,
      color-mix(in oklab, var(--lent-tone, var(--accent)) 74%, #0b0a0e) 0%,
      color-mix(in oklab, var(--lent-tone, var(--accent)) 46%, #0b0a0e) 40%,
      color-mix(in oklab, var(--lent-tone, var(--accent)) 18%, #0b0a0e) 72%,
      #0b0a0e 100%);
}
.lent-poster{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 24px 46%;
  background:#160f13;
  background:
    radial-gradient(70% 40% at 50% 30%, rgba(255,255,255,.16), rgba(255,255,255,0) 70%),
    linear-gradient(172deg,
      color-mix(in oklab, var(--lent-tone, var(--accent)) 74%, #0b0a0e) 0%,
      color-mix(in oklab, var(--lent-tone, var(--accent)) 46%, #0b0a0e) 40%,
      color-mix(in oklab, var(--lent-tone, var(--accent)) 18%, #0b0a0e) 72%,
      #0b0a0e 100%);
}
.lent-poster-mark{
  position:absolute; z-index:-1; right:-12%; top:5%;
  font-size:62vw; line-height:1; color:#fff; opacity:.075;
  transform:rotate(-14deg); pointer-events:none;
}
/* The words' own shade is only needed at the foot here: the tile darkens to the floor by itself, and the pool the
   feed lays behind the words of a photograph would dim the name under the face. */
.lent-slide--poster .lent-veil{
  background:linear-gradient(to top,
    rgba(5,4,8,.82) 0, rgba(5,4,8,.62) max(14%,60px), rgba(5,4,8,.3) max(28%,140px), rgba(5,4,8,0) max(42%,230px));
}
.lent-poster-who{ display:flex; flex-direction:column; align-items:center; text-align:center; max-width:100%; }
.lent-poster-face{
  position:relative; flex:none; width:132px; height:132px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, rgba(255,255,255,.3), rgba(255,255,255,.08));
  box-shadow:
    0 0 0 3px rgba(255,255,255,.94),
    0 0 0 15px rgba(255,255,255,.08),
    0 0 0 34px rgba(255,255,255,.035),
    0 22px 50px rgba(0,0,0,.42);
}
.lent-poster-face-pic{ position:absolute; inset:0; border-radius:50%; background-size:cover; background-position:center; }
.lent-poster-face-txt{
  font-family:'Manrope','Manrope Fallback',system-ui,-apple-system,sans-serif;
  font-size:46px; font-weight:800; letter-spacing:-.02em; line-height:1; color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.22);
}
.lent-poster-face-seal{
  position:absolute; right:2px; bottom:4px; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; background:#fff; color:var(--ok); font-size:27px; line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.lent-poster-name{
  margin-top:44px; max-width:20ch;
  font-size:22px; font-weight:700; letter-spacing:-.014em; line-height:1.2; color:#fff;
  text-shadow:var(--lent-ink-lg);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lent-poster-line{
  margin-top:8px; font-size:13.5px; font-weight:550; letter-spacing:.012em; color:rgba(255,255,255,.72);
  text-shadow:var(--lent-ink);
}
/* No dots and no album to swipe: the gesture only moves the feed. */
.lent-slide--poster .lent-shot img{ display:none; }

/* The menu: what a kind does not have is hidden (lib/lent/engine.js) - and a box that is flex is not hidden by the
   attribute alone. */
.lent-menu-item[hidden], .lent-menu-group[hidden]{ display:none; }

/* On a desktop the card is 9:16 in a room: the mark is measured from the card (--lent-card-w on .page-lent). */
@media (min-width:769px){
  .lent-poster-mark{ font-size:calc(var(--lent-card-w, 466px) * .62); }
}
@media (max-width:768px){
  .lent-poster{ padding-bottom:50%; }
  .lent-poster-face{ width:124px; height:124px; }
  .lent-poster-face-txt{ font-size:43px; }
}

/* A home's deal - "Alqi-satqi", "Kiraye", "Gunluk kiraye" - as a plate at the end of its price line, in the facts'
   glass. It outweighs the
   feed's `.lent-price > span:not(.lent-cur)` (the period's small capitals); a price too long for the line sends the
   plate under it rather than past the rail. */
.lent-body .lent-price--deal{ flex-wrap:wrap; row-gap:9px; }
.lent-body .lent-price .lent-deal{
  align-self:center; margin-left:12px; padding:5px 9px; border-radius:9px;
  font-family:inherit; font-size:12.5px; font-weight:650; line-height:1.2; letter-spacing:.012em; text-transform:none;
  color:rgba(255,255,255,.93); white-space:nowrap; text-shadow:var(--lent-ink);
  background:linear-gradient(to bottom, rgba(255,255,255,.13), rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.28);
  backdrop-filter:blur(10px) saturate(150%);
}