/* ============================================================
   XJS Soft Tops Club — CAR ALBUM EDITOR (Front-End)
   COMPLETE CLEAN VERSION — 2025-11-27
   ------------------------------------------------------------
   This file replaces all previous A3.5 / A3.6 / A3.7 drafts.
   Modular structure — safe, predictable, futureproof.

   Contents:
   1. File Header + Global ACF Cleanup  ← (this chunk)
   2. A3.2 Hero Grid Layout
   3. Featured Photo Placeholder
   4. Story Sections + Story Cards + Table Mats
   5. Universal Story Colours + Labels + Buttons
   6. OPTION C — Restoration Photo Hybrid Grid (Aspect-ratio 3/2)
   7. Mobile + Responsive Final Pass
   ------------------------------------------------------------
   IMPORTANT:
   - This CSS applies only on: body.album-editor-page
   - All image uploaders remain native ACF (no hacks)
   - “Add Row” is hidden visually but remains functional
   - Captions + descriptions hidden in restoration photos
   ============================================================ */


/* ============================================================
   1. GLOBAL ACF CLEANUP / RESET
   ------------------------------------------------------------
   Purpose:
   - Remove unwanted ACF table chrome
   - Standardise field spacing, fonts, borders
   - Enable a clean editor canvas for custom layouts
   ============================================================ */

body.album-editor-page .acf-field {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Label styling */
body.album-editor-page .acf-field .acf-label {
  margin-bottom: 4px !important;
  
}
body.album-editor-page .acf-field .acf-label label {
  font-weight: 600;
  font-size: 14px;
}

/* Hide helper/descriptions */
/* laurence 10th December 2025
body.album-editor-page .acf-field .description,
body.album-editor-page .acf-field .acf-input-description {
  display: none !important;
} */

/* Inputs */
body.album-editor-page .acf-field input[type="text"],
body.album-editor-page .acf-field input[type="number"],
body.album-editor-page .acf-field textarea,
body.album-editor-page .acf-field select {
  padding: 6px 10px !important;
  border-radius: 6px !important;
  border: 1px solid #ccc !important;
}
body.album-editor-page .acf-field input:focus,
body.album-editor-page .acf-field textarea:focus,
body.album-editor-page .acf-field select:focus {
  border-color: var(--soft-green) !important;
  outline: none !important;
}

/* WYSIWYG safety */
body.album-editor-page .acf-editor-wrap iframe {
  padding: 0 10px !important;
}

/* Repeater cleanup HEREHERE */
body.album-editor-page .acf-repeater .acf-row,
body.album-editor-page .acf-repeater .acf-row > td,
body.album-editor-page .acf-repeater .acf-table {
  border: none !important;
  background: transparent !important;
}

/* Row spacing */
body.album-editor-page .acf-repeater .acf-row {
  margin-bottom: 16px !important;
}



/* Image preview styling (generic ACF) */
body.album-editor-page .acf-image-uploader .image-wrap img {
  border-radius: 8px !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}
/* ============================================================
   2. A3.2 — TOP GRID LAYOUT (Hero Photo + Specs + Intro)
   ------------------------------------------------------------
   Purpose:
   - Maintain the stable, working top-of-page layout
   - 40/60 grid with hero photo + tech spec columns
   - Fully responsive down to mobile single-column
   ============================================================ */

body.album-editor-page .acf-form-fields.-top {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 20%));
  grid-template-areas:
    "photo photo title title ."
    "photo photo spec1 spec1 spec2"
    "photo photo spec3 spec3 spec2"
    "photo photo spec4 spec4 spec2"
    "photo photo colour colour ."
    "photo photo interior interior ."
    "location location ownership owned_since owned_until"
    "intro intro intro intro intro"
    "album_photos album_photos album_photos album_photos album_photos";
  column-gap: 24px;
  row-gap: 1px;
  padding: 20px 24px !important;
}

body.album-editor-page .section-heading {
  display: flex;
  align-items: baseline; /* keeps text nicely aligned */
  gap: 0.75rem;          /* space between title and text */
  margin-bottom: 0.75rem;
}

body.album-editor-page .section-heading h3 {
  margin: 0;
}

body.album-editor-page .section-heading p {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.85; /* a little “helper text” feel */
}

/* ---------------------------
   Title Field (full width)
---------------------------- */
body.album-editor-page .acf-field[data-name="car_album_title"] {
  grid-area: title;
}

body.album-editor-page
.acf-field[data-name="car_anchor_1"] {
  grid-area: album_photos;
}

/*body.album-editor-page .acf-field[data-name="car_album_title"]::before {
  content: "Main Title";
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: .5rem;
  color: #2a3a32; /* heritage dark green */
}
/* Style the title input */
body.album-editor-page .acf-field[data-name="car_album_title"] input[type="text"] { 
  max-width: 850px;
  font-size: 18px;
  padding: 10px 14px !important;
}

/* ---------------------------
   Hero Photo Field
---------------------------- */
body.album-editor-page .acf-field[data-name="album_hero_photo"] {
  grid-area: photo;
}
/*body.album-editor-page .acf-field[data-name="album_hero_photo"]::before {
  content: "Main Photo";
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: .5rem;
  color: #2a3a32;
}

/* ---------------------------
   Tech Spec Fields
---------------------------- */
body.album-editor-page .acf-field[data-name="car_model"]        { grid-area: spec1; }
body.album-editor-page .acf-field[data-name="car_year"]         { grid-area: spec2; }
body.album-editor-page .acf-field[data-name="car_engine"]       { grid-area: spec3; }
body.album-editor-page .acf-field[data-name="car_transmission"] { grid-area: spec4; }

/*body.album-editor-page .acf-field[data-name="car_model"]::before {
  content: "Technical Specifications";
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  color: #2a3a32;
  margin-bottom: .5rem;
}

/* ---------------------------
   Appearance Fields
---------------------------- */
body.album-editor-page .acf-field[data-name="car_colour"]   { grid-area: colour; }
body.album-editor-page .acf-field[data-name="car_interior"] { grid-area: interior; }
body.album-editor-page .acf-field[data-name="car_location"] { grid-area: location; }

/* ---------------------------
   Ownership Fields
---------------------------- */
body.album-editor-page .acf-field[data-name="car_ownership"]   { grid-area: ownership; }
body.album-editor-page .acf-field[data-name="car_owned_since"] { grid-area: owned_since; }
body.album-editor-page .acf-field[data-name="car_owned_until"] { grid-area: owned_until; }

/* ---------------------------
   Intro Field (full width)
---------------------------- */
body.album-editor-page .acf-field[data-name="car_description"] {
  grid-area: intro;
}

/* ---------------------------
   Responsive Single Column
---------------------------- */
@media (max-width: 768px) {

  body.album-editor-page .acf-form-fields.-top {
    display: block;        /* ← kill grid participation */
    padding: 16px !important;
  }

  body.album-editor-page .acf-form-fields.-top > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px;
  }

}
/* ============================================================
   3. FEATURED PHOTO PLACEHOLDER (Hero Photo)
   ------------------------------------------------------------
   Purpose:
   - Display a clean “drop zone” placeholder before any hero
     photo has been uploaded.
   - Native ACF image uploader still handles the actual upload.
   ============================================================ */

.album-photo-placeholder {
  width: 100%;
  height: 280px;
  border-radius: 14px;
  background: rgba(0,0,0,0.03);
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  cursor: pointer;
}

.album-photo-placeholder .placeholder-box {
  font-size: 1.2rem;
  font-weight: 500;
  color: #666;
  pointer-events: none;
}

/* ============================================================
   HERO PHOTO — SQUARE FRAME (Editor)
   Matches story photo behaviour
   ============================================================ */

/* 1. Reserve a square placeholder before upload */
body.album-editor-page
.acf-field[data-name="album_hero_photo"]
.album-photo-placeholder {
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
    max-width: 100%;
    
    border-radius: 14px;
    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
        );
}

/* 2. Square the actual ACF uploader frame */
body.album-editor-page
.acf-field[data-name="album_hero_photo"]
.acf-image-uploader {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}

/* 3. Contain the image (no vertical expansion) */
body.album-editor-page
.acf-field[data-name="album_hero_photo"]
.acf-image-uploader img {
    width: 100%;
    height: 100%;
    object-fit: contain;          /* KEY: no cropping */
    background: var(--soft-cream);
    display: block;
}

/* 4. White photo border (matches story cards) */
body.album-editor-page
.acf-field[data-name="album_hero_photo"]
.acf-image-uploader.has-value .image-wrap {
    border: 6px solid rgba(255,255,255,0.85);
    border-radius: 14px;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================================
   4. STORY SECTIONS — OUTER BLOCKS & RECTANGULAR TABS
   ------------------------------------------------------------
   Applies to all major story types:
   about / wip / restoration / modification / adventure /
   trip / maintenance / award / future
   ============================================================ */
/* laurence sunday 29th November 18:00 */

/* laurence sunday 29th November 18:00 */


/* Rectangular tab labels */
/* laurence sunday 29th November 18:00 


 laurence sunday 29th November 18:00 */



body.album-editor-page .acf-field[data-name$="_group"] > .acf-label {
  display: none !important; 
} 

/* ============================================================
   4B. STORY GROUP TITLE — COLOURED BANNER (A3.1)
   ------------------------------------------------------------
   Only the *_title fields inside *_group.
   ============================================================ */

body.album-editor-page .acf-field[data-name$="_group"] .acf-field[data-name$="_title"] {
  background: var(--story-banner-color) !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center;
  gap: 18px;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
}



/* Title input */
body.album-editor-page .acf-field[data-name$="_group"] .acf-field[data-name$="_title"] input {
  flex: 0 0 80% !important;
  max-width: 440px !important;
  min-width: 440px !important;
  background: #fff !important;
  border-radius: 8px !important;
  padding: 4px 7px !important;
}

/* Hide ACF label inside the title row laurence jones */

/* Hide labels for structural fields inside story table-mats */
/*body.album-editor-page 
.acf-field[data-name$="_title"] > .acf-label,*/
body.album-editor-page 
.acf-field[data-name$="_group"] > .acf-label,
body.album-editor-page 
.acf-field[data-name$="_photo_repeater"] > .acf-label,
body.album-editor-page 
.acf-field[data-name$="_photo"] > .acf-label {
    display: none !important;
}


.acf-field[data-name^="car_"][data-name$="_photo"] > .acf-label {
    display: none !important;
}



/* Hide story title labels INSIDE table mats only */
body.album-editor-page 
.story-table-mat 
.acf-field[data-name$="_title"] > .acf-label {
  display: none;
}
body.album-editor-page 
.story-table-mat 
.acf-field[data-name$="_title"] > .acf-label,
body.album-editor-page 
.story-card 
.acf-field[data-name$="_title"] > .acf-label {
  display: none;
}


/* ============================================================
   4C. STORY CARD STRUCTURE — TABLE-MAT WRAPPER
   ------------------------------------------------------------
   This matches the browse-mode look:
   - Top banner strip
   - Softpaper inner block
   - Thick coloured left/right/bottom border
   ============================================================ */

body.album-editor-page .story-card {
  position: relative;
  width: 100%;
  margin: 40px 0 !important;
  padding: 0 !important;
  background: transparent !important;

  border-left: 8px solid var(--story-banner-color);
  border-right: 8px solid var(--story-banner-color);
  border-bottom: 8px solid var(--story-banner-color);
  border-radius: 0 0 14px 14px !important;
}

/* Top colour strip */
body.album-editor-page .story-card .story-card-banner {
  height: 56px;
  border-radius: 14px 14px 0 0;
  background: var(--story-banner-color);
}

/* Inner softpaper */
body.album-editor-page .story-card-inner {
  background: var(--softpaper-cream);
  padding: 24px !important;
  border-radius: 0 0 14px 14px !important;
}

/* Remove extra borders from ACF inside story-cards */
body.album-editor-page .story-card .acf-field-group > .acf-input > .acf-fields {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove “cloneindex” banners */
body.album-editor-page .story-card-banner[class*="acfcloneindex"] {
  display: none !important;
}

/* ============================================================
   4D. PER-SLUG STORY CARD BORDER COLOURS
   ------------------------------------------------------------
   Each slug sets its own --story-mat-border token.
   ============================================================ */

body.album-editor-page .story-about       { --story-mat-border: var(--theme-about-border); }
body.album-editor-page .story-wip         { --story-mat-border: var(--theme-wip-border); }
body.album-editor-page .story-maintenance { --story-mat-border: var(--theme-maintenance-border); }
body.album-editor-page .story-restoration { --story-mat-border: var(--theme-restoration-border); }
body.album-editor-page .story-modification{ --story-mat-border: var(--theme-modification-border); }
body.album-editor-page .story-trip        { --story-mat-border: var(--theme-shorttrip-border); }
body.album-editor-page .story-adventure   { --story-mat-border: var(--theme-adventure-border); }
body.album-editor-page .story-award       { --story-mat-border: var(--theme-award-border); }
body.album-editor-page .story-future      { --story-mat-border: var(--theme-future-border); }
/* ============================================================
   5. UNIVERSAL STORY COLOURS — EDITOR MODE
   ------------------------------------------------------------
   These rules map your per-slug colour palette to each story
   card via CSS variables. Banner colours, text colours, etc.
   ============================================================ */

/* About */
body.album-editor-page .acf-field[data-name="car_about_group"]
  .acf-field[data-name="car_about_title"] {
    --story-banner-color: var(--theme-about-tab);
    --story-banner-text:  var(--theme-about-text);
    --story-banner-label: "About the Car Story:";
}

/* Work In Progress */
body.album-editor-page .acf-field[data-name="car_wip_group"]
  .acf-field[data-name="car_wip_title"] {
    --story-banner-color: var(--theme-wip-tab);
    --story-banner-text:  var(--theme-wip-text);
    --story-banner-label: "Work In Progress Story:";
}

/* Maintenance */
body.album-editor-page .acf-field[data-name="car_maintenance_group"]
  .acf-field[data-name="car_maintenance_title"] {
    --story-banner-color: var(--theme-maintenance-tab);
    --story-banner-text:  var(--theme-maintenance-text);
    --story-banner-label: "Maintenance Story:";
}

/* Restoration */
body.album-editor-page .acf-field[data-name="car_restoration_group"]
  .acf-field[data-name="car_restoration_title"] {
    --story-banner-color: var(--theme-restoration-tab);
    --story-banner-text:  var(--theme-restoration-text);
    --story-banner-label: "Restoration Story:";
}

/* Modification */
body.album-editor-page .acf-field[data-name="car_modification_group"]
  .acf-field[data-name="car_modification_title"] {
    --story-banner-color: var(--theme-modification-tab);
    --story-banner-text:  var(--theme-modification-text);
    --story-banner-label: "Modification Story:";
}

/* Short Trip */
body.album-editor-page .acf-field[data-name="car_trip_group"]
  .acf-field[data-name="car_trip_title"] {
    --story-banner-color: var(--theme-trip-tab);
    --story-banner-text:  var(--theme-trip-text);
    --story-banner-label: "Short Trip Story:";
}

/* Holiday Adventure */
body.album-editor-page .acf-field[data-name="car_adventure_group"]
  .acf-field[data-name="car_adventure_title"] {
    --story-banner-color: var(--theme-adventure-tab);
    --story-banner-text:  var(--theme-adventure-text);
    --story-banner-label: "Holiday Adventure Story:";
}

/* award */
body.album-editor-page .acf-field[data-name="car_award_group"]
  .acf-field[data-name="car_award_title"] {
    --story-banner-color: var(--theme-award-tab);
    --story-banner-text:  var(--theme-award-text);
    --story-banner-label: "Award Story:";
}

/* Future Plan */
body.album-editor-page .acf-field[data-name="car_future_group"]
  .acf-field[data-name="car_future_title"] {
    --story-banner-color: var(--theme-future-tab);
    --story-banner-text:  var(--theme-future-text);
    --story-banner-label: "Future Plan:";
}


/* ============================================================
   5B. ADD STORY BUTTONS (e.g. “Add Restoration Story”)
   ------------------------------------------------------------
   These colour-match each story type’s palette.
   ============================================================ */

body.album-editor-page .acf-field[data-type="repeater"] .acf-button {
  padding: 10px 18px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  border: none !important;
  transition: 0.2s ease;
}




/* ============================================================
   5C. HIDE UNUSED *_story FIELDS (text placeholders)
   ------------------------------------------------------------
   You are not using the ACF "_story" text fields in editor mode.
   They are hidden but remain stored in database for future needs.
   ============================================================ */

/*body.album-editor-page .acf-field[data-name$="_story"] {
  display: none !important;
}


/* ============================================================
   5D. SMALL FIELD REFINEMENTS
   ------------------------------------------------------------
   These apply to Owned Since / Owned Until numeric fields.
   ============================================================ */

input[name="acf[field_691c65db1f37a]"],
input[name="acf[field_691c66131f37b]"] {
  width: 80px !important;
  text-align: center !important;
}


/* ============================================================
   5E. GENERAL LABEL CLEANUP + ACF TWEAKS
   ------------------------------------------------------------
   Removes leftover underlines, redundant gaps, unwanted ACF
   framing that interferes with your story-card layout.
   ============================================================ */

/* Remove label underlines */
body.album-editor-page .acf-field .acf-label {
  border-bottom: none !important;
}

/* Remove label borders */
body.album-editor-page .acf-field .acf-label label {
  border: none !important;
}

/* Remove ACF default top-border */
body.album-editor-page .acf-fields.-top.-border {
  border-top: none !important;
}

/* Ensure story-card inner blocks don’t inherit weird padding */
body.album-editor-page .story-card-inner .acf-field {
  padding: 0 !important;
  margin-bottom: 20px !important;
}
/* ============================================================
   6. STORY PHOTO GRID — OPTION C (Hybrid System)
   ------------------------------------------------------------
   GOALS:
   • Photo 1 is always present (min 1 row in ACF)
   • Beside Photo 1: a placeholder card
   • After first row: repeater rows displayed in 2-column grid
   • Placeholder row auto-appears at end
   • Captions + descriptions hidden
   ============================================================ */


/* ============================================================
   6.1 — Story Editor Grid (left text / right photos)
   ============================================================ */
/* defines the split of the left/right story */
body.album-editor-page .story-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 55%) minmax(0, 45%);
  gap: 1.75rem;
  margin-top: 1rem;
  align-items: flex-start;
}

body.album-editor-page .story-editor-left {}
body.album-editor-page .story-editor-right {}


/* Mobile: stack */
@media (max-width: 900px) {
  body.album-editor-page .story-editor-grid {
    grid-template-columns: 1fr;
  }
  body.album-editor-page .story-editor-right {
    margin-top: 1rem;
  }
}









/* ============================================================
   FIX — Prevent story section headers from splitting into columns
   ============================================================ */

/* Stop the global story-editor-grid from affecting section headers */
body.album-editor-page .acf-field[data-name$="_title"] {
    display: block !important;
    width: 100% !important;
}

/* Stop ACF wrapper from flowing side-by-side */
body.album-editor-page .acf-field[data-name$="_group"] {
    display: block !important;
    width: 100% !important;
}

/* Ensure each story section header + its Add Story button stays on its own line */
body.album-editor-page .acf-field[data-name^="car_"][data-type="repeater"] {
    clear: both !important;
    display: block !important;
}
/* ============================================================
   FIX — Force story sections to break out of top 40/60 grid
   ============================================================ */

/* Select all major story section wrappers */
body.album-editor-page 
.acf-field[data-name="car_about"],
body.album-editor-page 
.acf-field[data-name="car_wip"],
body.album-editor-page 
.acf-field[data-name="car_maintenance"],
body.album-editor-page 
.acf-field[data-name="car_restoration"],
body.album-editor-page 
.acf-field[data-name="car_modification"],
body.album-editor-page 
.acf-field[data-name="car_trip"],
body.album-editor-page 
.acf-field[data-name="car_adventure"],
body.album-editor-page 
.acf-field[data-name="car_award"],
body.album-editor-page 
.acf-field[data-name="car_future"] {

    /* break grid inheritance */
    grid-column: 1 / -1 !important;

    /* restore block flow */
    display: block !important;
    width:  !important;
        max-width: 1400px;      /* match carousel container */
    margin-left: auto !important;
    margin-right: auto !important;
}





/* EXCLUDE story title banners */
/*
body.album-editor-page .acf-field[data-name$="_title"]::before,
body.album-editor-page .acf-field[data-name$="_title"]::after {
    /* allow story title pseudo-elements to survive */
/*    display: block !important;
    content: unset !important;
}

/* NOW kill everything else inside .acf-fields.-left */
/* Wednesday 10th December 2025 
body.album-editor-page .acf-fields.-left .acf-field:not([data-name$="_title"])::before,
body.album-editor-page .acf-fields.-left .acf-field:not([data-name$="_title"])::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: static !important;
} */


/* Friday evening */

/* ============================================================
   XJS SOFT TOPS — HERO & DRAG CONTROLS (CLEAN VERSION)
   ============================================================ */

/* 1. HERO PHOTO — keep ACF X + Pencil visible */
.album-editor-page 
.acf-field[data-name="album_hero_photo"] 
.acf-image-uploader .acf-actions {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}











/* ============================================================================
   8. FIX ACF TABLE LAYOUT (allow free expansion)
   ============================================================================ */
/* laurence saturday 29th november */
/* 
body.album-editor-page .acf-table {
    table-layout: auto !important;
}
*/
body.album-editor-page .acf-table {
    table-layout: fixed !important;
}










































/* Saturday 29th November afternon  */




/* push photo cards over to the left to gain a gap between them and paper edge */
body.album-editor-page
.story-editor-grid .story-editor-right {
    padding-right: 20px !important; /* adjust to your taste */
}




/* hide the Add Button everywhere for the uploader */
.album-editor-page 
.acf-image-uploader .hide-if-value [data-name="add"] {
    display: none !important;
}

/* ============================================================
   XJS Soft Tops Club — A4 Story Carousel (Clean Version)
   ============================================================ */

/* Wrapper for the whole strip */
.album-editor-page .story-carousel {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;

    /* picture frame */
    padding: 0.75rem 1rem;
    border: 2px solid #d6d0c5;        /* thin soft border */
    border-radius: 14px;
    background: #faf8f3;              /* softpaper tone */
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

/* Arrow buttons */
.album-editor-page .story-carousel-arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(26,59,46,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: background 0.2s ease, transform 0.2s ease;
}

.album-editor-page .story-carousel-arrow:hover {
    background: rgba(26,59,46,0.18);
    transform: translateY(-2px);
}

/* Track container (active slot + loop) */
.album-editor-page .story-carousel-track {
    display: flex;
    gap: 1.25rem;
    overflow: hidden;
}

/* Left: pinned active card */
.album-editor-page .story-carousel-active-slot {
    flex: 0 0 260px;
    display: flex;
}

/* Right: infinite loop area */
.album-editor-page .story-carousel-loop {
    flex: 1 1 auto;
    display: flex;
    gap: 1.25rem;
    overflow: hidden;
}

/* -----------------------------
   Base Card Layout
------------------------------ */
.album-editor-page .story-card-nav {
    flex: 0 0 260px;
    background: #ffffff;
    border-radius: 14px;
    padding: 1.2rem 1.25rem;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
    border-left: 4px solid transparent;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ENFORCE readable inactive card text */
.album-editor-page .story-card-nav,
.album-editor-page .story-card-nav * {
    color: #333 !important;
}

/* Slug colour indicators (left border only for inactive cards) */
.album-editor-page .story-card-nav.theme-about        { border-left-color: #A3A3A3; }
.album-editor-page .story-card-nav.theme-wip          { border-left-color: #FCBD34; }
.album-editor-page .story-card-nav.theme-maintenance  { border-left-color: #C68A2D; }
.album-editor-page .story-card-nav.theme-restoration  { border-left-color: #B7410E; }
.album-editor-page .story-card-nav.theme-modification { border-left-color: #6C8C74; }
.album-editor-page .story-card-nav.theme-trip         { border-left-color: #8CBFE6; }
.album-editor-page .story-card-nav.theme-adventure    { border-left-color: #666666; }
.album-editor-page .story-card-nav.theme-award        { border-left-color: #B59B55; }
.album-editor-page .story-card-nav.theme-future       { border-left-color: #C9C9C9; }

/* Hover (inactive only) */
.album-editor-page .story-card-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 35px 22px rgba(0,0,0,0.12);
}

/* -----------------------------
   ACTIVE CARD — FULL SLUG COLOUR
------------------------------ */
.album-editor-page .story-card-nav.is-active {
    border-left-color: transparent !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.20);
    transform: translateY(-2px);
    color: #ffffff !important;
}

.album-editor-page .story-card-nav.is-active * {
    color: #ffffff !important;
}

/* Slug backgrounds for active cards */
.album-editor-page .story-card-nav.theme-about.is-active        { background: #A3A3A3 !important; }
.album-editor-page .story-card-nav.theme-wip.is-active          { background: #FCBD34 !important; }
.album-editor-page .story-card-nav.theme-maintenance.is-active  { background: #C68A2D !important; }
.album-editor-page .story-card-nav.theme-restoration.is-active  { background: #B7410E !important; }
.album-editor-page .story-card-nav.theme-modification.is-active { background: #6C8C74 !important; }
.album-editor-page .story-card-nav.theme-trip.is-active         { background: #8CBFE6 !important; }
.album-editor-page .story-card-nav.theme-adventure.is-active    { background: #2E4A72 !important; }
.album-editor-page .story-card-nav.theme-award.is-active    { background: #B59B55 !important;}
.album-editor-page .story-card-nav.theme-future.is-active       { background: #C9C9C9 !important; color:#222 !important; }

/* active slot animation (optional but subtle) */
.album-editor-page .story-card-nav.is-animating {
    opacity: 0;
    transform: translateX(12px);
}

/* -----------------------------
   MOBILE BEHAVIOUR
------------------------------ */
@media (max-width: 900px) {
    .album-editor-page .story-carousel {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .album-editor-page .story-carousel-arrow {
        display: none;
    }
    .album-editor-page .story-carousel-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .album-editor-page .story-card-nav {
        flex: 0 0 75%;
        scroll-snap-align: start;
    }
}




/* ============================================================
   XJS Soft Tops Club — MINI CAROUSEL (FINAL CLEAN VERSION)
   Matches live DOM structure exactly
   ============================================================ */

/* ---------------------------------------------
   MINI CAROUSEL WRAPPER
--------------------------------------------- */
/* MINI CAROUSEL — inside story table-mat */
.story-card-inner .mini-carousel,
.story-card .mini-carousel {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;

    margin-top: 0.75rem;
    margin-bottom: 1rem;

    /* picture frame */
    padding: 0.6rem 0.8rem;
    border: 2px solid #d6d0c5;
    border-radius: 12px;
    background: #f9f5ec;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06);

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.story-card-inner .mini-carousel::-webkit-scrollbar,
.story-card .mini-carousel::-webkit-scrollbar {
    display: none;
}


/* ---------------------------------------------
   MINI CARDS
--------------------------------------------- */
.mini-carousel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    width: 395px;
    min-width: 395px;

    background: #f7f4ec;      /* soft cream */
    border: 12px solid #d8d2c5;
    border-radius: 10px;

    padding: 0.5rem;
    cursor: pointer;

    font-size: 0.78rem;
    transition: all 0.16s ease;
}

.mini-carousel-card:hover {
    background: #f3efe4;
    transform: translateY(-2px);
}

/* Active card */
.mini-carousel-card.is-active {
    background: #ffffff;
    border-width: 3px;
    transform: scale(1.045);
}

/* ---------------------------------------------
   THUMBNAIL BLOCK
--------------------------------------------- */
.mini-thumb {
    width: 100%;
    height: 70px;

    border-radius: 6px;
    background: #ddd;

    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        #eaeaea,
        #eaeaea 6px,
        #d7d7d7 6px,
        #d7d7d7 12px
    );
    opacity: 0.7;
}

/* ---------------------------------------------
   TITLE
--------------------------------------------- */
.mini-title {
    margin-top: 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    color: #1a3b2e;
    line-height: 1.2;
    width: 100%;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------
   ADD NEW STORY CARD
--------------------------------------------- */
.mini-carousel-card.mini-carousel-add {
    background: #e8f2eb;
    border: 2px dashed #96b3a1;
    color: #1a3b2e;
    font-weight: 700;
    font-size: 1.8rem;

    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-carousel-card.mini-carousel-add:hover {
    background: #dcebe0;
    transform: translateY(-2px);
}

/* ---------------------------------------------
   OPTIONAL — PER-SLUG ACTIVE COLOUR RINGS
   (Uses your album-common.css vars)
--------------------------------------------- */
.mini-carousel[data-slug="about"]        .mini-carousel-card.is-active { border-color: var(--theme-about); }
.mini-carousel[data-slug="wip"]          .mini-carousel-card.is-active { border-color: var(--theme-wip); }
.mini-carousel[data-slug="maintenance"]  .mini-carousel-card.is-active { border-color: var(--theme-maintenance); }
.mini-carousel[data-slug="restoration"]  .mini-carousel-card.is-active { border-color: var(--theme-restoration); }
.mini-carousel[data-slug="modification"] .mini-carousel-card.is-active { border-color: var(--theme-modification); }
.mini-carousel[data-slug="trip"]         .mini-carousel-card.is-active { border-color: var(--theme-trip); }
.mini-carousel[data-slug="adventure"]    .mini-carousel-card.is-active { border-color: var(--theme-adventure); }
.mini-carousel[data-slug="award"]        .mini-carousel-card.is-active { border-color: var(--theme-award); }
.mini-carousel[data-slug="future"]       .mini-carousel-card.is-active { border-color: var(--theme-future); }







*/

/* Mini-carousel active card highlight */
.mini-card.is-active {
    outline: 3px solid var(--soft-green);
    outline-offset: 3px;
    border-radius: 10px;
    background: #f5f5f5;
}

/* ============================================================
   8. MINI CAROUSEL — Presentation Layer (SCRS v2 — Step 4)
   Provides visual styling for the single dynamic mini-carousel:
     • Horizontal scroll strip
     • Story-card thumbnails + title
     • "+" add-card styling
     • Slug-themed accent bars
   ============================================================ */

/* ------------------------------------------------------------
   8.1 — Mini-carousel wrapper (contains story cards)
   ------------------------------------------------------------ */
#story-mini-carousel {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    margin: 1.5rem 0 2rem;
    overflow-x: auto;

    background: var(--soft-cream);
    border: 12px solid #d9d4c6;
    border-radius: 12px;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* Hide ugly scrollbars (Chrome/Safari) */
#story-mini-carousel::-webkit-scrollbar {
    height: 6px;
}
#story-mini-carousel::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 6px;
}

/* ------------------------------------------------------------
   8.2 — Mini-card base
   ------------------------------------------------------------ */
#story-mini-carousel .mini-card {
    width: 95px;
    min-width: 95px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    scroll-snap-align: start;

    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.15);

    border-left: 6px solid transparent; /* Slug-coloured later via class */
    cursor: pointer;
}

/* Thumbnail container */
#story-mini-carousel .mini-thumb {
    width: 100%;
    height: 70px;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    background: #ddd;
}

/* Title */
#story-mini-carousel .mini-title {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.25rem 0.5rem;
    line-height: 1.2;
    color: #2b2b2b;
}

/* ------------------------------------------------------------
   8.3 — "+" Add Card
   ------------------------------------------------------------ */
#story-mini-carousel .mini-card-add {
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 2rem;
    font-weight: 600;

    border: 2px dashed #6a6;
    color: #375;

    background: #f6faf6;
}

/* ------------------------------------------------------------
   8.4 — Slug-theme accent bars (matches large cards)
   ------------------------------------------------------------ */
#story-mini-carousel .theme-about       { border-left-color: var(--theme-about); }
#story-mini-carousel .theme-wip         { border-left-color: var(--theme-wip); }
#story-mini-carousel .theme-maintenance { border-left-color: var(--theme-maintenance); }
#story-mini-carousel .theme-restoration { border-left-color: var(--theme-restoration); }
#story-mini-carousel .theme-modification{ border-left-color: var(--theme-modification); }
#story-mini-carousel .theme-trip        { border-left-color: var(--theme-trip); }
#story-mini-carousel .theme-adventure   { border-left-color: var(--theme-adventure); }
#story-mini-carousel .theme-award      { border-left-color: var(--theme-award); }
#story-mini-carousel .theme-future      { border-left-color: var(--theme-future); }


/* ============================================================
   MINI CAROUSEL — FIXED CARD DIMENSIONS
   ============================================================ */

/* Wrapper behaves like a horizontal track */
#story-mini-carousel {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* ----------------------------------------------
   1. STANDARD STORY CARDS
   ---------------------------------------------- */
#story-mini-carousel .mini-card {
    width: 180px;            /* FIXED WIDTH */
    height: 120px;           /* FIXED HEIGHT */
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Top thumbnail panel (auto-shrink inside card) */
#story-mini-carousel .mini-card .mini-thumb {
    width: 100%;
    height: 70px;            /* proportionate space for image */
    flex-shrink: 0;
    overflow: hidden;
    background: #ddd;
    border-radius: 10px 10px 0 0;
}

/* Ensure inner image fills */
#story-mini-carousel .mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Title area */
#story-mini-carousel .mini-title {
    flex: 1;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.2;
    font-weight: 600;
    display: flex;
    align-items: center;
    color: #333;
}

/* ----------------------------------------------
   2. "+" ADD CARD (GREY CARD)
   ---------------------------------------------- */
#story-mini-carousel .mini-card-add {
    width: 120px;            /* FIXED GREY CARD WIDTH */
    height: 120px;           /* MATCH HEIGHT */
    border: 2px dashed #6a6;
    border-radius: 10px;
    background: #f7f7f7;
    font-size: 2rem;
    color: #375;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}




/* Remove gap under large story carousel */
.album-editor-story-nav.softpaper {
    margin-bottom: 0 !important;
}
/* Remove unwanted top margin on story sections in the Album Editor */
body.album-editor-page .story-card {
    margin-top: 0 !important;
}
body.album-editor-page .story-card-inner {
    padding-top: 0 !important;
}



/* ============================================================
   UNIVERSAL ACTIVE STORY THEME — COLOUR ALL TABLE MATS
   ============================================================ */

/* ABOUT */
body.theme-active-about .story-card-inner {
    border: 13px solid #A3A3A3 !important;
    border-radius: 16px;
}

/* WIP */
body.theme-active-wip .story-card-inner {
    border: 13px solid #FCBD34 !important;
    border-radius: 16px;
}

/* MAINTENANCE */
body.theme-active-maintenance .story-card-inner {
    border: 13px solid #C68A2D !important;
    border-radius: 16px;
}

/* RESTORATION */
body.theme-active-restoration .story-card-inner {
    border: 13px solid #B7410E !important;
    border-radius: 16px;
}

/* MODIFICATION */
body.theme-active-modification .story-card-inner {
    border: 13px solid #6C8C74 !important;
    border-radius: 16px;
}

/* TRIP */
body.theme-active-trip .story-card-inner {
    border: 13px solid #8CBFE6 !important;
    border-radius: 16px;
}

/* ADVENTURE */
body.theme-active-adventure .story-card-inner {
    border: 13px solid #2E4A72 !important;
    border-radius: 16px;
}

/* award */
body.theme-active-award .story-card-inner {
    border: 13px solid #B59B55 !important;
    border-radius: 16px;
}

/* FUTURE */
body.theme-active-future .story-card-inner {
    border: 13px solid #C9C9C9 !important;
    border-radius: 16px;
}
/* ============================================================
   MINI CAROUSEL — ACTIVE CARD HIGHLIGHT
   Border + subtle glow (style C)
   ============================================================ */

body.album-editor-page .mini-carousel [data-mini-index] {
  transition:
    border-color 0.18s ease-out,
    box-shadow 0.18s ease-out,
    transform 0.18s ease-out;
}

/* Active mini-card: thicker border + soft glow */
body.album-editor-page .mini-carousel .mini-card-active {
  border-width: 2px;
  border-style: solid;
  border: 3px solid #1a3b2e !important;    /* British Racing Green */
  box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
      border-radius: 10px !important;
      background: #1a3b2e !important;          /* invert scheme */
    color: #eae3d1 !important;      
}

    






/* Default load – colour all mats as ABOUT */
body.album-editor-page .story-card .story-card-inner {
    border: 13px solid #A3A3A3; /* whatever your ABOUT colour is */
}



/* Remove ACF bottom borders inside story mats */
body.album-editor-page .story-card-inner .acf-fields.-border,
body.album-editor-page .story-card-inner .acf-fields.-top.-border,
body.album-editor-page .story-card-inner .acf-field .acf-fields.-border {
    border: none !important;
}

/* Also remove borders inside repeaters */
body.album-editor-page .story-card-inner .acf-table td,
body.album-editor-page .story-card-inner .acf-table tr,
body.album-editor-page .story-card-inner .acf-row,
body.album-editor-page .story-card-inner .acf-row-handle {
    border: none !important;
    box-shadow: none !important;
}





/* ============================================================
   ALBUM EDITOR — Remove padding inside story cards only
   ============================================================ */

/*body.album-editor-page .story-card-inner.softpaper.opt-cream {
    padding: 0 !important;
}

body.album-editor-page .story-card-inner.softpaper.opt-cream {
    padding-top: 0 !important;
}
/* ============================================================
   ALBUM EDITOR — Strip vertical padding inside Softpaper frames
   ============================================================ */
body.album-editor-page .softpaper:not(.softpaper--intro):not(.navbar) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* ============================================================
   ALBUM EDITOR — Add lateral breathing space to left text panel
   ============================================================ */
body.album-editor-page .story-editor-left .acf-field .acf-input {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.mini-card.active {
    outline: 3px solid var(--story-accent-colour);
    border-radius: 6px;
}

.mini-card.active-slug.theme-about     { outline-color: var(--about); }
.mini-card.active-slug.theme-wip       { outline-color: var(--wip); }
.mini-card.active-slug.theme-restoration { outline-color: var(--restoration); }
/* …repeat for all slugs… */

/* ============================================================
   MINI CAROUSEL — ACTIVE CARD HIGHLIGHT
   ============================================================ */

#story-mini-carousel .mini-card.active {
    outline: 5px solid var(--st-green, #1a3b2e);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Optional — apply a slug colour border */
#story-mini-carousel .mini-card.active-slug {
    box-shadow: 0 0 0 3px currentColor inset;
}
/* ============================================================
   MINI CAROUSEL — Active Card Styling
   ============================================================ */

#story-mini-carousel .mini-card-active,
#story-mini-carousel .mini-card-active-slug {
    border: 3px solid #1a3b2e !important;    /* British Racing Green */
    border-radius: 10px !important;

    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);

    background: #1a3b2e !important;          /* invert scheme */
    color: #eae3d1 !important;               /* Soft Tops cream text */
}

/* Make title readable when highlighted */
#story-mini-carousel .mini-card-active .mini-title,
#story-mini-carousel .mini-card.active-slug .mini-title {
    color: #eae3d1 !important;
    font-weight: 600;
}

/* OPTIONAL: Darken the thumbnail slightly on active */
#story-mini-carousel .mini-card.active .mini-thumb,
#story-mini-carousel .mini-card.active-slug .mini-thumb {
    filter: brightness(0.85);
    border-radius: 6px;
}
/* ============================================================
   LARGE STORY CAROUSEL — 4-CARD LAYOUT
   ============================================================ */

body.album-editor-page .story-carousel-track {
    display: flex;
    gap: 1rem;
    overflow: hidden;
    padding: 0.5rem 0;
}



body.album-editor-page .story-card-nav.is-active {
    transform: scale(1.05);
    z-index: 2;
}




/* Arrows aligned vertically */
.story-carousel-prev,
.story-carousel-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: auto;
    background: none;
    border: none;
    cursor: pointer;
}
.story-carousel-track {
    transition: transform 0.25s ease;
}

/* ============================================================
   OPTION 4A — Story Frame Layout (Adaptive, Canonical)
   ============================================================ */

.story-frame-viewport {
    position: relative;
    width: 100%;
    overflow: hidden; /* CRITICAL: kills gap creep */
}

.story-frame-canvas {
    position: relative;
    width: 100%;
}

/* Defensive: story mats behave predictably */
.story-frame-canvas .story-card {
    width: 100%;
}





/* ============================================================
   Album Editor — Hide ALL top-level story repeater headings
   ============================================================ */
body.album-editor-page
.acf-field-repeater[data-name^="car_"] > .acf-label,
body.album-editor-page
.acf-field-repeater[data-name^="car_"] > .acf-input > .acf-repeater > .acf-label {
    display: none !important;
}
/* ============================================================
   HIDE INTERNAL STORY POINTER FIELDS
   ============================================================ */

/* Per-slug story index fields */
body.album-editor-page
.acf-field[data-name$="_story"] {
    display: none !important;
}

/* Explicitly include car_last_story */
body.album-editor-page
.acf-field[data-name="car_last_story"] {
    display: none !important;
}
body.album-editor-page
.acf-field[data-name$="_story"] * {
    pointer-events: none;
}

.story-photos-fullwidth {
    margin-top: 0.5rem;   /* try 0.25rem or 0 */
}

/* ============================================================
   MINI CAROUSEL — EMPTY STORY CARD (UNFINISHED PAPER)
   ------------------------------------------------------------
   Purpose:
   • Indicates a place to start a new story
   • Fully clickable (NOT disabled)
   • Visually distinct from completed stories
   • Matches Softpaper / heritage aesthetic
   ============================================================ */

body.album-editor-page .mini-card.is-empty {

    /* Layout & presence (same as normal cards) */
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;

    /* Paper-like background (subtle, not loud) */
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.92),
            rgba(255, 255, 255, 0.92)
        ),
        repeating-linear-gradient(
            45deg,
            rgba(26, 59, 46, 0.06),
            rgba(26, 59, 46, 0.06) 12px,
            rgba(26, 59, 46, 0.03) 12px,
            rgba(26, 59, 46, 0.03) 24px
        );

    /* Unfinished visual language */
    border-style: dashed;
    border-color: rgba(26, 59, 46, 0.45);

    /* Calm default state */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ------------------------------------------------------------
   Title inside empty card
   ------------------------------------------------------------ */
body.album-editor-page .mini-card.is-empty .mini-title {
    font-style: italic;
    font-weight: 500;
    color: rgba(26, 59, 46, 0.75);
    text-align: center;
}

/* ------------------------------------------------------------
   Hover / focus reassurance (important!)
   ------------------------------------------------------------ */
body.album-editor-page .mini-card.is-empty:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

/* ------------------------------------------------------------
   Optional: subtle + affordance without using a +Card
   ------------------------------------------------------------ */
body.album-editor-page .mini-card.is-empty::after {
    content: "Click to start";
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.03em;
    margin-top: 0.2rem;
    text-align: center;
    opacity: 0.75;
}
/* ============================================================
   MINI CAROUSEL — EMPTY STORY (BASE)
   ============================================================ */

body.album-editor-page .mini-card.is-empty {
    border-style: dashed;
    border-color: rgba(26, 59, 46, 0.45);
    background: var(--softpaper-bg, #f5f2e8);
    cursor: pointer;
}
/* ------------------------------------------------------------
   EMPTY FIRST STORY — "Write your story here"
   ------------------------------------------------------------ */

body.album-editor-page .mini-card.is-empty.is-first .mini-thumb {
    background:
        repeating-linear-gradient(
            45deg,
            rgba(26, 59, 46, 0.05),
            rgba(26, 59, 46, 0.05) 12px,
            rgba(26, 59, 46, 0.025) 12px,
            rgba(26, 59, 46, 0.025) 24px
        );
}

body.album-editor-page .mini-card.is-empty.is-first .mini-title {
    font-style: italic;
    font-weight: 600;
    text-align: center;
    color: rgba(26, 59, 46, 0.85);
}
/* ------------------------------------------------------------
   EMPTY NEXT STORY — "Add another story"
   ------------------------------------------------------------ */

body.album-editor-page .mini-card.is-empty.is-next .mini-thumb {
    background:
        repeating-linear-gradient(
            45deg,
            rgba(26, 59, 46, 0.06),
            rgba(26, 59, 46, 0.06) 10px,
            rgba(26, 59, 46, 0.03) 10px,
            rgba(26, 59, 46, 0.03) 20px
        );
    position: relative;
}

/* Instruction lives where photo would be */
body.album-editor-page .mini-card.is-empty.is-next .mini-thumb::after {
    content: "Click to start";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(26, 59, 46, 0.7);
}
.mini-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    border-radius: 6px;
    background: #eee;           /* neutral */
    color: #6a6a6a;
    font-size: 0.75rem;
}
.mini-card.mini-card-empty .mini-thumb-placeholder {
    background:
        repeating-linear-gradient(
            45deg,
            rgba(26, 59, 46, 0.08),
            rgba(26, 59, 46, 0.08) 10px,
            rgba(26, 59, 46, 0.04) 10px,
            rgba(26, 59, 46, 0.04) 20px
        );
}
.mini-card:not(.mini-card-empty) .mini-thumb-placeholder.neutral {
    background: #f0f0f0;
    opacity: 0.9;
}



* {
  outline: 1px solid rgba(255,0,0,0.2);
}

/* ==========================================================
   ALBUM EDITOR — MOBILE STICKY TOOLBAR (FINAL, SAFE)
   ========================================================== */
@media (max-width: 900px) {

  body.album-editor-page .mobile-album-editor-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    gap: 12px;
    justify-content: space-between;

    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));

    box-shadow: 0 -6px 18px rgba(0,0,0,0.25);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    
    transform: none !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;

    z-index: 1000;

    background: rgba(26, 59, 46, 0.72); /* soft racing green */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(30px);

    border-radius: 18px 18px 0 0;
  }

  /* Buttons inside the bar */
  body.album-editor-page .mobile-album-editor-bar .softbtn {
    flex: 1;
    max-width: 25%;

    background: #1a3b2e;
    color: #eae3d1;
    border: 2px solid rgba(234,227,209,0.25);
    
        padding: 0px;
    font-size: 15px;
    min-height: 30px;
    max-height: 40px;
  }
  
  /* cancel button — solid */
  body.album-editor-page .mobile-album-editor-bar .softbtn-cancel {
    background: #1a3b2e;
    color: #eae3d1;
    border: 2px solid rgba(234,227,209,0.65);
  }


  /* Save button — solid */
  body.album-editor-page .mobile-album-editor-bar .softbtn-save {
    background: #1a3b2e;
    color: #eae3d1;
    border: 2px solid rgba(234,227,209,0.65);
  }
}

@media (max-width: 900px) {

  .album-mobile-browse-bar {
    display: flex;
    justify-content: space-between;
    gap: 12px;

    margin: 10px 16px 4px;
  }

  .album-mobile-browse-bar .softbtn {
    padding: 8px 14px;
    font-size: 14px;
  }
}

/* ============================================================
   MOBILE ALBUM BROWSE TOOLBAR
   ============================================================ */

@media (max-width: 900px) {

  body.single-car_album .album-mobile-browse-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    justify-content: space-between;
    gap: 12px;

    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));

    background: rgba(26, 59, 46, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.25);

    border-top-left-radius: 18px;
    border-top-right-radius: 18px;

    z-index: 99999;

    /* CRITICAL: break out of ColorMag layout */
    pointer-events: auto;
  }

  body.single-car_album .album-mobile-browse-bar .softbtn {
    flex: 1;
    max-width: 45%;
    min-height: 38px;

    background: #1a3b2e;
    color: #eae3d1;

    border: 2px solid rgba(234, 227, 209, 0.65);
    font-size: 15px;
  }
  
}
@media (max-width: 900px) {

  body.album-editor-page .mobile-album-editor-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    justify-content: space-between;
    gap: 12px;

    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));

    background: rgba(26, 59, 46, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow: 0 -6px 18px rgba(0,0,0,0.25);

    border-top-left-radius: 18px;
    border-top-right-radius: 18px;

    z-index: 999999;
  }

  body.album-editor-page .mobile-album-editor-bar .softbtn {
    flex: 1;
    max-width: 45%;
    min-height: 38px;

    background: #1a3b2e;
    color: #eae3d1;
    border: 2px solid rgba(234,227,209,0.65);
    font-size: 15px;
  }
}
/* ============================================================
   Limit story title field width (~20 characters)
   ACF-safe version
   ============================================================ */

/* Limit width ONLY for story title fields inside table mats */
body.album-editor-page
.acf-field[data-name$="_group"]
  .acf-field[data-name$="_title"]
  .acf-input-wrap {
    max-width: 20ch !important;
    width: 20ch !important;
}

/* Input fills the constrained wrapper */
body.album-editor-page
.acf-field[data-name$="_group"]
  .acf-field[data-name$="_title"]
  input {
    width: 100% !important;
}


/* ============================================================
   Limit story date field width (~20 characters)
   ACF-safe version
   ============================================================ */

body.album-editor-page
.acf-field[data-name$="_date"] .acf-input-wrap {
  max-width: 20ch !important;
  width: 20ch !important;
}

body.album-editor-page
.acf-field[data-name$="_date"] input {
  width: 100% !important;
}
/* ============================================================
   Story title input — rounded left, rounded right (final)
   ============================================================ */

body.album-editor-page
.acf-field[data-name$="_title"] .acf-input-wrap,
body.album-editor-page
.acf-field[data-name$="_title"] input {
  border-radius: 0 8px 8px 0 !important;
}

/* ============================================================
   STEP 1 — Mobile-only spacing reset (Album Editor)
   ============================================================ */

@media (max-width: 768px) {

  /* Space between label and input */
  body.album-editor-page
  .acf-field > .acf-label {
    margin-bottom: 6px !important;
  }

  /* Space between fields */
  body.album-editor-page
  .acf-field {
    margin-bottom: 14px !important;
  }

  /* Textarea breathing room */
  body.album-editor-page
  .acf-field-textarea textarea {
    margin-top: 4px;
  }

  /* Date + Location fields */
  body.album-editor-page
  .acf-field[data-name$="_date"],
  body.album-editor-page
  .acf-field[data-name$="_location"] {
    margin-top: 6px;
  }
}
/* ============================================================
   STEP 6 — Reduce top padding above album title (PHONE ONLY)
   ============================================================ */

@media (max-width: 768px) {

  /* Reduce space after header */
  body.album-editor-page #main {
    padding-top: 0 !important;
  }

  /* Pull album title closer to top */
  body.album-editor-page .album-title,
  body.album-editor-page h1,
  body.album-editor-page .entry-title {
    margin-top: 6px !important;
  }

  /* Reduce gap before first editor block */
  body.album-editor-page .acf-form,
  body.album-editor-page .album-editor-wrap {
    margin-top: 6px !important;
  }
}
/* ============================================================
   Reduce excessive mobile header spacing (PHONE ONLY)
   ============================================================ */


@media (max-width: 768px) {


body.album-editor-page #primary, body.album-editor-page .site-main {
    padding-top: 0 !important;
  }

  /* Kill excessive bottom spacing from mobile header */
  .main-content-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Kill excessive bottom spacing from mobile header */
  .softheader-mobile {
    margin-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* If header reserves vertical space, reduce it */
  .softheader-mobile {
    padding-top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Safety: prevent header from pushing main content down */
  body.album-editor-page #main,
  body.single-car_album #main {
    margin-top: 0 !important;
  }
}
@media (max-width: 768px) {
  body.album-editor-page #primary {
    padding-top: 0 !important;
  }
}

/* ============================================================
   SOFTTOPS — CANONICAL MINI CAROUSEL
   Native scroll, touch + trackpad
   ============================================================ */

body.album-editor-page .mini-carousel {
    display: flex;
    gap: 0.75rem;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}
body.album-editor-page .mini-carousel::-webkit-scrollbar {
    display: none;
}

body.album-editor-page .mini-carousel-card {
    flex: 0 0 auto;
    width: 395px;
    min-width: 395px;

    scroll-snap-align: start;
}
/* ============================================================
   SOFTTOPS — CANONICAL LARGE STORY CAROUSEL
   Matches mini carousel behaviour exactly
   ============================================================ */

body.album-editor-page .story-carousel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* 🔑 The scroll surface */
body.album-editor-page .story-carousel-track {
    display: flex;
    gap: 1rem;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}
body.album-editor-page .story-carousel-track::-webkit-scrollbar {
    display: none;
}

/* Fixed-width cards (desktop + mobile) - master value */
body.album-editor-page .story-card-nav {
    flex: 0 0 auto;
    width: 250px;
    height:110px;
    padding-top; 2px;
    min-width: 200px;

    scroll-snap-align: end !important;
}
.album-editor-page .story-card-nav {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;    
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}


@media (max-width: 900px) {
    body.album-editor-page .story-carousel-arrow {
        display: none;
    }
}

@media (min-width: 901px) {
    body.album-editor-page .story-carousel-arrow {
        display: flex;
        width: 44px;
        height: 44px;
        font-size: 1.6rem;
    }
}
.story-card-nav.is-active {
  outline: 2px solid var(--theme-accent, #1a3b2e);
  outline-offset: 2px;
}

@media (min-width: 768px) and (max-width: 1024px) {

  .story-carousel-track {
      padding-left: 1.35rem;
      padding-right: 1.35rem;
  }

  .story-carousel-card {
      flex: 0 0 360px;
      max-width: 360px;
  }

}

.story-carousel-track { outline: 3px solid red !important; }
.story-carousel-card  { outline: 3px solid blue !important; }


/* ============================================================
   LARGE STORY CAROUSEL — RESPONSIVE CARD SIZING (CANONICAL)
   ============================================================ */

/*body.album-editor-page .story-carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


*/

/* iPhone — ~1.5 cards */
@media (max-width: 767px) {
    body.album-editor-page .story-card-nav {
        flex: 0 0 68%;
        width: 68%;
    }
}


  body.album-editor-page .story-carousel-track {
    padding-left: 2px;
    padding-right: 2px;

    gap: 2px;
  }

  body.album-editor-page .story-card-nav {
          min-height:125px !important;
    flex: 0 0 22%;
    width: 22%;
  }

/* cosmetic Friday */

/* ============================================================
   Album Editor — Story Nav: edge-to-edge carousel
   Remove Softpaper side padding ONLY for this section
   ============================================================ */

.album-editor-story-nav.softpaper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================================
   Album Editor — Hide mobile toolbar when WP Media modal exists
   Frontend-safe (ACF / wp.media)
   ============================================================ */

body:has(.media-modal) .mobile-album-editor-bar {
    display: none !important;
}







/* ============================================================ */
/*   SPACE                                                        */
/*   ============================================================ */
/* Kill table row spacing */
body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
tr.acf-row {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

/* Kill TD padding */
body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
td.acf-fields,
body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
td.acf-row-handle {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

/* Kill inner ACF field wrappers */
body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
.acf-fields.-top.-border {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    border-bottom: 0 !important;
}

/* Kill image field margins */
body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
.acf-field-image {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure image uploader itself has no trailing space */
body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
.acf-image-uploader {
    margin-bottom: 0 !important;
}
/* ============================================================ */
/*   SPACE                                                        */
/*   ============================================================ */

/* ================================================================= */
/* PHOTO - GRID                                                      */
/* ================================================================= */
/* Desktop : 5 wide */
body.album-editor-page 
.acf-field-repeater[data-name$="_photo_repeater"] .acf-table > tbody {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 0.9fr));
  gap: 1.2rem;
}

/* Tablet : 2 wide */
@media (max-width: 1300px) {
  body.album-editor-page 
  .acf-field-repeater[data-name$="_photo_repeater"] .acf-table > tbody {
    grid-template-columns: repeat(3, minmax(0, 0.9fr));
  }
}

/* Tablet : 2 wide */
@media (max-width: 1000px) {
  body.album-editor-page 
  .acf-field-repeater[data-name$="_photo_repeater"] .acf-table > tbody {
    grid-template-columns: repeat(2, minmax(0, 0.9fr));
  }
}

/* Mobile: single column */
@media (max-width: 768px) {
  body.album-editor-page 
  .acf-field-repeater[data-name$="_photo_repeater"] .acf-table > tbody {
    grid-template-columns: 1fr;
  }
}
/* ================================================================= */
/* PHOTO - GRID                                                      */
/* ================================================================= */

/* ================================================================= */
/* PHOTO - HIDES and SHOWS                                           */
/* ================================================================= */
body.album-editor-page 
.acf-field[data-name$="_photo_caption"],
body.album-editor-page
.acf-field[data-name$="_photo_description"] {
  display: none !important;
}

/* Hide Duplicate Row */
body.album-editor-page 
.acf-field-repeater[data-name$="_photo_repeater"]
a[data-event="duplicate-row"],
body.album-editor-page

/* Hide Add Button */
.acf-field-repeater[data-name$="_photo_repeater"]
a[data-event="add-row"] {
    display: none !important;
}

/* DELETE — single clear control */
/* Dustbin icon for delete */

/*body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
a[data-event="remove-row"]::before {
    content: "";
    width: 26px;
    height: 26px;
    display: block;

    background-color: #b7410e;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2zm1 6h2v8h-2V9zm4 0h2v8h-2V9zM7 9h2v8H7V9z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}*/
/* Kill ACF image-level remove (✕) button — we use our own dustbin */
body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
.acf-image-uploader
a.acf-icon.-cancel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Kill ACF image-level remove (✕) button — we use our own dustbin */
body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
.acf-image-uploader
a.acf-icon.-pencil {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}






/* Dash icon */
body.album-editor-page 
.acf-field-repeater[data-name$="_photo_repeater"]
a[data-event="remove-row"]::before {
    content: "–";
}

/* Remove ONLY the text "No image selected" */
.album-editor-page 
.acf-image-uploader .hide-if-value p {
    font-size: 0 !important;
}
/* Kill ACFe ghost preview image when empty */
body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
.acf-image-uploader .hide-if-value img {
    display: none !important;
}
/* Kill empty ACF preview wrapper (grey bar bug) */
body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
.acf-image-uploader:not(.has-value)
.show-if-value {
    display: none !important;
}

/* ================================================================= */
/* PHOTO - HIDES and SHOWS                                           */
/* ================================================================= */

/* ================================================================= */
/* PHOTO - EXISTANCE                                                 */
/* ================================================================= */
/* ================================================================= */
/* PHOTO — STORY CARD (EDIT MODE) — SQUARE FRAME (LIVE IMAGES)       */
/* ================================================================= */

body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
.acf-image-uploader.has-value .image-wrap {

    width: 100% !important;
    aspect-ratio: 1 / 1 !important;     /* 🔒 SQUARE */
    position: relative !important;

    background: var(--soft-cream) !important;  /* matte shading */
    border-radius: 14px !important;
    overflow: hidden !important;

    display: block !important;
}

/* Image itself — never crop */
body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
.acf-image-uploader.has-value .image-wrap img {

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

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;     /* portrait + landscape safe */
    display: block !important;
    margin: auto !important;
}

/* Remove padding injected by ACF */
body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
.acf-field-group > .acf-input {
    padding: 0 !important;
}

/* Soft white photo border */
body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
.acf-image-uploader.has-value .image-wrap {

    border: 6px solid rgba(255,255,255,0.85) !important;
    box-sizing: border-box !important;
}

/* ================================================================= */
/* PHOTO — STORY CARD (EDIT MODE) — END                               */
/* ================================================================= */

/* ================================================================= */
/* PHOTO - EXISTANCE                                                 */
/* ================================================================= */


/* ================================================================= */
/* CARD - HANDLE                                                    */
/* ================================================================= */
/* moves handle to the top                                           */
    body.album-editor-page 
    .story-editor-right 
    .acf-field-repeater[data-name$="_photo_repeater"] td.acf-fields.-left {
        display: block !important;    /* KEY FIX */
        width: 100% !important;
    }
/* Definition              */
    body.album-editor-page .acf-field-repeater[data-name$="_photo_repeater"] td.acf-row-handle.order {
    display: table-cell !important;
    visibility: visible !important;
    width: 158px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 10px !important;
    padding: 0 !important;
    margin: 0 0 0 0 !important;
    background: repeating-linear-gradient(
    90deg,
    rgba(0,0,0,0.10) 0px,
    rgba(0,0,0,0.10) 4px,
    rgba(0,0,0,0.15) 4px,
    rgba(0,0,0,0.15) 8px
    ) !important;
    border-radius: 8px 8px 1px 1px;
    cursor: grab !important;
    }
/* drag icon                                      */
    body.album-editor-page 
    .acf-field-repeater[data-name$="_photo_repeater"]
    td.acf-row-handle.order::after {
        content: "⋮⋮";
        color: rgba(0,0,0,0.45);
        font-size: 18px;
        display: block;
        text-align: center;
        margin-top: 8px;
        pointer-events: none;
    }
/* Hide the row-number text inside the handle */
    body.album-editor-page .acf-row-handle.order {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
    body.album-editor-page td.acf-row-handle.order .acf-row-number {
      display: none !important;
}
/* MOBILE — ENLARGE DRAG HANDLE (TOUCH FRIENDLY) */
@media (max-width: 900px) {

  body.album-editor-page
  .acf-field-repeater[data-name$="_photo_repeater"]
  td.acf-row-handle.order {

    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height:40px !important;

    padding: 0 !important;
    cursor: grab;

  }

  body.album-editor-page
  .acf-field-repeater[data-name$="_photo_repeater"]
  td.acf-row-handle.order::after {

    font-size: 22px !important;
    margin-top: 10px;

  }
}
/* ================================================================= */
/* CARD - HANDLE                                                    */
/* ================================================================= */
/* moves handle to the top                                           */

/* ================================================================= */
/* PHOTO - ACFe                                                      */
/* ================================================================= */
/* styling */
/* ================================================================= */
/* PHOTO — ACFe ADD IMAGE — MATCH STORY CARDS                         */
/* ================================================================= */

body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
.acf-field-image .acf-image-uploader .hide-if-value {

    aspect-ratio: 1 / 1;                 /* 🔒 SQUARE */
    width: 100%;
    position: relative;
}

/* Add Image button — centred and full size */
body.album-editor-page
.acf-field-repeater[data-name$="_photo_repeater"]
.acf-field-image .acf-image-uploader .hide-if-value [data-name="add"] {

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

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

    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--soft-green) !important;

    background: repeating-linear-gradient(
        45deg,
        rgba(26,59,46,0.06) 0px,
        rgba(26,59,46,0.06) 12px,
        rgba(26,59,46,0.10) 12px,
        rgba(26,59,46,0.10) 24px
    ) !important;

    border: 2px dashed rgba(26,59,46,0.35) !important;
    border-radius: 14px !important;

    box-sizing: border-box !important;
    cursor: pointer !important;
}
/* ================================================================= */
/* PHOTO - ACFe    end                                               */
/* ================================================================= */

/* ============================================================
   HERO PHOTO — SQUARE, LOCKED (ACF SAFE)
   ============================================================ */

body.album-editor-page
.acf-field[data-name="album_hero_photo"]
.acf-image-uploader {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
}

/* Lock the square container */
body.album-editor-page
.acf-field[data-name="album_hero_photo"]
.acf-image-uploader .image-wrap {
    width: 100%;
    height: 100% !important;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: var(--soft-cream);
}

/* OVERRIDE ACF INLINE IMAGE STYLES */
body.album-editor-page
.acf-field[data-name="album_hero_photo"]
.acf-image-uploader .image-wrap img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: contain !important;   /* ← critical */
    background: var(--soft-cream);
    display: block;
}

/* White inner border (visual consistency) */
body.album-editor-page
.acf-field[data-name="album_hero_photo"]
.acf-image-uploader.has-value .image-wrap {
    border: 6px solid rgba(255,255,255,0.85);
    box-sizing: border-box;
}
















/* ============================================================
   Member Albums — Header Action Layout
   ============================================================ */

.album-header-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* centre the ABOUT button */
    margin-top: 1.5rem;
}

/* Centre button */
.album-header-center {
    display: flex;
    justify-content: center;
}

/* Right-aligned button (desktop only) */
.album-header-right {
    position: absolute;
    right: 0;
}

/* Mobile behaviour */
@media (max-width: 900px) {

    .album-header-actions {
        flex-direction: column;
        gap: 1rem;
    }

    .album-header-right {
        position: static;
    }
}
/* ============================================================
   Softintro — compact buttons only
   ============================================================ */

.softintro .softbtn {
    padding: 6px 16px !important;
    min-height: auto !important;
    line-height: 1.2 !important;
    font-size: 15px;
}
/* ============================================================
   Softintro layout tightening
   ============================================================ */

.softintro {
    padding-bottom: 20px;
}

.softintro .softintro-text {
    margin-bottom: 14px;
}

.softintro .album-header-actions {
    margin-top: 0;
}
/* ============================================================
   ALBUM EDITOR — HELP BLOCK (Standalone)
   ============================================================ */

body.album-editor-page .album-editor-help {
  max-width: 1400px;
  margin: 0 auto 20px;
  padding: 18px 22px;

  background: #4f6a5c;              
  color: #efe8d4;                      /* cream text */
border: 2px dashed rgba(234,227,209,0.35);

  border-radius: 14px;
}

body.album-editor-page .album-editor-help-content {
  font-size: 13.5px;
  line-height: 1.55;
}

body.album-editor-page .album-editor-help-content h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: #efe8d4;
}

body.album-editor-page .album-editor-help-content p {
  margin: 0 0 12px;
  color: #efe8d4; /* optional, but explicit */
}

/* Hide help when disabled */
body.album-editor-page.help-disabled .album-editor-help-content {
  display: none;
}


body.album-editor-page button.album-editor-help-toggle {
  margin-bottom: 12px;
  cursor: pointer;
}
* === photo repeater == */

/* ======================================================
   Album Editor — Intro Photo Repeater → Grid layout
====================================================== */

.album-editor-page
.acf-field[data-name="car_layout_anchor"]
.acf-repeater.-table
tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
}

/* Kill table behaviour */
.album-editor-page
.acf-field[data-name="car_layout_anchor"]
.acf-repeater.-table
table,
.album-editor-page
.acf-field[data-name="car_layout_anchor"]
.acf-repeater.-table
tbody,
.album-editor-page
.acf-field[data-name="car_layout_anchor"]
.acf-repeater.-table
tr {
  width: 100%;
  border: 0;
}

/* STEP 2 — Treat each intro photo row as a card */
.acf-field[data-name="car_layout_anchor"] tr.acf-row {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
/* =========================================================
   Album Intro Photos — Step 1: horizontal flow
   ========================================================= */

body.album-editor-page 
.acf-field[data-name="car_layout_anchor"] .acf-table,
body.album-editor-page 
.acf-field[data-name="car_layout_anchor"] .acf-table tbody {
    display: block;
}

body.album-editor-page 
.acf-field[data-name="car_layout_anchor"] .acf-row {
    display: inline-block;
    vertical-align: top;
    margin: 0 12px 12px 0;
}
/* =========================================================
   Album Intro Photos — Step 2: disable table layout
   ========================================================= */

body.album-editor-page 
.acf-field[data-name="car_layout_anchor"] .acf-repeater.-table,
body.album-editor-page 
.acf-field[data-name="car_layout_anchor"] table.acf-table,
body.album-editor-page 
.acf-field[data-name="car_layout_anchor"] tbody,
body.album-editor-page 
.acf-field[data-name="car_layout_anchor"] tr,
body.album-editor-page 
.acf-field[data-name="car_layout_anchor"] td {
    display: block;
}
/* =========================================================
   Album Editor — Album Photos section (visual only)
   ========================================================= */

body.album-editor-page
.acf-field[data-name="car_layout_anchor"] {
    background: #f6f2e9;            /* soft cream paper */
    border-radius: 16px;
    padding: 18px 20px 20px;
    margin: 24px 0;
}

/* Remove ACF table chrome */
body.album-editor-page
.acf-field[data-name="car_layout_anchor"]
.acf-repeater.-table > table {
    border: 0;
    background: transparent;
}

/* Space rows evenly */
body.album-editor-page
.acf-field[data-name="car_layout_anchor"]
.acf-row {
    border: 0;
}

/* Make image cards breathe */
body.album-editor-page
.acf-field[data-name="car_layout_anchor"]
.acf-image-uploader {
    background: #efe7d6;
    border-radius: 12px;
    padding: 6px;
}

/* ===============================
   Album Editor – Hero Grid
================================ */

.album-editor-hero-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 24px;
  margin-bottom: 24px;
}

/* Hero photo */
.album-editor-hero-grid
.acf-field[data-name="album_hero_photo"] {
  grid-column: 1;
}

/* All hero meta fields */
.album-editor-hero-grid
.acf-field:not([data-name="album_hero_photo"]) {
  grid-column: 2;
}

/* Mobile collapse */
@media (max-width: 768px) {
  .album-editor-hero-grid {
    grid-template-columns: 1fr;
  }

  .album-editor-hero-grid
  .acf-field {
    grid-column: 1;
  }
}
/* ======================================================
   Album Editor — Fix photo card sizing (no placeholder logic)
====================================================== */

/* Make the CARD the sizing element, not image-wrap */
body.album-editor-page
.acf-field[data-name="car_layout_anchor"]
.acf-image-uploader {
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

/* Keep image-wrap purely as media */
body.album-editor-page
.acf-field[data-name="car_layout_anchor"]
.acf-image-uploader .image-wrap {
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(26,59,46,0.05);
}
/* 1. Kill table layout completely */ body.album-editor-page .acf-field[data-name="car_layout_anchor"] .acf-repeater.-table, body.album-editor-page .acf-field[data-name="car_layout_anchor"] .acf-repeater.-table table, body.album-editor-page .acf-field[data-name="car_layout_anchor"] .acf-repeater.-table tbody, body.album-editor-page .acf-field[data-name="car_layout_anchor"] .acf-repeater.-table tr, body.album-editor-page .acf-field[data-name="car_layout_anchor"] .acf-repeater.-table td { display: block; border: 0; background: transparent; } 
/* 2. THIS is the grid container */ body.album-editor-page .acf-field[data-name="car_layout_anchor"] .acf-repeater.-table > table > tbody { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; width: 100%; } 

/* Hide Album Intro Photos label only */
.acf-field[data-name="_photo_repeater"] > .acf-label {
    display: none;
}
/* Remove top spacing caused by missing label */
.acf-field[data-name="car_intro_photo"] {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.album-editor-page .acf-field[data-name="car_layout_anchor"]
.acf-th {
  width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body.album-editor-page .acf-field[data-name="car_layout_anchor"]
.acf-row-handle {
  width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Safety: never show ACF clone rows */
body.album-editor-page
.acf-field[data-name="car_layout_anchor"]
tr.acf-clone {
    display: none !important;
}
/* ======================================================
   Album Editor — Remove ACF default frame on photo cards
====================================================== */

body.album-editor-page .acf-field[data-name="car_layout_anchor"] .acf-repeater.-table, body.album-editor-page .acf-field[data-name="car_layout_anchor"] .acf-repeater.-table table, body.album-editor-page .acf-field[data-name="car_layout_anchor"] .acf-repeater.-table tbody, body.album-editor-page .acf-field[data-name="car_layout_anchor"] .acf-repeater.-table tr, body.album-editor-page .acf-field[data-name="car_layout_anchor"] .acf-repeater.-table td {
    border: none !important;
    box-shadow: none !important;
}
/* ======================================================
   Album Editor — Narrow paper to enable carousel overflow
====================================================== */

body.album-editor-page .album-editor-help {
    max-width: 1200px;   /* adjust if needed */
    margin-left: auto;
    margin-right: auto;
}

body.album-editor-page
.softform-frame {
    max-width: 1200px;   /* adjust if needed */
    margin-left: auto;
    margin-right: auto;
}

.softpaper:not(.softpaper-35):not(.softpaper-65):not(.intro):not(.navbar) {
        max-width: 1200px;   /* adjust if needed */
    margin-left: auto;
    margin-right: auto;
}

.softpaper:not(.softpaper-35):not(.softpaper-65):not(.intro):not(.navbar) {
            max-width: 1200px;   /* adjust if needed */
    margin-left: auto;
    margin-right: auto;
}


body.album-editor-page .story-carousel {
                max-width: 1200px;   /* adjust if needed */
    margin-left: auto;
    margin-right: auto;
}

body.album-editor-page .story-card-inner {
                    max-width: 1200px;   /* adjust if needed */
    margin-left: auto;
    margin-right: auto;
}

/* Hide native ACF Add Row buttons for STORY repeaters only */
.album-editor-page
.acf-field-repeater[data-name^="car_"]
> .acf-input
> .acf-repeater
> .acf-actions {
  display: none !important;
}
/* Admin-only delete cue */
.admin-delete {
    opacity: 0.5;
}

.admin-delete:hover {
    opacity: 1;
    color: #a00;
}


/* ============================================================
   FORCE ACF (-) REMOVE BUTTON TO BE ALWAYS VISIBLE (DEBUG)
   Album Editor only
   ============================================================ */


.acf-row
a[data-event="remove-row"] {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
}


/* -------------------------------------------------
   Album Editor — Constrain story card width
-------------------------------------------------- */

body.album-editor-page
.acf-input {

  max-width: 1200px !important;
  padding-bottom: 16px;
  margin-left: auto;
  margin-right: auto;

  /* Prevent ACF table from forcing full width */
  display: block;

}
body.album-editor-page .acf-field[data-type="repeater"] > .acf-input {
    padding: 1px !important;
}

.story-card-nav {
    display: flex;
    flex-direction: column;
}
.story-card-nav-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.story-card-nav-count {
    margin-top: auto;      /* 🔑 this now works */
}
.story-card-nav-count {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.8;
    padding-top: 6px;
}
.story-card-nav-count {
    color: rgba(0,0,0,0.6);
}

.story-card-nav.is-active .story-card-nav-count {
    color: rgba(255,255,255,0.85);
}


.story-card-nav-count {
    display: inline-block;
/*    align-self: flex-start;*/

    background: rgba(0,0,0,0.05);
    border-radius: 999px;
    padding: 4px 10px;
}

.story-carousel-track {
  scroll-snap-type: none !important;
}

/* Hide native ACF Add Row button visually, but keep it functional */
.acf-field[data-name$="_photo_repeater"] .acf-repeater-add-row {
  opacity: 0;
  height: 0;
  pointer-events: none;
}
/* FIX: prevent Story Title input from collapsing in flex layouts */
body.album-editor-page
.story-editor-right
.acf-field[data-name$="_title"]
.acf-input-wrap {
    min-width: 440px;
    flex: 0 0 440px;
}
/* Neutralise car_description without removing it from layout logic */
.album-editor-page .acf-field[data-name="car_description"] {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
}

/* Kill inner wrappers */
.album-editor-page
.acf-field[data-name="car_description"] .acf-input,
.album-editor-page
.acf-field[data-name="car_description"] .acf-input-wrap,
.album-editor-page
.acf-field[data-name="car_description"] textarea,
.album-editor-page
.acf-field[data-name="car_description"] input {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  resize: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ------------------------------------------------------------
   R19 — Hide repeater labels when repeater is hidden
   ------------------------------------------------------------ */

body.album-editor-page
.acf-field-repeater[style*="display: none"]
> .acf-label {
    display: none !important;
}
/* Kill layout space from hidden ACF repeater shells */
.album-editor-page
.acf-field[data-type="repeater"][style*="display: none"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

body.album-editor-page
.acf-field-repeater:not(:has(.story-card))
> .acf-label {
    display: none !important;
}
body.album-editor-page .acf-field[data-type="repeater"] > .acf-input {
    padding: 12px !important;
}
/* Collapse residual acf-input spacing for hidden repeaters */
.album-editor-page
.acf-field[data-type="repeater"][style*="display: none"]
.acf-input {
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
/* ------------------------------------------------------------
   ACF-style injected About validation errors
------------------------------------------------------------ */

.softtops-about-error {
    margin-top: 8px;
}

.acf-field.acf-error > .acf-label label {
    color: #dc3232;
}

.album-editor-page
.acf-field .acf-notice.-error {
    padding: 0 !important;
    margin: 0 !important;
}