/* ============================================================================
   Landing Page settings — layout tidy + full responsiveness  (R51)
   ----------------------------------------------------------------------------
   Everything is scoped to `.landing-settings-page-r195`, the wrapper of the
   Landing tab (settings.php#settings-landing, rendered by landing.php). This
   file is loaded AFTER app.css, so it wins on equal specificity, and it is
   completely inert on every other page/tab.
   Goal: organise the sections, unify the buttons, and make the whole tab work
   on large monitors, small laptops, tablets and phones.
   ============================================================================ */

/* Local rhythm values (kept as variables so a phone can shrink them at once) */
.landing-settings-page-r195{ --ls-gap:16px; --ls-pad:16px; }

/* ---- 0. Never allow horizontal overflow inside the panel ------------------ */
.landing-settings-page-r195,
.landing-settings-page-r195 *{ min-width:0; }
.landing-settings-page-r195 img,
.landing-settings-page-r195 select,
.landing-settings-page-r195 .input,
.landing-settings-page-r195 textarea{ max-width:100%; }

/* On very large monitors, keep the form readable instead of stretching edge-to-edge */
@media (min-width:1400px){
  .landing-settings-page-r195 .settings-website-form{ max-width:1240px; margin-inline:auto; }
}

/* ---- 1. Even vertical rhythm between the major blocks --------------------- */
.landing-settings-page-r195 .landing-main-pair-r1424,
.landing-settings-page-r195 #landing-cta,
.landing-settings-page-r195 .landing-media-pair-r1424,
.landing-settings-page-r195 .landing-pages-pair-r1424,
.landing-settings-page-r195 #public-navigation,
.landing-settings-page-r195 #screen-popups{ margin-bottom:var(--ls-gap)!important; }

/* ---- 2. Section headers: title left, icon right, aligned ------------------ */
.landing-settings-page-r195 .panel-head{
  display:flex!important; align-items:flex-start!important;
  justify-content:space-between!important; gap:12px!important;
}
.landing-settings-page-r195 .panel-head h2{ margin:0!important; line-height:1.25!important; }
.landing-settings-page-r195 .panel-head small{ display:block; margin-top:2px; }
.landing-settings-page-r195 .settings-section-icon{ flex:none!important; }

/* ---- 3. Buttons: one consistent geometry everywhere ----------------------- */
.landing-settings-page-r195 .button{
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  gap:8px!important; min-height:38px!important; padding:0 14px!important;
  line-height:1.1!important; white-space:nowrap!important; text-align:center!important;
}
.landing-settings-page-r195 .button.small{ min-height:32px!important; padding:0 10px!important; }
.landing-settings-page-r195 .button svg{ flex:none!important; }

/* Action rows wrap tidily with even spacing */
.landing-settings-page-r195 .page-actions,
.landing-settings-page-r195 .settings-editor-actions,
.landing-settings-page-r195 .landing-page-row-actions,
.landing-settings-page-r195 .settings-banner-actions,
.landing-settings-page-r195 .landing-banner-main-actions-r36,
.landing-settings-page-r195 .landing-banner-mobile-actions-r36{
  display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:8px!important;
}
/* Single-button <form>s (Enable / Delete) sit inline in their action row */
.landing-settings-page-r195 .settings-banner-actions form,
.landing-settings-page-r195 .landing-page-row-actions form{ margin:0!important; display:inline-flex!important; }

/* Save strip: label on the left, action on the right */
.landing-settings-page-r195 .settings-inline-actions{
  display:flex!important; flex-wrap:wrap!important; align-items:center!important;
  justify-content:space-between!important; gap:12px!important;
}

/* ---- 4. Cards & media grids ---------------------------------------------- */
.landing-settings-page-r195 .settings-banner-grid{
  display:grid!important; gap:12px!important;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;
}
.landing-settings-page-r195 .settings-banner-card{
  display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:10px!important;
}
.landing-settings-page-r195 .settings-banner-copy{ flex:1 1 160px!important; }
.landing-settings-page-r195 .settings-banner-copy small{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Feature cards: auto-fitting responsive grid */
.landing-settings-page-r195 .landing-feature-editor-grid-r233{
  display:grid!important; gap:12px!important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;
}

/* Public-navigation link rows: fields flow and wrap instead of overflowing */
.landing-settings-page-r195 .landing-header-link-row-r233{
  display:flex!important; flex-wrap:wrap!important; gap:10px!important; align-items:flex-end!important;
}
.landing-settings-page-r195 .landing-header-link-row-r233 .field{ flex:1 1 180px!important; }

/* Code / HTML editors: full width, comfortable, no overflow */
.landing-settings-page-r195 textarea.input,
.landing-settings-page-r195 .settings-code-area,
.landing-settings-page-r195 .landing-custom-html-code-r205{
  width:100%!important; resize:vertical!important; overflow:auto!important;
}
.landing-settings-page-r195 .landing-custom-html-preview-canvas-r205{ overflow:auto!important; }

/* Editor sub-nav: scroll sideways rather than wrap/overflow on narrow screens */
.landing-settings-page-r195 .landing-editor-nav-r681{
  display:flex!important; gap:6px!important; overflow-x:auto!important;
  flex-wrap:nowrap!important; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.landing-settings-page-r195 .landing-editor-nav-r681 a{ flex:0 0 auto!important; white-space:nowrap!important; }

/* ======================= Responsive breakpoints ========================== */

/* Small laptop / tablet: collapse the two-column pairs to one column */
@media (max-width:1024px){
  .landing-settings-page-r195 .settings-layout.gv-equal-pair,
  .landing-settings-page-r195 .landing-main-pair-r1424,
  .landing-settings-page-r195 .landing-media-pair-r1424,
  .landing-settings-page-r195 .landing-pages-pair-r1424{
    display:grid!important; grid-template-columns:1fr!important; gap:var(--ls-gap)!important;
  }
  /* release any script-forced equal heights once the panels stack */
  .landing-settings-page-r195 [data-gv-equal-panel]{ height:auto!important; min-height:0!important; }
}

/* Phone / small tablet: single column, 12-col spans go full width */
@media (max-width:768px){
  .landing-settings-page-r195 .panel-body{ padding:14px!important; }
  .landing-settings-page-r195 [class*="settings-span-"]{ grid-column:1 / -1!important; }
  .landing-settings-page-r195 .landing-feature-editor-grid-r233{ grid-template-columns:1fr!important; }
  .landing-settings-page-r195 .landing-header-link-row-r233 .field{ flex:1 1 100%!important; }
  .landing-settings-page-r195 .settings-inline-actions{ align-items:stretch!important; }
  .landing-settings-page-r195 .settings-inline-actions .button{ width:100%!important; }
}

/* Small phones: full-width action buttons, larger tap targets, tighter rhythm */
@media (max-width:480px){
  .landing-settings-page-r195{ --ls-gap:12px; }
  .landing-settings-page-r195 .panel-head{ flex-wrap:wrap!important; }
  .landing-settings-page-r195 .page-actions .button,
  .landing-settings-page-r195 .settings-editor-actions .button{ flex:1 1 100%!important; }
  .landing-settings-page-r195 .button{ min-height:44px!important; }
  .landing-settings-page-r195 .button.small{ min-height:40px!important; }
  .landing-settings-page-r195 textarea.input{ min-height:160px!important; }
}

/* ============================================================================
   R54 additions
   ============================================================================ */

/* Public Pages: stack the list and (when editing) the editor full-width,
   so the section reads cleanly top-to-bottom instead of a half-empty pair. */
.landing-settings-page-r195 .landing-pages-pair-r1424{ display:block!important; }
.landing-settings-page-r195 .website-page-editor{ margin-top:var(--ls-gap)!important; }

/* Floating "save" dock — appears when the Landing settings form has unsaved
   edits. The JS renders it on <body>, so these rules are intentionally NOT
   scoped to the panel. It reuses the app's own .button style for the action. */
.ls-save-dock{
  position:fixed; z-index:90; left:50%; bottom:20px;
  transform:translate(-50%,160%); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:12px;
  padding:8px 8px 8px 18px; border-radius:999px;
  background:var(--surface,#fff); color:var(--ink,#111);
  border:1px solid var(--line,#e5e7eb);
  box-shadow:0 12px 34px rgba(0,0,0,.18);
  transition:transform .22s ease, opacity .22s ease;
  max-width:calc(100vw - 24px);
}
.ls-save-dock.is-visible{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.ls-save-dock .ls-save-dock-note{ font-weight:700; font-size:13px; white-space:nowrap; }
.ls-save-dock .button{ margin:0!important; }
@media (max-width:600px){
  .ls-save-dock{ left:12px; right:12px; bottom:12px; transform:translateY(160%);
                 border-radius:14px; justify-content:space-between; }
  .ls-save-dock.is-visible{ transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){ .ls-save-dock{ transition:opacity .15s ease; } }

/* ============================================================================
   R58 — delete control on each Server Media Library tile (global; the media
   dialog is shared by branding, banners and HTML pages, so NOT panel-scoped).
   ============================================================================ */
.media-library-item-r25{ position:relative!important; }
.media-library-del-r57{
  position:absolute; top:6px; right:6px; z-index:3;
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#dc2626; color:#fff; font-size:17px; line-height:1; font-weight:700;
  border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.28);
  cursor:pointer; opacity:0; transition:opacity .15s ease;
}
.media-library-item-r25:hover .media-library-del-r57,
.media-library-del-r57:focus-visible{ opacity:1; }
.media-library-del-r57:hover{ background:#b91c1c; }
@media (hover:none){ .media-library-del-r57{ opacity:1; } }