/* ALTARIA V11.1 · Admin editors · 20261011 */
/* Shared image controls: preview above actions, with no fixed side column. */
.a112-media-field,
.a112-media-field.large {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  align-content:start;
  gap:12px;
  width:100%;
  min-width:0;
  height:auto;
  padding:14px;
  box-sizing:border-box;
  border:1px solid #e9dff1;
  border-radius:18px;
  background:linear-gradient(145deg,#fff,#fcf9ff);
}
.a112-media-field > *, .a112-media-copy > *,
.a112-media-primary > *, .a112-media-secondary > * {min-width:0;box-sizing:border-box}
.a112-media-field .a112-media-copy {display:contents}
.a112-media-copy > div:first-child {order:0}
.a112-media-copy > div:first-child strong {display:block;font-size:13px;line-height:1.4;color:#392b48}
.a112-media-copy > div:first-child small {display:block;font-size:11px;line-height:1.45;color:#87788f;margin-top:4px;overflow-wrap:anywhere}
.a112-media-field .a112-media-preview,
.a112-media-field.large .a112-media-preview {
  order:1;
  width:100%;
  height:200px;
  min-height:0;
  max-height:240px;
  aspect-ratio:4/3;
  border:1px solid #efe5f4;
  border-radius:14px;
  background:linear-gradient(140deg,#f4edf9,#fff7fb);
}
.a112-media-preview > img {display:block;width:100%;height:100%;object-fit:contain}
.a112-media-preview > div {max-width:100%;padding:16px;gap:8px}
.a112-media-preview > div strong {font-size:21px;line-height:1.15}
.a112-media-preview > div small {font-size:11px;line-height:1.4;max-width:210px}
.a112-media-preview > span {font-size:16px;right:12px;top:10px}
.a112-media-field .a112-media-primary {order:2;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.a112-media-primary button {
  width:100%;min-width:0;min-height:49px;height:auto;padding:10px 12px;
  display:flex;align-items:center;justify-content:flex-start;gap:10px;
  border:1px solid #e5d7ef;border-radius:11px;background:#fff;
  color:#583576;text-align:left;white-space:normal;cursor:pointer;
}
.a112-media-primary button.vault {background:#f2eaff;border-color:#dfcdf7;box-shadow:none}
.a112-media-primary button svg,.a112-media-secondary button svg {flex:0 0 auto}
.a112-media-primary button > span {min-width:0;overflow-wrap:anywhere}
.a112-media-primary b {font-size:12px;line-height:1.35}
.a112-media-primary small {font-size:10px;line-height:1.4;color:#87768f;margin-top:3px}
.a112-media-field .a112-media-secondary {order:3;display:flex;gap:8px;flex-wrap:wrap}
.a112-media-secondary button {
  flex:1 1 110px;min-width:0;max-width:100%;height:auto;min-height:39px;
  padding:9px 10px;font-size:11px;line-height:1.35;justify-content:center;
  border:1px solid #e5d7ef;border-radius:10px;white-space:normal;cursor:pointer;
}
.a112-media-copy .a112-media-error {order:4;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.a112-media-primary button:focus-visible,.a112-media-secondary button:focus-visible {outline:3px solid #cbb0ed;outline-offset:3px}
.a112-media-primary button:disabled {opacity:.55;cursor:wait}

/* Products, plans and courses share one bounded, readable dialog layout. */
.a7-modal:has(> .a110-editor-modal),
.a7-modal:has(> .a109-course-modal) {
  width:min(1040px,calc(100vw - 48px));
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  padding:24px;
  border-radius:24px;
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.a7-modal:has(> .a110-editor-modal) > .a7-modal-head,
.a7-modal:has(> .a109-course-modal) > .a7-modal-head {
  margin:0 0 24px;gap:20px;
}
.a7-modal:has(> .a110-editor-modal) .a7-modal-head h2,
.a7-modal:has(> .a109-course-modal) .a7-modal-head h2 {font-size:36px;line-height:1.1;margin-top:8px}
.a7-modal:has(> .a110-editor-modal) .a7-icon-btn,
.a7-modal:has(> .a109-course-modal) .a7-icon-btn {flex:0 0 40px;width:40px;height:40px}
.a110-editor-modal,.a109-course-modal {
  display:grid;
  grid-template-columns:minmax(240px,300px) minmax(0,1fr);
  gap:24px;
  align-items:start;
  min-width:0;
}
.a110-editor-modal > *, .a109-course-modal > *,
.a110-editor-fields > *, .a109-course-fields > *,
.a110-editor-row > *, .a108-form-row > *, .a110-toggle-grid > * {min-width:0}
.a110-editor-fields,.a109-course-fields {display:grid;gap:15px;align-content:start}
.a110-editor-fields .a7-field,.a109-course-fields .a7-field {display:grid;gap:7px;min-width:0;margin:0}
.a110-editor-fields .a7-field > span,.a109-course-fields .a7-field > span {font-size:12px;line-height:1.3;letter-spacing:.035em;color:#766085}
.a110-editor-fields input:not([type=checkbox]),.a110-editor-fields select,.a110-editor-fields textarea,
.a109-course-fields input:not([type=checkbox]),.a109-course-fields select,.a109-course-fields textarea {
  width:100%;min-width:0;min-height:45px;box-sizing:border-box;
  padding:11px 13px;border-radius:12px;font-size:14px;line-height:1.45;
  border:1px solid #dfd2ed;background:#fff;color:#382745;
}
.a110-editor-fields textarea,.a109-course-fields textarea {min-height:112px;max-height:260px;resize:vertical}
.a110-editor-row,.a109-course-fields .a108-form-row {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.a109-course-fields .a108-form-row.three {grid-template-columns:repeat(3,minmax(0,1fr))}
.a110-toggle-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.a110-toggle-grid > label {padding:12px;gap:9px;align-items:flex-start;min-width:0}
.a110-toggle-grid input[type=checkbox] {flex:0 0 16px;width:16px;height:16px;margin:2px 0 0;accent-color:#8754c6}
.a110-toggle-grid span {min-width:0}
.a110-toggle-grid b {font-size:12px;line-height:1.4}
.a110-toggle-grid small {font-size:10px;line-height:1.4;margin-top:3px;overflow-wrap:anywhere}
.a7-modal:has(> .a110-editor-modal) > .a7-modal-actions,
.a109-course-modal > .a7-modal-actions {
  grid-column:1/-1;
  position:sticky;bottom:-24px;z-index:3;
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;
  margin:24px -24px -24px;padding:16px 24px;
  border-top:1px solid #eee5f5;background:#fff;
}
.a7-modal:has(> .a110-editor-modal) .a7-modal-actions .a7-btn,
.a109-course-modal .a7-modal-actions .a7-btn {min-height:45px;font-size:13px;padding:11px 20px;border-radius:12px}

/* Portfolio: two gallery columns and a separate bounded editing pane. */
.a110-portfolio-page {width:100%;max-width:1760px;margin-inline:auto;min-width:0}
.a110-portfolio-page .a110-module-hero {position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:100px;margin-bottom:18px;padding:20px 24px;border-radius:20px;box-sizing:border-box;background:linear-gradient(110deg,#fff,#fbf7ff);color:#30213e;overflow:hidden}
.a110-portfolio-page .a110-module-hero > div {position:relative;z-index:1;min-width:0}
.a110-portfolio-page .a110-module-hero h1 {font-size:38px;line-height:1.1;margin:7px 0}
.a110-portfolio-page .a110-module-hero p {font-size:13px;line-height:1.5}
.a110-portfolio-page .a110-module-hero > img {position:absolute;right:24px;top:50%;transform:translateY(-50%);max-width:220px;opacity:.25;pointer-events:none}
.a110-portfolio-toolbar {display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:14px 16px;margin-bottom:20px;min-width:0}
.a110-portfolio-toolbar > label {flex:1 1 300px;min-width:0}
.a110-portfolio-toolbar input {width:100%;min-width:0;min-height:40px;font-size:13px}
.a110-portfolio-toolbar > span {font-size:12px;white-space:nowrap}
.a110-portfolio-layout {grid-template-columns:minmax(0,1fr) minmax(340px,390px);gap:24px;align-items:start;min-width:0}
.a110-portfolio-layout > * {min-width:0}
.a110-portfolio-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;min-width:0}
.a110-work-card {min-width:0;overflow:hidden;border-radius:18px;border:1px solid #e8ddf2;background:white}
.a110-work-image {height:210px;min-height:0;overflow:hidden}
.a110-work-image > div {gap:7px;flex-wrap:wrap;font-size:0}
.a110-work-image .a7-badge {font-size:10px;line-height:1.35;padding:6px 9px}
.a110-work-copy {padding:16px}
.a110-work-copy > small {font-size:10px;letter-spacing:.08em}
.a110-work-copy h3 {font-size:25px;line-height:1.1;margin:8px 0}
.a110-work-copy p {font-size:12px;line-height:1.5;height:36px;margin:8px 0 14px}
.a110-work-copy footer {gap:8px;flex-wrap:wrap;padding-top:12px;margin-top:12px}
.a110-work-copy footer button {height:auto;min-height:34px;padding:7px 10px;font-size:11px;line-height:1.3}
.a110-work-copy footer b {font-size:11px;line-height:1.4}
.a110-portfolio-editor {
  position:sticky;top:92px;align-self:start;min-width:0;padding:18px;
  max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);
  overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
  border-radius:20px!important;box-sizing:border-box;background:#fff;
}
.a110-editor-head {margin-bottom:18px;gap:12px}
.a110-editor-head h2 {font-size:29px;line-height:1.1;margin:7px 0}
.a110-portfolio-editor .a112-media-field {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:11px}
.a110-portfolio-editor .a112-media-copy > div:first-child,
.a110-portfolio-editor .a112-media-preview,
.a110-portfolio-editor .a112-media-error {grid-column:1/-1}
.a110-portfolio-editor .a112-media-field .a112-media-preview,
.a110-portfolio-editor .a112-media-field.large .a112-media-preview {height:160px;max-height:180px;aspect-ratio:16/10}
.a110-portfolio-editor .a112-media-primary,
.a110-portfolio-editor .a112-media-secondary {display:contents}
.a110-portfolio-editor .a112-media-primary button,
.a110-portfolio-editor .a112-media-secondary > button:first-child {
  order:2;min-height:72px;height:auto;width:100%;min-width:0;padding:8px 5px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  text-align:center;font-size:11px;line-height:1.3;white-space:normal;
}
.a110-portfolio-editor .a112-media-primary b {font-size:11px;line-height:1.25}
.a110-portfolio-editor .a112-media-primary small {font-size:9px;line-height:1.3}
.a110-portfolio-editor .a112-media-secondary > button:not(:first-child) {order:3;grid-column:span 1;min-height:34px;height:auto;font-size:10px;flex:none;padding:7px 5px}
.a110-before-after {display:block;min-width:0;margin-top:14px}
.a110-before-after .a112-media-field .a112-media-preview {height:90px;max-height:110px}
.a110-portfolio-editor .a110-editor-fields {gap:13px;margin-top:18px}
.a110-portfolio-editor .a110-editor-fields textarea {min-height:90px}
.a110-portfolio-editor .a110-toggle-grid {gap:8px}
.a110-portfolio-editor > .a7-modal-actions {position:sticky;bottom:-18px;z-index:3;margin:20px -18px -18px;padding:14px 18px;border-top:1px solid #eee5f5;background:#fff;gap:8px;flex-wrap:wrap}
.a110-portfolio-editor .a7-modal-actions .a7-btn {min-height:42px;font-size:12px;padding:10px 14px}
.a110-portfolio-editor:has(.a7-modal-backdrop) {z-index:250}
.a110-gallery-grid {grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.a110-gallery-grid > * {min-width:0}

/* Vault/Media selection and cropping also stay within the viewport. */
.a7-modal:has(.a112-picker-grid) {width:min(1080px,calc(100vw - 40px));max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);box-sizing:border-box;overflow-x:hidden}
.a112-picker-tabs {display:flex;gap:8px;flex-wrap:wrap}
.a112-picker-tabs > button {min-width:0;min-height:40px;font-size:12px;white-space:normal}
.a112-picker-tools {display:flex;align-items:center;flex-wrap:wrap;gap:12px;min-width:0}
.a112-picker-tools > label {flex:1 1 260px;min-width:0}
.a112-picker-tools input {min-width:0;width:100%;font-size:13px}
.a112-picker-grid {grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.a112-picker-grid > button {min-width:0;box-sizing:border-box}
.a112-picker-grid > button strong,.a112-picker-grid > button small {overflow-wrap:anywhere;white-space:normal;font-size:11px;line-height:1.4}
.a112-crop-layout,.a113-crop-layout {grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:20px}
.a112-crop-layout > *, .a113-crop-layout > * {min-width:0}
.a108-pro-modal .a112-media-field.large {grid-template-columns:minmax(0,1fr);min-width:0}
.a108-pro-modal .a112-media-field.large .a112-media-preview {height:auto;min-height:0;max-height:280px;aspect-ratio:1/1}
.a108-pro-modal .a112-media-primary {grid-template-columns:minmax(0,1fr)}
.a108-pro-modal .a112-media-secondary {display:flex;flex-wrap:wrap}

@media (min-height:1150px) {.a110-work-image {height:240px}}
@media (max-width:1200px) {
  .a110-portfolio-layout {grid-template-columns:minmax(0,1fr);gap:18px}
  .a110-portfolio-editor {position:static;max-height:none;overflow:visible}
  .a110-work-image {height:175px}
  .a110-work-copy footer b {margin-left:0}
}
@media (max-width:980px) {
  .a110-portfolio-layout {grid-template-columns:minmax(0,1fr)}
  .a110-portfolio-editor {position:static;max-height:none;overflow:visible}
  .a110-portfolio-editor .a112-media-field .a112-media-preview,
  .a110-portfolio-editor .a112-media-field.large .a112-media-preview {height:190px;max-height:210px}
  .a110-before-after .a112-media-field .a112-media-preview {height:100px;max-height:120px}
}
@media (max-width:760px) {
  .a7-modal-backdrop {padding:12px}
  .a7-modal:has(> .a110-editor-modal),.a7-modal:has(> .a109-course-modal) {width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:18px;border-radius:20px}
  .a110-editor-modal,.a109-course-modal {grid-template-columns:minmax(0,1fr);gap:20px}
  .a110-editor-modal > .a112-media-field,.a109-course-modal > .a112-media-field {max-width:100%}
  .a112-media-field .a112-media-preview {height:180px}
  .a7-modal:has(> .a110-editor-modal) > .a7-modal-actions,.a109-course-modal > .a7-modal-actions {bottom:-18px;margin:20px -18px -18px;padding:14px 18px}
  .a7-modal:has(> .a110-editor-modal) .a7-modal-head h2,.a7-modal:has(> .a109-course-modal) .a7-modal-head h2 {font-size:31px}
  .a112-crop-layout,.a113-crop-layout {grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px) {
  .a110-portfolio-grid {grid-template-columns:minmax(0,1fr)}
  .a110-portfolio-page .a110-module-hero {padding:18px;min-height:110px;flex-wrap:wrap}
  .a110-portfolio-page .a110-module-hero h1 {font-size:33px}
  .a110-editor-row,.a110-toggle-grid,.a109-course-fields .a108-form-row,.a109-course-fields .a108-form-row.three {grid-template-columns:minmax(0,1fr)}
  .a110-work-image {height:200px}
  .a112-picker-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .a112-picker-grid > button strong {font-size:10px}
  .a110-portfolio-editor .a7-modal-actions .a7-btn {flex:1 1 110px}
}