/* Ansjela Grid Core rc1.16l - My Gallery compact workflow and editor layout hotfix.
 * Gallery-specific frontend layout only. Existing Core / Website Admin
 * stylesheets and the approved Grid Admin styling remain unchanged.
 */

.ag-gallery-picker{
  display:grid;
  gap:14px;
  max-width:760px;
  margin:0 auto;
}

.ag-gallery-picker__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:end;
}

.ag-gallery-picker label{
  display:grid;
  gap:7px;
  min-width:0;
}

.ag-gallery-picker select{
  width:100%;
}

.ag-gallery-dialog{
  width:min(96vw,1120px);
  max-height:94vh;
}

.ag-gallery-dialog .ag-dialog-content{
  max-height:90vh;
  overflow:auto;
}

.ag-gallery-dialog .ag-gallery-editor{
  border:0;
  padding:0;
  background:transparent;
}

/* rc1.16l: robust compact editor.
 * The public-gallery checkbox gets its own full-width row.
 * Region details and upload then sit side-by-side without competing for width.
 */
.ag-gallery-compose{
  display:grid;
  grid-template-columns:minmax(0,45fr) minmax(0,55fr);
  grid-template-areas:
    "visibility visibility"
    "details upload";
  column-gap:24px;
  row-gap:14px;
  align-items:start;
}

.ag-gallery-compose__visibility{
  grid-area:visibility;
  min-width:0;
  padding:0 0 10px;
  border-bottom:1px solid rgba(212,175,55,.18);
}

.ag-gallery-compose__visibility .ag-check{
  margin:0;
}

.ag-gallery-compose__visibility .ag-check > span{
  min-width:0;
  overflow-wrap:anywhere;
}

.ag-gallery-compose__details{
  grid-area:details;
}

.ag-gallery-compose__upload{
  grid-area:upload;
}

.ag-gallery-compose__details,
.ag-gallery-compose__upload{
  display:grid;
  gap:12px;
  min-width:0;
  align-content:start;
}

.ag-gallery-compose__details > label,
.ag-gallery-compose__upload > label{
  display:grid;
  gap:7px;
  min-width:0;
}

.ag-gallery-compose__details input,
.ag-gallery-compose__details textarea,
.ag-gallery-compose__upload input[type="file"]{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.ag-gallery-description-compact{
  min-height:112px;
  height:112px;
  resize:vertical;
}

.ag-gallery-compose__upload{
  padding-left:20px;
  border-left:1px solid rgba(212,175,55,.24);
}

.ag-gallery-compose__actions{
  margin-top:0;
  justify-content:flex-start;
}

.ag-gallery-upload-preview{
  display:grid;
  gap:10px;
  margin-top:2px;
}

.ag-gallery-upload-preview[hidden]{
  display:none!important;
}

.ag-gallery-upload-preview__title{
  margin:0;
  color:var(--ag-gold);
  font-weight:700;
}

.ag-gallery-upload-preview__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.ag-gallery-upload-preview__item{
  display:grid;
  gap:7px;
  min-width:0;
  padding:8px;
  border:1px solid rgba(212,175,55,.28);
  background:rgba(0,0,0,.34);
}

.ag-gallery-upload-preview__item img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

.ag-gallery-upload-preview__item strong,
.ag-gallery-upload-preview__item span{
  overflow-wrap:anywhere;
}

.ag-gallery-upload-preview__item strong{
  color:var(--ag-silver);
  font-size:.86rem;
}

.ag-gallery-upload-preview__item span{
  color:rgba(201,201,207,.78);
  font-size:.8rem;
}

.ag-gallery-upload-preview__item.is-invalid{
  border-color:#e06464;
}

.ag-gallery-upload-preview__item.is-invalid strong,
.ag-gallery-upload-preview__item.is-invalid span{
  color:#ef9b9b;
}

.ag-gallery-upload-warning{
  margin:0;
  padding:10px 12px;
  border-left:4px solid #e06464;
  background:rgba(224,100,100,.10);
  color:var(--ag-silver);
}

@media(max-width:900px){
  .ag-gallery-compose{
    grid-template-columns:1fr;
    grid-template-areas:
      "visibility"
      "details"
      "upload";
    gap:16px;
  }
  .ag-gallery-compose__upload{
    padding-left:0;
    padding-top:16px;
    border-left:0;
    border-top:1px solid rgba(212,175,55,.24);
  }
  .ag-gallery-upload-preview__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:620px){
  .ag-gallery-picker__row{grid-template-columns:1fr}
  .ag-gallery-picker__row .small-button{width:100%}
  .ag-gallery-upload-preview__grid{grid-template-columns:1fr}
  .ag-gallery-compose__actions .small-button{width:100%}
}