/* ============================================================
   SoftTopsTheme — softlayout.css
   Unified Layout Primitives
   ============================================================

   PURPOSE
   -------
   This file defines SAFE, reusable layout components that
   wrap ACF — never replace or suppress it.

   RULES
   -----
   • Never hide ACF controls
   • Never disable pointer-events
   • Never style .acf-field as a click surface
   • Always style .acf-image-uploader instead

   ============================================================ */


/* ============================================================
   HERO PHOTO — UNIFIED ACF-SAFE COMPONENT
   ============================================================ */

/*
  Opt-in mechanism:
  -----------------
  Any ACF IMAGE FIELD whose WRAPPER has class:

      .softtops-hero

  will receive this behaviour.

  The wrapper class may be added via:
  • acf/prepare_field filter (preferred)
  • page-specific CSS (temporary)
*/


/* ------------------------------------------------------------
   1. Base uploader frame
------------------------------------------------------------ */

/* Base uploader frame (no border by default) */
.softtops-hero
.acf-image-uploader {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  box-sizing: border-box;
}

/* EMPTY STATE ONLY */
.softtops-hero
.acf-image-uploader:not(.has-value) {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(26,59,46,0.05) 0px,
      rgba(26,59,46,0.05) 12px,
      rgba(26,59,46,0.025) 12px,
      rgba(26,59,46,0.025) 24px
    );
  border: 2px dashed rgba(26,59,46,0.35);
}



/* ------------------------------------------------------------
   2. Hover affordance (empty state)
------------------------------------------------------------ */

.softtops-hero
.acf-image-uploader:not(.has-value):hover {
  border-color: #1a3b2e;
  background-color: #f1eadc;
  cursor: pointer;
}


/* ------------------------------------------------------------
   3. EMPTY STATE — make ACF Add button fill the box
------------------------------------------------------------ */

/* ACF internal container */
.softtops-hero
.acf-image-uploader:not(.has-value)
.hide-if-value {
  position: absolute;
  inset: 0;
}

/* The ACTUAL clickable control */
.softtops-hero
.acf-image-uploader:not(.has-value)
.hide-if-value
[data-name="add"] {

  position: absolute !important;
  inset: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  font-size: 1.15rem;
  font-weight: 600;
  color: #4f6a5c;

  text-align: center;
  cursor: pointer;
}

/* Hide ACF helper text visually, keep DOM intact */
.softtops-hero
.acf-image-uploader:not(.has-value)
.hide-if-value
p {
  font-size: 0;
  line-height: 0;
  margin: 0;
}


/* ------------------------------------------------------------
   4. FILLED STATE — image containment
------------------------------------------------------------ */

.softtops-hero
.acf-image-uploader.has-value img {
  width: 100%;
  height: 100%;

  object-fit: contain;        /* critical */
  object-position: center;

  display: block;
  background: #efe7d6;
}


/* ------------------------------------------------------------
   5. FILLED STATE — white photo frame (Album parity)
------------------------------------------------------------ */

.softtops-hero
.acf-image-uploader.has-value
.image-wrap {
  width: 100% !important;
  height: 100%;

  border: 12px solid rgba(255,255,255,0.85);
  border-radius: 14px;

  box-sizing: border-box;
  overflow: hidden;
}


/* ------------------------------------------------------------
   6. Ensure ACF edit / remove icons remain usable
------------------------------------------------------------ */

.softtops-hero
.acf-image-uploader
.acf-icon {
  pointer-events: auto;
}



/* ============================================================
   OVERRIDE ACF INLINE PREVIEW WIDTH (CRITICAL)
   ============================================================ */

.acf-field.soft-hero
.acf-image-uploader
.image-wrap {
    max-width: none !important;
}

/* ============================================================
   END OF FILE
   ============================================================ */

/* ============================================================
   SOFT HERO — PLACEHOLDER TEXT (CSS VARIABLE)
   ============================================================ */

.softtops-hero
.acf-image-uploader:not(.has-value)
.hide-if-value
[data-name="add"] {
  font-size: 0; /* hide ACF default text */
  position: relative;
}

/* Use CSS variable set by page/feature CSS */
.softtops-hero
.acf-image-uploader:not(.has-value)
.hide-if-value
[data-name="add"]::before {
  content: var(--soft-hero-placeholder, "Add Image");
  font-size: 1.15rem;
  font-weight: 600;
  color: #4f6a5c;
  text-align: center;
}