/* =====================================================================
   Tab-shell overrides (MHD-823 / Phase 6)

   The new tab-page chrome (breadcrumb, banner, company header, top tab nav)
   lives at the page level (see article.css). The existing <company-profile-page>
   component carries its OWN chrome — left-side nav, mobile bottom nav, an
   internal header with mini-quote and share button. We mount the component
   inside #cpn-tab-mount and hide its chrome here so the page's chrome owns
   the layout. The component's tab CONTENT panels (#cpp-tab-*) render
   unchanged.
   ===================================================================== */

.cpn-tab-shell {
  /* Tab pages have no sidebar/lower tiles, so no grid — just a vertical
     stack with the tab mount filling the width. */
}

.cpn-tab-mount {
  margin-top: 0;
}

/* Hide the component's built-in header (the duplicate company name / share
   button row above its left sidebar). */
.cpn-tab-mount #cpp-header,
.cpn-tab-mount .cp-header {
  display: none;
}

/* Hide the component's left-side nav — the page's top tab strip is the
   authoritative navigation. */
.cpn-tab-mount #cpp-sidebar,
.cpn-tab-mount .cp-sidebar {
  display: none;
}

/* Hide the component's mobile bottom nav — same reason. */
.cpn-tab-mount #cpp-mobile-nav,
.cpn-tab-mount .cp-mobile-nav {
  display: none !important;
}

/* The component's layout uses grid `sidebar + content`. With the sidebar
   hidden we want content to fill the available width. */
.cpn-tab-mount .cp-layout {
  display: block;
}
.cpn-tab-mount .cp-content,
.cpn-tab-mount #cpp-content {
  padding: 0;
  min-width: 0;
}

/* Drop the duplicate page-mounted wrapper styling that pushes for full-bleed
   layout — we're already inside .cpn-article which manages the outer
   container width. */
.cpn-tab-mount .cpp-page {
  min-height: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}

/* Tab-shell context: replace the modal-style spinner overlay with a static
   skeleton block that mirrors the rough shape of the incoming tab content.
   Modal context keeps the spinner — see companyProfilePageTemplate.html. */
.cpn-tab-mount #cpp-loader {
  position: static;
  background: transparent;
  padding: 8px 0 0;
  display: block;
}
.cpn-tab-mount #cpp-loader .cp-loader__spinner { display: none; }
.cpn-tab-mount #cpp-loader .cp-loader__skeleton {
  display: block;
  width: 100%;
}

/* Modal / default context: keep the spinner, hide the skeleton. */
.cp-loader__skeleton { display: none; }

/* Skeleton blocks reuse the .cpn-skel shimmer defined in article.css. */
.cp-loader__skel-title {
  height: 26px;
  width: 220px;
  max-width: 60%;
  margin: 0 0 20px;
}
.cp-loader__skel-block {
  height: 96px;
  width: 100%;
  margin: 0 0 16px;
  border-radius: 8px;
}
.cp-loader__skel-block--short { height: 64px; }
.cp-loader__skel-block--tall  { height: 140px; }