/* ============================================================
   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 */
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: minmax(0, 15%) minmax(0, 13%) minmax(0, 13%) minmax(0,30%) minmax(0, 30%);
  grid-template-areas:
    "photo      photo       photo       title   title"
    "photo      photo       photo       spec1   spec2"
    "photo      photo       photo       spec3   spec2"
    "photo      photo       photo       spec4   colour"
    "ownership  owned_since owned_until location   interior"
    "intro      intro       intro       intro   intro";
  column-gap: 24px;
  row-gap: 6px;
  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_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;
}
/* ============================================================
   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;
}

/* 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: 8px !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: 200px;
    height:110px;
    padding-top; 2px;
    min-width: 200px;

    scroll-snap-align: start;
}
.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 {
    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                                                 */
/* ================================================================= */
body.album-editor-page 
.story-editor-right 
.acf-field-repeater[data-name$="_photo_repeater"] td.acf-fields.-left > * {
    position: relative;
    z-index: 2;
}
/*   TUNED PHOTO FRAME HEIGHT (approx 4:3 ratio) */
body.album-editor-page 
.acf-field-repeater[data-name$="_photo_repeater"] 
.acf-field-image .acf-image-uploader {
    width: 100%;
    aspect-ratio: 4 / 3;
    position: relative;
}

body.album-editor-page 
.acf-field-repeater[data-name$="_photo_repeater"] 
.acf-image-uploader .image-wrap,
body.album-editor-page 
.acf-field-repeater[data-name$="_photo_repeater"] 
.acf-image-uploader img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
}

/* Remove extra padding in card interior */
body.album-editor-page 
.acf-field-repeater[data-name$="_photo_repeater"] 
.acf-field-group > .acf-input {
    padding: 0 !important;
}
/* 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;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

/* ================================================================= */
/* 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 */
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;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-55%, -60%) !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: rgba(26,59,46,0.85) !important;
    /* Softpaper placeholder texture */
    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;
    font-size: 20px !important;
    color: var(--soft-green) !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
    
        cursor: pointer !important;
}


/* ================================================================= */
/* PHOTO - ACFe    end                                               */
/* ================================================================= */

/* ============================================================
   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;
}