/* =============================================================================
   AA legacy (/app) search storefront - CARD + CTA FIT ONE SCREEN
   Tony 2026-09-10: "on both the calls to action are cut off on the bottom ...
   fix this so that the entire card and the cta show on one phone screen and
   one desktop screen without scrolling."

   TWO ROOT CAUSES, both measured on the live page:

   (1) MOBILE - the CTA was not just cut off, it was UNREACHABLE.
       .card.profile_card is position:absolute with a FIXED height and
       overflow:hidden (profile_view.css), while .footer_sticky_button is
       position:static (base.css @max-769) - i.e. the last item in normal
       flow. Card 4090 at a 560px-tall viewport: content 651px in a 506px
       box, CTA at y=654..704 => 144px past the edge, clipped away with no
       way to scroll to it.
       Compounding it: the height used calc(100vh - 54px). On phones vh is
       the LARGE viewport (browser toolbars retracted), so in a browser that
       keeps its bottom toolbar the card is laid out taller than what is
       actually visible and the bottom row lands underneath the toolbar.
       => svh (small viewport) is the correct unit for a pinned bottom row.

   (2) DESKTOP - .card.profile_card is height:calc(100vh - 80px), sized as if
       it started 80px down, but the SEARCH WORK hero pushes it to y=346.
       The card therefore overhangs the viewport by ~266px (the page scrolls),
       and .footer_sticky_button is position:fixed bottom:10px, so the CTA
       floats ON TOP of the card content (measured: over .pay_rates).

   THE FIX: the card is a flex column - banner | body | CTA. The CTA is a
   pinned row of the card, never fixed and never clipped. Height is derived
   from the real viewport, and the hero is compacted so the whole card fits
   above the fold.

   Scope: the search storefront card only (.search_contractor), which is the
   work search AND the professionals search - same component, same defect.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   A. THE CARD IS A FLEX COLUMN
   Only the VISIBLE card is switched to flex - .profile_card defaults to
   display:none on desktop and the stack uses .below on mobile, so a blanket
   display:flex would reveal all 20 cards at once.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .search_contractor .profile_view .card.profile_card.active {
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  .search_contractor .profile_view .card.profile_card {
    display: flex;
    flex-direction: column;
  }
  .search_contractor .profile_view .card.profile_card.below {
    display: none;
  }
}

.search_contractor .profile_view .card.profile_card > .card_banner {
  flex: 0 0 auto;
}
.search_contractor .profile_view .card.profile_card > .profile_body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* .profile_details keeps its negative overlap onto the banner, so it must NOT
   sit inside the scroll box or the overlap gets clipped. Only .card-body
   scrolls. */
.search_contractor .profile_view .card.profile_card > .profile_body > .profile_details {
  flex: 0 0 auto;
}
.search_contractor .profile_view .card.profile_card > .profile_body > .card-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* -----------------------------------------------------------------------------
   B. THE CTA IS A PINNED ROW OF THE CARD - never fixed, never clipped
   -------------------------------------------------------------------------- */
.search_contractor .profile_view .card.profile_card > .footer_sticky_button {
  position: static;
  transform: none;
  left: auto;
  right: auto;
  bottom: auto;
  min-width: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  background: #fff;
  border-top: 1px solid #e6e6e6;
  z-index: 1;
}
.search_contractor .profile_view .card.profile_card > .footer_sticky_button a {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  height: 44px;
  font-size: 13px;
  line-height: 1.15;
  text-align: center;
}
.search_contractor .profile_view .card.profile_card > .footer_sticky_button a + a {
  margin-left: 8px;
}

/* -----------------------------------------------------------------------------
   C. HEIGHT FROM THE REAL VIEWPORT
   vh first as the fallback for old engines, then svh/dvh which win where
   supported. On mobile svh = toolbars SHOWN, which is what guarantees the
   pinned CTA is never underneath the browser chrome.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .search_contractor .profile_view {
    height: calc(100vh - 54px);
    height: calc(100svh - 54px);
  }
  .search_contractor .profile_view .card.profile_card.profile_card {
    height: 100%;
  }
}

/* -----------------------------------------------------------------------------
   D. DESKTOP - compact the hero, then let a flex column do the arithmetic
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  /* The hero is compacted from 270px to roughly 150px. search-page.css sets
     .search_section{min-height:270px} and min-height always beats height, so
     the min-height has to come down too. It is left to size to its own
     content rather than being pinned to a number - the flex column below
     takes whatever is left, so there is no constant to get wrong. */
  .body-area > .search_section {
    min-height: 0;
  }
  .body-area > .search_section .container {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .body-area > .search_section .heading {
    font-size: 20px;
    margin: 0 0 6px;
  }
  .body-area > .search_section .form_container {
    padding: 10px 20px;
  }

  /* One screen, no arithmetic: <main> is a full-height flex column, the hero
     takes its natural height and the results region takes the rest. This is
     what replaces .card.profile_card{height:calc(100vh - 80px)}, which was
     sized as if the card started 80px down when it actually started at 346. */
  .body-area {
    height: calc(100vh - 71px);
    height: calc(100dvh - 71px);
    display: flex;
    flex-direction: column;
  }
  .body-area > .search_section {
    flex: 0 0 auto;
  }
  .body-area > .search_contractor {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .search_contractor .search_data {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
  }
  .search_contractor .search_data .table_row {
    display: flex;
    float: none;
    width: 100%;
    min-height: 0;
    padding: 0;
  }
  /* 400px, not the 440px on the bare .left_listing rule - the more specific
     .table_row > .left_listing rule is the one that was winning, and the
     column width must not change. */
  .search_contractor .search_data .table_row > .left_listing {
    flex: 0 0 400px;
    float: none;
    min-height: 0;
  }
  .search_contractor .search_data .users_listing_details {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
  }
  .search_contractor .search_data .list_container {
    height: 100%;
  }
  .search_contractor .profile_view {
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }
  .search_contractor .profile_view .card.profile_card {
    height: 100%;
    overflow: hidden;
  }
}

/* -----------------------------------------------------------------------------
   E. DENSITY - so an Hourly Contract card needs no scrolling at all
   -------------------------------------------------------------------------- */

/* Banner: 100px tall (80 on phone) of decorative artwork behind a badge and
   two buttons.
   For Automate America's own work (is_diverse_automative = 1) header_banner.php
   paints images/Automate-America.png - the AA wordmark - at background-size:60%
   top center, applied INLINE by card_swipe.js from the datastyle attribute.
   That is the second, half-cut AUTOMATE|AMERICA logo colliding with the red
   work-type badge and the SEARCH pill in Tony's screenshot. It cannot collide
   any less: the badge owns the left of the strip and the buttons own the right.
   The company is already identified twice more inside the same card - the round
   logo directly beneath, and the Company Information row - so on the SEARCH
   card the strip becomes a flat brand gradient. Beating an inline style needs
   !important; this is scoped to the search storefront card only, so the full
   work page at automation_work/index/<id> keeps its cover art. */
.search_contractor .profile_view .card.profile_card .card_banner,
.search_contractor .profile_view .card.profile_card .card_banner.work_banner {
  min-height: 56px;
  height: 56px;
  background: linear-gradient(90deg, #1f66de 0%, #0f4bb3 100%) !important;
}
.search_contractor .profile_view .card.profile_card .card_banner .name_tag {
  top: 14px;
}
.search_contractor .profile_view .card.profile_card .card_banner .banner_btn_group {
  top: 11px;
}

/* Logo + title block */
.search_contractor .profile_view .card.profile_card .profile_details {
  margin-top: -26px;
  padding-bottom: 4px;
}
.search_contractor .profile_view .card.profile_card .profile_details .profile_image {
  width: 56px;
  height: 56px;
}
.search_contractor .profile_view .card.profile_card .profile_details h5 {
  margin: 2px 0;
}
.search_contractor .profile_view .card.profile_card .profile_details address {
  margin-bottom: 0;
}

/* Body + component spacing */
.search_contractor .profile_view .card.profile_card .card-body {
  padding: 0 15px 6px;
}
/* Vertical padding only. The HORIZONTAL 15px must stay: every component also
   carries Bootstrap's .row (margin-left/right: -15px), and this padding is
   what cancels it. Dropping it pulls the panels past the card edge and clips
   the section labels ("Pay Rates", "Skilled Trade", "Company Information"). */
.search_contractor .profile_view component {
  padding: 4px 15px;
}
.search_contractor .profile_view .card.profile_card .card-body .well {
  padding: 7px 10px;
}
.search_contractor .profile_view .card.profile_card .card-body .key_info .well {
  margin-bottom: 6px;
}
.search_contractor .profile_view .card.profile_card .card-body h5 {
  margin-bottom: 5px;
}
/* .p15 is an !important utility class in base.css, so it has to be beaten on
   its own terms - without this the Skilled Trade box keeps 15px of padding
   top and bottom for a single line of text. */
.search_contractor .profile_view .card.profile_card .card-body .well.p15 {
  padding: 8px !important;
}

/* -----------------------------------------------------------------------------
   F. PHONE DENSITY - the constrained case
   A phone in an in-app browser (persistent top + bottom toolbars) leaves as
   little as ~560px of usable height. Seven information blocks plus the CTA
   have to fit in that, so the phone layout goes tighter than the desktop one.
   Measured target: card content <= 505px at a 560px viewport, i.e. zero
   internal scrolling for an Hourly Contract card.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .search_contractor .profile_view .card.profile_card .card_banner,
  .search_contractor .profile_view .card.profile_card .card_banner.work_banner {
    height: 48px;
    min-height: 48px;
  }
  .search_contractor .profile_view .card.profile_card .card_banner .name_tag {
    top: 10px;
  }
  .search_contractor .profile_view .card.profile_card .card_banner .banner_btn_group {
    top: 8px;
  }

  .search_contractor .profile_view .card.profile_card .profile_details {
    margin-top: -22px;
    padding-bottom: 2px;
  }
  .search_contractor .profile_view .card.profile_card .profile_details .profile_image {
    width: 46px;
    height: 46px;
  }
  .search_contractor .profile_view .card.profile_card .profile_details h5 {
    margin: 1px 0;
    font-size: 13px;
  }
  .search_contractor .profile_view .card.profile_card .profile_details address {
    font-size: 11px;
  }

  /* Horizontal 15px again - see the note on the desktop rule. */
  .search_contractor .profile_view component {
    padding: 3px 15px;
  }
  .search_contractor .profile_view .card.profile_card .card-body {
    padding: 0 15px 3px;
  }
  .search_contractor .profile_view .card.profile_card .card-body .well {
    padding: 4px 8px;
  }
  .search_contractor .profile_view .card.profile_card .card-body .key_info .well {
    margin-bottom: 3px;
  }
  .search_contractor .profile_view .card.profile_card .card-body .media-left.icon_box {
    font-size: 16px;
    padding-right: 8px;
  }
  .search_contractor .profile_view .card.profile_card .card-body .media-body h6.media-heading {
    font-size: 10px;
    line-height: 1.15;
    margin-bottom: 1px;
  }
  .search_contractor .profile_view .card.profile_card .card-body .media-body span {
    font-size: 12px;
    line-height: 1.25;
  }
  .search_contractor .profile_view .card.profile_card .card-body h5 {
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 1.25;
  }
  .search_contractor .profile_view .card.profile_card .card-body h6 {
    font-size: 10px;
  }
  .search_contractor .profile_view .card.profile_card .card-body .company_info .profile_img {
    width: 32px;
    height: 32px;
  }
  .search_contractor .profile_view .card.profile_card .card-body .company_info .media-left {
    padding: 4px 8px 4px 4px;
  }
  .search_contractor .profile_view .card.profile_card .card-body .pay_rates h4 {
    font-size: 16px;
    margin-bottom: 0;
  }
  .search_contractor .profile_view .card.profile_card .card-body .pay_rates li span {
    font-size: 11px;
  }
  .search_contractor .profile_view .card.profile_card .card-body .well.p15,
  .search_contractor .profile_view .card.profile_card .card-body .media_content .well {
    padding: 5px 8px !important;
  }
  .search_contractor .profile_view .card.profile_card .card-body .statements .media-left.icon_box {
    font-size: 18px;
    padding: 4px 8px;
  }

  .search_contractor .profile_view .card.profile_card > .footer_sticky_button {
    padding: 5px 8px;
  }
  .search_contractor .profile_view .card.profile_card > .footer_sticky_button a {
    height: 38px;
    font-size: 12px;
  }

  /* Title block line-heights */
  .search_contractor .profile_view .card.profile_card .profile_details h5 {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
  }
  .search_contractor .profile_view .card.profile_card .profile_details address {
    margin: 0;
    font-size: 11px;
    line-height: 1.25;
  }

  /* Skilled Trade / Programming Skills and Company Information both wrap a
     single value in a bordered box inside a bordered box. Collapse the inner
     list spacing rather than the type. */
  .search_contractor .profile_view .card.profile_card .card-body .media_content ul.boxRow,
  .search_contractor .profile_view .card.profile_card .card-body .company_info ul {
    margin: 0;
  }
  .search_contractor .profile_view .card.profile_card .card-body .media_content ul.boxRow > li {
    padding: 0;
  }
  .search_contractor .profile_view .card.profile_card .card-body .media_content .media-body .well {
    padding: 4px 8px;
  }
  .search_contractor .profile_view .card.profile_card .card-body .media_content .media-left.p10 {
    padding: 6px;
  }

  /* Travel Expenses Reimbursed */
  .search_contractor .profile_view .card.profile_card .card-body .statements .media-body {
    padding: 2px 0;
  }

  /* Company Information: the box height is driven by the logo, not the text */
  .search_contractor .profile_view .card.profile_card .card-body .company_info .profile_img {
    width: 26px;
    height: 26px;
  }
  .search_contractor .profile_view .card.profile_card .card-body .company_info .media-left.p5 {
    padding: 3px 6px !important;
  }
  .search_contractor .profile_view .card.profile_card .card-body .company_info .media-body {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* Key information tiles */
  .search_contractor .profile_view .card.profile_card .card-body .key_info .well {
    padding: 3px 8px;
  }

  .search_contractor .profile_view .card.profile_card .profile_details .profile_image {
    width: 40px;
    height: 40px;
  }
}