/* 09 — applications: live rebuilds of the guideline layouts + mockup photographs.
   Every live layout is a container (cqw units), so type and spacing scale with the box.
   Variables per layout: --ar ratio, --pad side padding, --logo logo width, --logo-top, --h headline, --p text (all in cqw). */
.applications__tools { margin-bottom: 14px; }
.applications__count { margin-bottom: 18px; }

/* ───────── gallery ───────── */
.applications__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 24px); }
.applications__card { display: flex; flex-direction: column; gap: 12px; padding: 10px 10px 14px; background: var(--white); border: 1px solid var(--navy-15); border-radius: var(--r-m); color: var(--navy); text-align: left; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.applications__card:hover { border-color: var(--navy); box-shadow: 0 6px 20px rgba(22, 62, 84, .1); }
.applications__card[hidden] { display: none; }
.applications__thumb { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--sand-soft); border-radius: 8px; overflow: hidden; pointer-events: none; }
.applications__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.applications__thumb .app-layout { width: auto; height: 84%; margin: 0; min-width: 0; max-width: none; }
.applications__thumb--wide .app-layout { width: 88%; height: auto; }
.applications__name { font-weight: 500; line-height: 1.25; padding: 0 4px; }

/* ───────── popup ───────── */
.applications__item[hidden] { display: none; }
.applications__item .applications__head h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.applications__acts { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
.applications__nav { flex: none; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 24px; background: var(--white); border-top: 1px solid var(--navy-15); }
.applications__nav .icon-btn { color: var(--navy); }

.applications__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.applications__head > div:first-child { display: grid; gap: 6px; max-width: 640px; }
.applications__body { display: grid; gap: var(--gap); }
.applications__body--split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.applications__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(14px, 3vw, 40px); width: 100%; }
.applications__row--end { align-items: flex-end; }
.applications__fig { display: grid; gap: 10px; flex: 1 1 130px; max-width: var(--max, 320px); min-width: 0; }
.applications__fig .caption { text-align: center; font-size: var(--fs-micro); }
.applications__photo { margin: 0; padding: 0; display: block; }
.applications__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.applications__photo--wide { background: transparent; }
.applications__photo--wide img { max-width: 960px; margin: 0 auto; height: auto; border-radius: var(--r-m); }
.applications__trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.applications__trio .applications__photo img { aspect-ratio: 4 / 3; }
.applications__note { margin-top: -6px; }
.applications__scroll { display: block; overflow-x: auto; }
.applications__email { margin: 0 auto; width: 100%; min-width: 480px; max-width: 720px; }

/* ───────── live layout ───────── */
.app-layout {
  --pad: 8; --logo: 34; --logo-top: 8; --h: 6; --p: 3;
  position: relative; container-type: inline-size; width: 100%; aspect-ratio: var(--ar, 3 / 4);
  background: var(--navy); color: var(--navy); font-weight: 300; line-height: 1.25; overflow: hidden;
}
.app-layout--frame { border-radius: 12px; }
.app-layout__logo { position: absolute; left: calc(var(--pad) * 1cqw); top: calc(var(--logo-top) * 1cqw); width: calc(var(--logo) * 1cqw); display: block; }
.app-layout__logo svg { width: 100%; height: auto; }
.app-layout__logo--flow { position: static; }

/* navy field above the tag */
.app-layout__field { position: absolute; left: 0; right: 0; top: 0; height: var(--plate-top); padding: 0 calc(var(--pad) * 1cqw) calc(var(--field-b, 7) * 1cqw); display: flex; flex-direction: column; justify-content: flex-end; color: var(--blue); }
.app-layout__field--start { justify-content: flex-start; padding: calc(var(--field-t, 7) * 1cqw) calc(var(--pad) * 1cqw) 0; }
.app-layout__field--logo { align-items: flex-start; }

/* the tag: from the top of the tag to its bottom edge */
.app-layout__tag { position: absolute; left: 0; top: var(--plate-top); bottom: var(--plate-bottom); max-width: calc(100% - var(--plate-right, 0px)); padding: 0 calc(var(--pad) * 1cqw); display: flex; flex-direction: column; justify-content: center; }
.app-layout__tag--full { max-width: none; right: 0; }
.app-layout__tag--between { justify-content: space-between; padding-top: calc(var(--tag-t, 10) * 1cqw); padding-bottom: calc(var(--tag-b, 10) * 1cqw); }
.app-layout__tag--start { justify-content: flex-start; padding-top: calc(var(--tag-t, 10) * 1cqw); }
.app-layout__tag--end { justify-content: flex-start; flex-direction: row; align-items: flex-end; padding-bottom: calc(var(--tag-b, 4) * 1cqw); }
.app-layout__tag--letter { justify-content: flex-start; padding-top: 15cqw; padding-bottom: 6cqw; overflow: hidden; }
.app-layout__tag--center { justify-content: center; }

/* type */
.app-layout__h { font-size: calc(var(--h) * 1cqw); line-height: 1.14; font-weight: 300; margin: 0; }
.app-layout__p { font-size: calc(var(--p) * 1cqw); line-height: 1.35; margin: 0; }
.app-layout__med { font-weight: 500; }
.app-layout__label { font-size: calc(var(--p) * 1.2cqw); font-weight: 300; letter-spacing: .02em; text-transform: uppercase; margin: 0; }
.app-layout__gap { margin-top: calc(var(--p) * 1.7cqw); }
.app-layout__gap2 { margin-top: 9cqw; }
.app-layout__narrow { max-width: 62cqw; }
.app-layout__lines p { margin: 0; line-height: 1.3; }
.app-layout__just { text-align: justify; hyphens: none; margin-top: 1.4cqw; }
.app-layout__title { font-size: 2.1cqw; font-weight: 500; letter-spacing: .01em; margin-bottom: .2cqw; }
.app-layout__tag--letter .app-layout__p.app-layout__med { margin-top: 2.6cqw; }
.app-layout__pill { display: inline-block; align-self: flex-start; background: var(--blue); color: var(--navy); font-size: calc(var(--p) * 1cqw); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 2.4cqw 4.6cqw; border-radius: 999px; line-height: 1; }
.app-layout__pill::after { content: " ›"; }
.app-layout__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* plain circles that stand in for social icons */
.app-layout__dots { position: absolute; left: 53.6cqw; bottom: 2.6cqw; display: flex; gap: .7cqw; }
.app-layout__dots i { width: 3.5cqw; height: 3.5cqw; border-radius: 50%; background: var(--sand); display: block; }

/* venn diagram slide */
.app-layout__venn { position: absolute; inset: 0; width: 100%; height: 100%; font-family: var(--font); font-weight: 300; }

/* slide viewer */
.applications__slides { width: 100%; max-width: 760px; display: grid; gap: 14px; margin: 0 auto; border-radius: var(--r-m); }
.applications__slides:focus-visible { outline-offset: 6px; }
.applications__slidebox { width: 100%; }
.applications__slidebar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.applications__slidebar .icon-btn { color: var(--navy); background: var(--white); border-color: transparent; }
.applications__slidebar .icon-btn:hover { background: var(--sand); }
.applications__counter { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: center; }

@media (max-width: 1180px) { .applications__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1080px) {
  .applications__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .applications__body--split { grid-template-columns: minmax(0, 1fr); }
  .applications__photo img { height: auto; }
}
@media (max-width: 640px) {
  .applications__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .applications__card { padding: 8px 8px 12px; }
  .applications__tools .btn { align-self: flex-start; }
  .applications__nav { padding: 8px 16px; }
  .applications__trio { grid-template-columns: minmax(0, 1fr); }
  .applications__row { gap: 14px; }
  .applications__fig { flex-basis: 100%; }
  .applications__head .btn { align-self: flex-start; }
}