/* OXX – High-Fidelity Screens: expanding drawers + preview modal
   Uses the site theme palette only (blue #2563EB, teal #00BFA6, navy #030C18 / #0A1628, stone neutrals). */
.hf { --hf-ease: cubic-bezier(.22, 1, .36, 1); font-family: 'Inter', sans-serif; }
.hf-hint { font-size: .875rem; color: #78716c; margin: 0 0 1.25rem; }
.hf-drawers { display: flex; flex-direction: column; gap: .75rem; }

.hf-drawer { position: relative; border: 1px solid #e7e5e4; border-radius: 1rem; background: #fafaf9; overflow: hidden;
  transition: border-color .4s, background-color .4s, box-shadow .5s; }
.hf-drawer:hover { border-color: rgba(37, 99, 235, .45); }
.hf-drawer.is-open { background: #fff; border-color: rgba(37, 99, 235, .35); box-shadow: 0 18px 44px -22px rgba(37, 99, 235, .45); }

.hf-head { appearance: none; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1.1rem 1.25rem; }
.hf-head:focus-visible { outline: 2px solid #2563EB; outline-offset: -2px; border-radius: 1rem; }
.hf-num { font-size: .75rem; font-weight: 700; letter-spacing: .12em; color: #2563EB; font-variant-numeric: tabular-nums; }
.hf-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.125rem; color: #1c1917; flex: 1; transition: color .3s; }
.hf-drawer.is-open .hf-title { color: #2563EB; }
.hf-count { font-size: .6875rem; font-weight: 600; color: #57534e; background: #f5f5f4; border: 1px solid #e7e5e4; border-radius: 999px; padding: .2rem .65rem; white-space: nowrap; }
.hf-chev { width: .6rem; height: .6rem; border-right: 2px solid #78716c; border-bottom: 2px solid #78716c; transform: rotate(45deg); transition: transform .5s var(--hf-ease), border-color .3s; margin: 0 .25rem .2rem 0; flex: none; }
.hf-drawer.is-open .hf-chev { transform: rotate(-135deg); border-color: #2563EB; margin: .25rem .25rem 0 0; }

/* panel – stacked (accordion) mode */
.hf-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .65s var(--hf-ease); }
.hf-drawer.is-open > .hf-panel { grid-template-rows: 1fr; }
.hf-panel-inner { overflow: hidden; min-height: 0; }
.hf-body { padding: 0 1.25rem 1.5rem; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s var(--hf-ease); }
.hf-drawer.is-open .hf-body { opacity: 1; transform: none; transition-delay: .15s; }
.hf-panel-title { display: none; }
.hf-desc { font-size: .875rem; line-height: 1.65; color: #78716c; margin: 0 0 1.25rem; max-width: 62ch; }

.hf-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .hf-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hf-grid[data-cols="5"], .hf-grid[data-cols="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .hf-grid[data-cols="5"], .hf-grid[data-cols="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hf-fig { margin: 0; }
.hf-thumb { appearance: none; position: relative; display: block; width: 100%; padding: 0; border: 1px solid #e7e5e4; border-radius: .75rem; overflow: hidden;
  background: #fff; cursor: zoom-in; aspect-ratio: var(--ar, 16 / 10); transition: border-color .3s, box-shadow .4s, transform .5s var(--hf-ease); }
.hf-thumb[data-ar="tall"] { --ar: 4 / 5; }
.hf-thumb[data-ar="phone"] { --ar: 9 / 17; }
.hf-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--hf-ease); }
.hf-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(3, 12, 24, .55), transparent 55%); opacity: 0; transition: opacity .4s; }
.hf-eye { position: absolute; z-index: 1; left: 50%; bottom: .85rem; transform: translate(-50%, 8px); opacity: 0; transition: opacity .4s, transform .5s var(--hf-ease);
  font-size: .75rem; font-weight: 600; color: #fff; background: #2563EB; border-radius: 999px; padding: .35rem .9rem; white-space: nowrap; }
.hf-thumb:hover, .hf-thumb:focus-visible { border-color: #2563EB; box-shadow: 0 14px 34px -16px rgba(37, 99, 235, .55); transform: translateY(-3px); }
.hf-thumb:hover img, .hf-thumb:focus-visible img { transform: scale(1.04); }
.hf-thumb:hover::after, .hf-thumb:focus-visible::after { opacity: 1; }
.hf-thumb:hover .hf-eye, .hf-thumb:focus-visible .hf-eye { opacity: 1; transform: translate(-50%, 0); }
.hf-thumb:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.hf-cap { margin: .6rem 0 0; font-size: .75rem; line-height: 1.4; color: #78716c; text-align: center; }

/* horizontal drawer mode */
@media (min-width: 1200px) {
  .hf-drawers { flex-direction: row; align-items: stretch; gap: .75rem; }
  .hf-drawer { display: flex; flex-direction: row; flex: 0 0 76px; min-width: 0;
    transition: flex-grow .75s var(--hf-ease), border-color .4s, background-color .4s, box-shadow .5s; }
  .hf-drawer.is-open { flex: 1 1 76px; }
  .hf-head { flex: 0 0 76px; width: 76px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 1.25rem; padding: 1.25rem 0; }
  .hf-title { flex: 0 1 auto; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  .hf-count { display: none; }
  .hf-chev { order: 3; margin: auto 0 0 !important; transform: rotate(-45deg); }
  .hf-drawer.is-open .hf-chev { transform: rotate(135deg); }
  .hf-panel { display: block; flex: 0 0 0; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
  .hf-drawer.is-open > .hf-panel { flex: 1 1 0; opacity: 1; visibility: visible; transition: opacity .6s .3s, visibility 0s; }
  .hf-panel-inner { min-width: 600px; height: 100%; }
  .hf-body { padding: 1.5rem 1.5rem 1.5rem .25rem; }
  .hf-panel-title { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.5rem; color: #1c1917; margin: 0 0 .5rem; }
  .hf-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-grid[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
  .hf-grid[data-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
}

/* preview modal */
.hf-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1rem; visibility: hidden; opacity: 0; transition: opacity .35s, visibility 0s .35s; font-family: 'Inter', sans-serif; }
.hf-modal.is-open { visibility: visible; opacity: 1; transition: opacity .35s, visibility 0s; }
.hf-backdrop { position: absolute; inset: 0; background: rgba(3, 12, 24, .86); backdrop-filter: blur(6px); }
.hf-box { position: relative; display: flex; flex-direction: column; max-width: 100%; max-height: 100%; min-width: min(480px, 100%); border-radius: 1rem; overflow: hidden; background: #0A1628;
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8); transform: translateY(24px) scale(.97); transition: transform .5s var(--hf-ease, cubic-bezier(.22, 1, .36, 1)); }
.hf-modal.is-open .hf-box { transform: none; }
.hf-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); flex: none; }
.hf-m-title { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .9375rem; color: #fff; }
.hf-m-sub { margin: .1rem 0 0; font-size: .75rem; color: rgba(255, 255, 255, .5); }
.hf-actions { display: flex; align-items: center; gap: .4rem; flex: none; }
.hf-btn { appearance: none; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .85); font: inherit; font-size: .75rem; font-weight: 600;
  border-radius: .6rem; padding: .45rem .7rem; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; line-height: 1; }
.hf-btn:hover { background: rgba(37, 99, 235, .25); border-color: #2563EB; color: #fff; }
.hf-btn:focus-visible { outline: 2px solid #00BFA6; outline-offset: 2px; }
.hf-m-count { font-size: .75rem; color: rgba(255, 255, 255, .45); min-width: 3rem; text-align: center; font-variant-numeric: tabular-nums; }
.hf-scroll { overflow: auto; background: #f5f5f4; flex: 1 1 auto; min-height: 0; max-height: calc(100vh - 6.5rem); overscroll-behavior: contain; }
.hf-scroll img { display: block; max-width: 100%; height: auto; margin: 0 auto; transition: opacity .3s; }
.hf-scroll.is-actual img { max-width: none; }
.hf-scroll.is-loading img { opacity: 0; }
@media (max-width: 640px) { .hf-m-sub, .hf-btn[data-hf-zoom] { display: none; } }

/* phone-frame preview (mobile application views only) -------------------------------- */
.hf-phone-wrap, .hf-phone { display: contents; }               /* transparent wrappers for the normal preview */
.hf-side { display: none; }
.hf-modal.is-phone .hf-box { background: transparent; border: 0; box-shadow: none; overflow: visible; max-height: none; align-items: center; }
.hf-modal.is-phone .hf-bar { width: 100%; flex: none; background: #0A1628; border: 1px solid rgba(255, 255, 255, .1); border-radius: .9rem; margin-bottom: 1rem; }
.hf-modal.is-phone .hf-phone-wrap { display: block; position: relative; }
.hf-modal.is-phone .hf-phone { display: block; position: relative; padding: 24px 8px 24px; border-radius: 16px;
  background: linear-gradient(145deg, #222c3d, #05080f 60%); border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 0 0 2px #0b1220, inset 0 0 0 2px rgba(255, 255, 255, .05), 0 40px 90px -25px rgba(0, 0, 0, .85); }
.hf-modal.is-phone .hf-phone::before { content: ''; position: absolute; top: 13px; left: 50%; width: 64px; height: 6px; border-radius: 999px;
  background: #05080f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transform: translateX(-50%); }
.hf-modal.is-phone .hf-phone::after { content: ''; position: absolute; top: 11px; left: calc(50% + 50px); width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3b4a63, #05080f 70%); }
.hf-modal.is-phone .hf-side { display: block; position: absolute; width: 4px; background: #11192a; border: 1px solid rgba(255, 255, 255, .12); }
.hf-modal.is-phone .hf-side-l { left: -5px; top: 112px; height: 44px; border-radius: 3px 0 0 3px; box-shadow: 0 60px 0 0 #11192a; }
.hf-modal.is-phone .hf-side-r { right: -5px; top: 150px; height: 72px; border-radius: 0 3px 3px 0; }
.hf-modal.is-phone .hf-scroll { display: block; flex: none; width: var(--pw, 300px); height: var(--ph, 650px); max-height: none; margin: 0 auto;
  border-radius: 8px; background: #fff; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none; }                  /* scrolls, but no visible scrollbar */
.hf-modal.is-phone .hf-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.hf-modal.is-phone .hf-scroll img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; }
.hf-modal.is-phone .hf-btn[data-hf-zoom] { display: none; }
@media (prefers-reduced-motion: reduce) { .hf *, .hf-modal, .hf-box { transition-duration: .01ms !important; } }