/* Job detail page: compact "Job Detail" box + equal Company Overview card (resources/views/job/detail.blade.php).
   Icon sits beside a small label + value (desktop/tablet) or on a single
   "icon LABEL: value" line (phones) - well under half the old height.
   Scoped to the --compact modifiers so nothing else using .jbdetail changes. */
.jobdetail.jobdetail--compact{padding: 22px 26px;}
.jobdetail.jobdetail--compact h3{margin-bottom: 6px;}

.jbdetail.jbdetail--compact{margin-top: 0; margin-bottom: 0;}
.jbdetail.jbdetail--compact > li{margin-top: 0; padding-top: 7px; padding-bottom: 7px; border-bottom: 1px dashed #edf0f5;}
.jbdetail.jbdetail--compact .jbitlist{flex-direction: row; align-items: center; gap: 8px; padding: 0;}
.jbdetail.jbdetail--compact li span.material-symbols-outlined{display: inline-block; flex: 0 0 auto; margin: 0; font-size: 20px; line-height: 1;}
.jbdetail.jbdetail--compact .jbitdata{display: flex; flex-direction: column; min-width: 0;}
.jbdetail.jbdetail--compact .jbitdata strong{display: block; margin: 0 0 1px; font-size: 11px; line-height: 1.3; letter-spacing: 0.3px;}
.jbdetail.jbdetail--compact .jbitdata span{display: block; margin: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere;}

/* Desktop: 3 columns = 3 rows; the last row needs no divider. */
@media (min-width: 992px){
    .jbdetail.jbdetail--compact > li:nth-last-child(-n+3){border-bottom: 0;}
}

/* Phones: one detail per line, label and value side by side. */
@media (max-width: 575px){
    .jobdetail.jobdetail--compact{padding: 16px 16px;}
    .jbdetail.jbdetail--compact > li{flex: 0 0 100%; max-width: 100%; padding-top: 6px; padding-bottom: 6px;}
    .jbdetail.jbdetail--compact > li:last-child{border-bottom: 0;}
    .jbdetail.jbdetail--compact .jbitdata{flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 5px;}
    .jbdetail.jbdetail--compact .jbitdata strong{display: inline; margin: 0; white-space: nowrap;}
    .jbdetail.jbdetail--compact .jbitdata span{display: inline;}
}

/* ---- Job Detail + Company Overview: two equal cards side by side ----
   (.job-overview-row in job/detail.blade.php). Both columns stretch to the
   taller card; the action buttons stay pinned to the bottom of the left card. */
.job-overview-row > [class*="col-"]{display: flex; flex-direction: column; margin-bottom: 30px;}
.job-overview-row > [class*="col-"] > .job-header,
.job-overview-row > [class*="col-"] > .companyinfo{flex: 1 1 auto; margin-bottom: 0;}
.job-overview-row .job-header{display: flex; flex-direction: column; overflow: hidden;}
.job-overview-row .job-header .jobmainreq{flex: 1 1 auto;}
.job-overview-row .job-header .jobButtons{margin-top: auto;}

/* Company card styled like the Job Detail card next to it. */
.job-overview-row .companyinfo{background: #fff; border: 1px solid #eee; padding: 22px 26px;}
.job-overview-row .companyinfo h3{font-size: 18px; font-weight: 700; margin-bottom: 14px;}
.job-overview-row .companyinfo hr{margin: 14px 0;}
.job-overview-row .companyinfo .companyoverview p{margin-bottom: 0; color: #555; line-height: 1.6;}

@media (max-width: 991px){
    /* Stacked on tablets/phones: normal spacing between the two cards. */
    .job-overview-row > [class*="col-"]{margin-bottom: 20px;}
}
@media (max-width: 575px){
    .job-overview-row .companyinfo{padding: 16px;}
}