/* resorted.dev/about - the about card, socials, PC specs and peripherals. Builds on the
   hub's parts (style.css): the same top row, logo, footer and cards with light running
   around them. (The classes start with "info-": the page's first name was /info.) */
.info .hub-top {
  justify-content: flex-start;
}
.info .hub-sparks i {
  top: 145px;
}
.info-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(100%, 1080px);
  margin: 44px auto 0;
}

/* The about card (about.json): the text is laid out across the whole card (so centred
   text is centred on the card); on the right, on top of it, the square picture with
   the language flags centred under it (without a picture: the flags in the top right
   corner). about.js keeps a paragraph clear of them only when it would run under them,
   or is right-aligned beside them. A line that stops before the picture, and the
   socials row across the whole card (its alignment is the card's). */
.info-about {
  padding: 26px 30px;
  font-size: 17px;
  line-height: 1.6;
}
.info-about-main {
  --img: 210px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.info-about-main.has-side {
  /* text, line (a tall picture adds its space here, so the line sits level with the
     bottom of the picture and flags), socials */
  grid-template-columns: minmax(0, 1fr) fit-content(40%);
  grid-template-rows: auto 1fr auto;
  column-gap: 26px;
}
.info-about-main.has-image { grid-template-columns: minmax(0, 1fr) min(var(--img), 34%); }
.info-about-main.img-s { --img: 150px; }
.info-about-main.img-l { --img: 280px; }
.info-about-text {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
}
.info-about-side {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* no picture: just the flags, in the top right corner, and the line goes all the way across */
.info-about-main:not(.has-image) .info-about-side { grid-row: 1; align-items: flex-end; }
.info-divider {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  height: 1px;
  margin-top: 22px;
  background: var(--line);
}
.info-about-main.has-image .info-divider { grid-column: 1; }
.info-about-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line2);
  border-radius: 18px;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9), 0 0 40px -24px rgba(79, 220, 255, 0.7);
}
.info-about-img.round { border-radius: 50%; }
.info-row {
  grid-column: 1 / -1;
  grid-row: 3;
}
.info-about-text > :first-child { margin-top: 0; }
.info-about-text > :last-child { margin-bottom: 0; }
.info-about-text p,
.info-about-text ul,
.info-about-text ol {
  margin: 0 0 12px;
}
.info-about-text ul,
.info-about-text ol {
  padding-left: 24px;
}
.info-about-text li p { margin: 0; }
.info-line { display: block; } /* one typed line of a paragraph (about.js) */
.info-about-text li + li { margin-top: 4px; }
.info-about-text a { overflow-wrap: anywhere; }

/* Languages: flags (with or without the names) - centred under the picture, or right-aligned
   in the corner without one */
.info-langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.info-about-main:not(.has-image) .info-langs { justify-content: flex-end; }
.info-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px 4px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  font-size: 14px;
  line-height: 1.4;
}
.info-lang.flag-only { padding: 5px 7px; }
.info-lang img {
  display: block;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* The socials as a row: small or big icons, with or without names, left / centre / right */
.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.info-divider:not([hidden]) + .info-row { margin-top: 18px; }
.info-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line2);
  background: var(--field);
  color: var(--text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}
.info-chip:hover {
  color: var(--text);
  border-color: rgba(79, 220, 255, 0.55);
  background: radial-gradient(90px circle at var(--mx) var(--my), rgba(79, 220, 255, 0.16), transparent 70%), var(--field);
  box-shadow: 0 0 24px -8px rgba(79, 220, 255, 0.75);
  transform: translateY(-2px);
}
.info-chip-icon {
  display: grid;
  place-items: center;
  flex: none;
}
.info-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
  line-height: 1.25;
}
.info-chip-text b {
  font: 600 14px var(--font-display);
  letter-spacing: 0.02em;
}
.info-chip-text small {
  color: var(--muted);
  font-size: 13px;
}
/* small: round buttons, or pills with the name */
.info-chip.small {
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 999px;
}
.info-chip.small .info-chip-icon { color: #b9dcf5; transition: color 0.2s; }
.info-chip.small:hover .info-chip-icon { color: var(--c1); }
.info-chip.small.named { padding: 0 15px 0 12px; }
/* big: tiles like the service icons, the glyph in the logo's gradient */
.info-chip.big {
  padding: 0;
  border-radius: 17px;
}
.info-chip.big .info-chip-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #202a38, #0d1219);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(79, 220, 255, 0.4);
}
.info-chip.big .info-chip-icon svg { filter: drop-shadow(0 0 6px rgba(61, 155, 255, 0.55)); }
.info-chip.big.named { gap: 14px; padding-right: 20px; }
.info-chip.big .info-chip-text b { font-size: 16px; }

/* Tooltips in the page's look (info.js shows them for anything with data-tip) */
.info-tip {
  position: fixed;
  z-index: 1001;
  max-width: 260px;
  padding: 7px 11px;
  border: 1px solid var(--line2);
  border-radius: 9px;
  background: #1a2330;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.85), 0 0 24px -12px rgba(79, 220, 255, 0.7);
  pointer-events: none;
  animation: info-tip 0.14s ease-out;
}
@keyframes info-tip { from { opacity: 0; transform: translateY(4px); } }

/* The "copied" popup */
.info-toast { font-size: 15px; }

.info-row.align-center { justify-content: center; }
.info-row.align-right { justify-content: flex-end; }

/* PC specs, peripherals ...: one panel per section, spaced like the rest */
#setup {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Contact: as many columns as split the cards evenly (info.js sets --cols); stacked on phones */
.info-contact {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 12px;
}
.info-contact .hub-tool {
  width: 100%;
  gap: 16px;
  padding: 20px;
  background: var(--field);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.info-contact .hub-tool::after {
  background: var(--field);
}
.info-contact .hub-tool:hover::after {
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(79, 220, 255, 0.14), transparent 70%), var(--field);
}
.info-badge,
.spec-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(79, 220, 255, 0.16), rgba(61, 139, 255, 0.16));
  box-shadow: inset 0 0 0 1px rgba(79, 220, 255, 0.35);
  color: #9fecff;
}
.brand {
  flex: none;
  fill: currentColor;
}
/* the logo's gradient (the <linearGradient id="info-grad"> in info.html) */
.brand.grad { fill: url(#info-grad); }
.ic.grad { stroke: url(#info-grad); }
.info-text,
.spec-text,
.spec-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.info-text small,
.spec-label {
  color: var(--faint);
  font: 600 12px var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.info-text b {
  color: var(--text);
  font: 600 19px/1.3 var(--font-display);
  overflow-wrap: anywhere;
}
.info-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px;
  transition: color 0.2s;
}
.hub-tool:hover .info-act {
  color: var(--c1);
}
.hub-tool.copied .info-act {
  color: var(--ok);
}

/* PC specs, peripherals ...: columns that split the cards evenly (info.js sets --cols; one on phones) */
.specs {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.spec {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--field);
  transition: border-color 0.2s, background 0.2s;
}
.spec:hover {
  border-color: var(--line2);
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(79, 220, 255, 0.08), transparent 70%), var(--field);
}
.spec-ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.spec-label {
  margin-bottom: 1px;
}
.spec b {
  display: block;
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
}
.spec-detail {
  color: var(--muted);
  font-size: 14px;
}
.nw {
  white-space: nowrap;
}
/* A product name: a link to the shop, the arrow lights up on hover */
.spec-link {
  color: inherit;
  text-decoration: none;
}
.spec-link .ic {
  margin-left: 4px;
  vertical-align: -1px;
  color: var(--faint);
  transition: color 0.2s, transform 0.2s;
}
.spec-link:hover {
  color: #b8e2ff;
}
.spec-link:hover .ic {
  color: var(--c1);
  transform: translate(2px, -2px);
}
/* Tags next to a name: "Main" in blue, "OLED" true black with a lit edge */
.spec b .tag {
  margin-left: 4px;
  vertical-align: 2px;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.tag.oled {
  border-color: rgba(79, 220, 255, 0.5);
  background: #000;
  color: #fff;
  box-shadow: 0 0 12px -3px rgba(79, 220, 255, 0.75);
}
.spec-item + .spec-item {
  margin-top: 8px;
}

@media (max-width: 760px) {
  .specs,
  .info-contact { grid-template-columns: 1fr; }
  .info-about { padding: 20px; font-size: 16px; }
  .info-about-main.has-side { column-gap: 16px; }
  .info-about-img { border-radius: 14px; }
  .info-col { margin-top: 32px; }
  .info .rui-panel { padding: 16px; border-radius: 20px; }
  .info .hub-logo .rui-mark { --w: 96px !important; }
  .info .hub-sparks i { top: 122px; }
}