/* ==========================================================================
   FunctionAlps showcase — pages/home-4.css
   New pieces that replace Habitline media: phone frames for our screenshots
   (.pframe), an HTML phone (.hphone + .lib library screen), the browser frame
   and the four use-case compositions (desktop, app, care plan, EN/FR).
   ========================================================================== */

/* ---------- phone frame around a screenshot (540×960). Bezel in cqw: % padding would follow the parent's width ---------- */
.pframe { position: relative; display: flow-root; container-type: inline-size; background: #1A1A16; border-radius: 13% / 7%; box-shadow: rgba(26, 26, 22, .28) 0 30px 60px -20px, inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.pframe > img { display: block; width: calc(100% - 7cqw); margin: 3.5cqw; height: auto; aspect-ratio: 640 / 1391; object-fit: cover; object-position: 50% 0; border-radius: 11cqw; background: #FBF8F2; }

/* ---------- HTML phone (bezel + scaled screen) ---------- */
.hphone { display: flow-root; container-type: inline-size; background: #1A1A16; border-radius: 13% / 6.5%; box-shadow: rgba(0, 0, 0, .35) 0 30px 60px -20px, inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.hphone__screen { position: relative; container-type: inline-size; margin: 3.5cqw; aspect-ratio: 9 / 17.5; border-radius: 10cqw; overflow: hidden; background: #FBF8F2; }
.lib { --u: calc(100cqw / 330); position: absolute; inset: 0; display: flex; flex-direction: column; gap: calc(14 * var(--u)); padding: calc(18 * var(--u)) calc(18 * var(--u)) 0; color: var(--c-ink); }
.lib__status { display: flex; justify-content: space-between; align-items: center; padding: 0 calc(10 * var(--u)); font: 600 calc(12 * var(--u))/1 var(--f-body); }
.lib__status i { display: block; width: calc(60 * var(--u)); height: calc(18 * var(--u)); border-radius: 20px; background: var(--c-ink); }
.lib__status b { display: block; width: calc(22 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(3 * var(--u)); border: calc(1.5 * var(--u)) solid var(--c-ink); }
.lib__title { font: 400 calc(28 * var(--u))/1.1 var(--f-display); padding-top: calc(6 * var(--u)); }
.lib__search { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: 50px; background: var(--c-white); box-shadow: rgba(26, 26, 22, .05) 0 4px 10px; font: 400 calc(13 * var(--u))/1.2 var(--f-body); color: var(--c-stone); }
.lib__search img { width: calc(15 * var(--u)); height: calc(15 * var(--u)); opacity: .6; }
.lib__tabs { display: flex; gap: calc(6 * var(--u)); }
.lib__tabs span { padding: calc(5 * var(--u)) calc(11 * var(--u)); border-radius: 50px; background: var(--c-line); font: 500 calc(12 * var(--u))/1.3 var(--f-body); color: var(--c-ink-2); }
.lib__tabs span.is-on { background: var(--fa-forest); color: var(--c-white); }
.lib__shelf { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.lib__label { display: flex; justify-content: space-between; font: 600 calc(11 * var(--u))/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-stone); }
.lib__label span:last-child { color: var(--fa-forest); letter-spacing: 0; text-transform: none; font-weight: 500; }
.lib__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)); }
.lib__book { display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
.lib__book img { width: 100%; aspect-ratio: 1 / 1.15; object-fit: cover; border-radius: calc(10 * var(--u)); }
.lib__book p { font: 500 calc(11 * var(--u))/1.25 var(--f-body); color: var(--c-ink); }

/* ---------- browser frame (desktop screenshot) ---------- */
.browser { border-radius: 14px; overflow: hidden; background: var(--c-white); box-shadow: rgba(0, 0, 0, .35) 0 30px 60px -20px; }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #EDE6D8; }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #CFC6B5; }
.browser__url { margin-left: 10px; flex: 1; max-width: 260px; padding: 3px 10px; border-radius: 6px; background: var(--c-white); font: 400 12px/1.4 var(--f-body); color: var(--c-stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser img { width: 100%; height: auto; }

/* ---------- use-case compositions (inside .upanel, left of the glass card) ---------- */
.upanel--forest { background: radial-gradient(120% 90% at 20% 10%, #3B6A48 0%, #2E5438 40%, #1F3A27 100%); }
.upanel--cream { background: radial-gradient(120% 90% at 20% 10%, #F7F2EA 0%, #EDE4D4 60%, #E2D6C1 100%); }
.upanel--mito .upanel__mito { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.uc { position: absolute; z-index: 2; }
.uc--desktop { left: 40px; top: 40px; width: 560px; }
.uc--phones { left: 50px; top: 34px; width: 500px; display: flex; gap: 18px; align-items: flex-start; }
.uc--phones .pframe { flex: 1; min-width: 0; }
.uc--phones .pframe:nth-child(1) { rotate: -5deg; margin-top: 26px; } .uc--phones .pframe:nth-child(3) { rotate: 5deg; margin-top: 26px; }
.uc--plan, .uc--lang { left: 40px; top: 40px; width: 540px; }
.plan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; border-radius: 18px; background: var(--c-white); box-shadow: rgba(0, 0, 0, .3) 0 30px 60px -20px; color: var(--c-ink); }
.plan__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan__head h4 { font: 400 22px/1.2 var(--f-display); }
.plan__head span { padding: 3px 10px; border-radius: 50px; background: rgba(196, 139, 53, .15); color: #8A5F1F; font: var(--t-xs); }
.plan__box { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--c-page); }
.plan__box--wide { grid-column: 1 / -1; }
.plan__k { font: 600 11px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-stone); }
.plan__v { font: 400 14px/1.35 var(--f-body); color: var(--c-ink); }
.plan__phases { display: flex; gap: 6px; }
.plan__phases span { flex: 1; height: 6px; border-radius: 6px; background: #DDD3C2; }
.plan__phases span.is-on { background: var(--fa-forest); }
.lang { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lang__card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 18px; background: var(--c-white); box-shadow: rgba(26, 26, 22, .18) 0 24px 50px -20px; }
.lang__card:nth-child(2) { margin-top: 40px; }
.lang__tag { align-self: flex-start; padding: 3px 10px; border-radius: 50px; background: var(--fa-forest); color: var(--c-white); font: 500 12px/1.4 var(--f-body); letter-spacing: .06em; }
.lang__card:nth-child(2) .lang__tag { background: var(--fa-gold); }
.lang__title { font: 400 22px/1.2 var(--f-display); color: var(--c-ink); }
.lang__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: var(--c-page); font: 400 14px/1.3 var(--f-body); color: var(--c-ink); }
.lang__item img { width: 16px; height: 16px; }
@media (max-width: 1199.98px) {
  .uc--desktop { left: 30px; top: 30px; width: 58%; }
  .uc--phones { left: 30px; top: 30px; width: 52%; gap: 12px; }
  .uc--plan, .uc--lang { left: 30px; top: 30px; width: 52%; }
  .plan { grid-template-columns: 1fr; }
  .plan__box:nth-of-type(n+5) { display: none; }
  .lang { grid-template-columns: 1fr; gap: 10px; }
  .lang__card:nth-child(2) { margin-top: 0; }
  .lang__item:nth-of-type(n+4) { display: none; }
  .upanel__glass { width: 300px; }
}
@media (max-width: 809.98px) {
  .uc--desktop, .uc--phones, .uc--plan, .uc--lang { left: 16px; right: 16px; top: 16px; width: auto; }
  .uc--phones { gap: 8px; }
  .uc--phones .pframe:nth-child(1), .uc--phones .pframe:nth-child(3) { margin-top: 14px; }
  .plan { padding: 12px; gap: 8px; }
  .plan__box:nth-of-type(n+4) { display: none; }
  .plan__head h4 { font-size: 18px; }
  .lang { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lang__card { padding: 12px; gap: 8px; }
  .lang__title { font-size: 17px; }
  .lang__item { padding: 7px 8px; font-size: 13px; }
  .lang__item:nth-of-type(n+3) { display: none; }
  .upanel__glass { width: 100%; }
}