/* ==========================================================================
   styles_details.css
   NEW 8 September 2026. Phase 3 of MLS-Revitalisation-Plan.md, rollout step 2.

   For details_new.php ONLY, every business listing page on the site. Opted in
   with body class="mls-modern mls-details", so styles_modern.css must load
   first for the palette, the header and the shared sidebar cards.

   Same treatment as search.php, deliberately: SR's brief was "similar look to
   the search results". Two column grid, results-style cards, one quiet sidebar,
   and the sidebar cards themselves come from styles_modern.css so the two pages
   cannot drift apart.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE PAGE FRAME
   styles_modern.css strips .main_page in its neutraliser, so it is rebuilt here
   as the grid. GRID AREAS, not source order: on this page column-right comes
   BEFORE column-center in the markup and that is left alone, because moving a
   div in a 2,300 line file to save a CSS line is a bad trade. Grid places by
   area regardless.
   -------------------------------------------------------------------------- */
body.mls-modern.mls-details .main_page{
  max-width:1180px;margin:0 auto;padding:16px 20px 44px;background:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  grid-template-areas:"crumbs crumbs" "main side";
  column-gap:34px;
  align-items:start}
body.mls-modern.mls-details .breadcrumbs{grid-area:crumbs}
body.mls-modern.mls-details .column-center{
  grid-area:main;width:auto;max-width:none;min-width:0;display:block;float:none;margin:0}
body.mls-modern.mls-details .column-right{
  grid-area:side;width:auto;min-width:0;display:block;float:none;margin:0;
  position:sticky;top:16px}
body.mls-modern.mls-details .menu_left{display:none}

@media(max-width:980px){
  body.mls-modern.mls-details .main_page{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"crumbs" "main" "side";
    row-gap:8px}
  body.mls-modern.mls-details .column-right{position:static;margin-top:14px}
}

/* --------------------------------------------------------------------------
   2. TYPE
   -------------------------------------------------------------------------- */
body.mls-modern.mls-details h1{
  font-size:34px;line-height:1.15;font-weight:700;color:var(--m-ink);
  letter-spacing:-.5px;margin:0 0 10px}
@media(max-width:900px){body.mls-modern.mls-details h1{font-size:27px}}
body.mls-modern.mls-details h2{
  font-size:21px;font-weight:700;color:var(--m-ink);margin:30px 0 12px;letter-spacing:-.2px}
body.mls-modern.mls-details h3{font-size:17px;font-weight:700;color:var(--m-ink);margin:22px 0 8px}
body.mls-modern.mls-details .column-center{font-size:16px;line-height:1.6;color:var(--m-ink)}
body.mls-modern.mls-details .breadcrumbs{font-size:13px;color:var(--m-muted);margin:0 0 12px}
body.mls-modern.mls-details .breadcrumblink{display:inline}
body.mls-modern.mls-details .breadcrumbs a{color:var(--m-muted);text-decoration:none}
body.mls-modern.mls-details .breadcrumbs a:hover{color:var(--m-green);text-decoration:underline}
/* :where() to LOWER the weight, same reason as the other two pages: a 0,3,1
   rule here would outrank every component that styles its own links, which is
   exactly how the green-on-green button happened on checkout1. */
:where(body.mls-modern.mls-details) .column-center a{color:var(--m-green)}

/* --------------------------------------------------------------------------
   3. THE DETAIL PANELS
   The legacy page draws its address block and its review rows with a 2px
   #D5D5D5 border and a 5px radius, the old card treatment. Brought onto the
   result-card treatment so a listing page and a results page look like the same
   website.
   -------------------------------------------------------------------------- */
body.mls-modern.mls-details .details_box,
body.mls-modern.mls-details .business_details,
body.mls-modern.mls-details .review_box,
body.mls-modern.mls-details .review,
body.mls-modern.mls-details .details_panel{
  background:#fff;border:1px solid var(--m-line) !important;border-radius:12px !important;
  box-shadow:0 1px 2px rgba(16,32,24,.05);padding:16px 18px !important;margin:0 0 16px}
body.mls-modern.mls-details .opening_hours td,
body.mls-modern.mls-details .opening_times td{padding:3px 18px 3px 0;font-size:15px;color:var(--m-muted)}

/* --------------------------------------------------------------------------
   4. THE RECENT REVIEWS PANEL in the sidebar, drawn by recent_reviews.php.
   That include is not on the drive, so these selectors are written against the
   class names the live page uses and nothing is assumed about its markup
   beyond them. Anything it renders that is not matched here simply keeps its
   legacy look rather than breaking.
   -------------------------------------------------------------------------- */
body.mls-modern.mls-details .column-right .recentReviews,
body.mls-modern.mls-details .column-right .recent_reviews{
  background:#fff;border:1px solid var(--m-line);border-radius:12px;
  box-shadow:0 1px 2px rgba(16,32,24,.05);padding:16px 18px;margin:0 0 16px}
body.mls-modern.mls-details .recentReviewsHeader,
body.mls-modern.mls-details .recent_reviews_header{
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--m-muted);margin:0 0 12px;padding-bottom:10px;
  border-bottom:1px solid var(--m-line)}
body.mls-modern.mls-details .column-right{font-size:15px;line-height:1.5}
/* :where() AGAIN, and this one was caught by rendering the mockup rather than by
   reading the file. Written plainly as `.mls-details .column-right a` it scores
   0,3,1 and loads after styles_modern.css, so it beat
   `body.mls-modern .side_action_primary` at 0,2,0 and painted the "Review this
   business" button's text green ON the green button. Invisible. That is the
   third time this exact fault has appeared in this rollout, after the checkout1
   Total cost button and the search page links: a broad descendant link colour
   will always outrank a component that styles its own, unless its weight is
   lowered on purpose. */
:where(body.mls-modern.mls-details) .column-right a{color:var(--m-green);text-decoration:none}
:where(body.mls-modern.mls-details) .column-right a:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   5. THE ACTION ROW, used by mockup B only.
   Four buttons in a row directly under the H1 rather than in the sidebar. Kept
   in this file whichever mockup SR picks, because it costs nothing and it is
   the natural mobile layout for the sidebar card either way.
   -------------------------------------------------------------------------- */
body.mls-modern.mls-details .detail_actions{
  display:flex;flex-wrap:wrap;gap:9px;margin:0 0 22px}
body.mls-modern.mls-details .detail_actions .side_action{margin:0;padding:10px 18px;flex:0 0 auto}

/* --------------------------------------------------------------------------
   6. THE SHARE BAR, 8 September 2026.
   Replaces the third party ShareThis script that header-details.php loaded on
   every listing page. Same design as the Trusted Trader sites, which SR asked
   for because the solid brand colours give the page some warmth: rebuilt from
   their live markup rather than ported, because the TT include is not on the
   Synology drive. It carries no TT branding, and could not: it is four share
   URLs and a button.

   Solid brand colours here and NOWHERE ELSE on the site. That is deliberate and
   is the exception that proves the palette rule: a Facebook button that is not
   Facebook blue reads as a link rather than a share button, and these five are
   the only place the site borrows somebody else's colour.
   -------------------------------------------------------------------------- */
body.mls-modern.mls-details .mls-share{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 20px}
body.mls-modern.mls-details .mls-share-btn{
  display:inline-block;font-family:inherit;font-size:13.5px;font-weight:700;line-height:1;
  padding:9px 14px;border-radius:8px;border:0;color:#fff;text-decoration:none;
  cursor:pointer;white-space:nowrap;transition:filter .15s ease}
body.mls-modern.mls-details .mls-share-btn:hover{filter:brightness(1.12);color:#fff}
body.mls-modern.mls-details .mls-share-btn:focus-visible{outline:2px solid var(--m-yellow);outline-offset:2px}
body.mls-modern.mls-details .s-native{background:#2f6fb5}
body.mls-modern.mls-details .s-fb{background:#1877f2}
body.mls-modern.mls-details .s-x{background:#111}
body.mls-modern.mls-details .s-wa{background:#1faa53}
body.mls-modern.mls-details .s-em{background:#5d6b64}
/* The share links sit inside .column-center, whose link colour would otherwise
   repaint them green on their own brand colour. Same green-on-green trap as the
   sidebar buttons, so the same answer: raise this one above the :where() rule
   rather than lowering that one, because these five are genuinely special. */
body.mls-modern.mls-details .column-center a.mls-share-btn{color:#fff}
/* A quiet last card: no heading, just the one link that is not about this
   business. */
body.mls-modern.mls-details .side_card_quiet{padding:14px 16px}
body.mls-modern.mls-details .side_card_quiet .side_action{margin:0}