/* leaflet EDITOR CSS           */

body.leaflet-editor-page .softform-frame {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}


/* ======================================================
   leaflet Editor — ACF-driven 40 / 60 layout
   Canonical version (Album parity)
====================================================== */

/* Editor frame spacing */
body.leaflet-editor-page .leaflet-editor-form-area {
  margin-top: 20px;
}

/* ------------------------------------------------------
   CORE: ACF grid layout (THIS is the key)
------------------------------------------------------ */

body.leaflet-editor-page .acf-form-fields.-top {
  display: grid;
  grid-template-columns: 40% 60%;
  grid-template-areas:
    "hero title"
    "hero extract"
    "hero extractl"
    "desc desc";
  column-gap: 32px;
  row-gap: 16px;
  padding: 0 28px 10px 28px !important;
}

body.leaflet-editor-page .acf-fields>.acf-field {
    padding: 6px;
}
/* ------------------------------------------------------
   Field → grid-area mapping
------------------------------------------------------ */

/* Hero photo */
body.leaflet-editor-page
.acf-field[data-name="leaflet_hero_photo"] {
  grid-area: hero;
}

/* Title */
body.leaflet-editor-page
.acf-field[data-name="leaflet_title"] {
  grid-area: title;
}

/* extract */
body.leaflet-editor-page
.acf-field[data-name="leaflet_extract"] {
  grid-area: extract;
}


/* Exact long */
body.leaflet-editor-page
.acf-field[data-name="leaflet_extract_long"] {
  grid-area: extractl;
}
/* Article */
body.leaflet-editor-page
.acf-field[data-name="leaflet_description"] {
  grid-area: desc;
}

/* ------------------------------------------------------
   Hero behaviour
------------------------------------------------------ */

body.leaflet-editor-page
.acf-field[data-name="leaflet_hero_photo"] {
  position: sticky;
  top: 120px;
}

/* ------------------------------------------------------
   Mobile: single column stack
------------------------------------------------------ */

@media (max-width: 900px) {

  body.leaflet-editor-page .acf-form-fields.-top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "title"
      "extract"
      "extractl";
  }

  body.leaflet-editor-page
  .acf-field[data-name="leaflet_hero_photo"] {
    position: static;
  }

}

/* canonical hero photo call */
/* canonical hero photo call */
/* canonical hero photo call */

body.leaflet-editor-page
.acf-field[data-name="leaflet_hero_photo"] .acf-image-uploader {
  /* hero handled by softlayout.css */
}
/* leaflet hero placeholder text */
body.leaflet-editor-page
.acf-field[data-name="leaflet_hero_photo"].softtops-hero {
  --soft-hero-placeholder: "Add your leaflet Photo";
}
/* canonical hero photo call */
/* canonical hero photo call */
/* canonical hero photo call */

/* ============================================================
   leaflet Editor — Field Width Tuning
   ============================================================ */

/* Photo title */
body.leaflet-editor-page
.acf-field[data-name="leaflet_title"] input {
  max-width: 42ch;
}

/* Article Extract */
body.leaflet-editor-page
.acf-field[data-name="leaflet_extract"] input {
  max-width: 100ch;
}

/* Article long Extract */
body.leaflet-editor-page
.acf-field[data-name="leaflet_extractl"] input {
  max-width: 300ch;
}

/* Description stays full-width */
body.leaflet-editor-page
.acf-field[data-name="leaflet_description"] textarea {
  max-width: none;
}
/* leaflet editor — remove native ACF submit row entirely */
.context-leaflet-edit .acf-form-submit {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ======================================================
   Leaflet Editor — Expand main description field
====================================================== */

/* Leaflet: make the main description huge */
.acf-field[data-name="leaflet_description"] textarea {
  min-height: 60vh !important;
  resize: vertical;
  line-height: 1.6;
  font-size: 16px;
}