/* Base styling for the Dualoo job list / job detail plugin.
   Loaded via AssetCollector from Resources/Private/Layouts/Default.html, i.e. *after*
   the sitepackages' TypoScript includeCSS. Rules a site theme legitimately owns (page
   width and gutters) therefore sit in :where() and carry zero specificity, so a theme
   rule wins over them regardless of load order. The component rules below keep normal
   specificity - they have to beat the browser's and Bootstrap's element defaults - and
   a sitepackage overrides one by qualifying its selector, e.g.
   `.dualoo-jobs .dualoo-jobs__item {...}`. See #256. */

/* Column width and gutters, only for themes that ship no container implementation of
   their own (peakvision & co. use Foundation's .grid-container, so the plugin's
   Bootstrap `.container` class is inert there and the list would run edge to edge).
   `div:where(.dualoo-jobs)` keeps the class inside :where() (zero specificity) so
   PFG's Bootstrap .container (0,1,0) still wins there and keeps its own max-width
   and gutters. The leading `div` brings the selector to (0,0,1) - without it,
   peakvision's own reset at main.css:1498 (`div, dl, ... { margin: 0; padding: 0; }`,
   also (0,0,1)) wins the specificity tie by simply being an unqualified type
   selector, wiping this padding out again on every viewport, not just mobile. */
div:where(.dualoo-jobs) {max-width: 1200px; padding: 0 1rem;}

.dualoo-jobs {margin: 70px auto;}

.dualoo-jobs__item {
  border-bottom: 1px solid #e6e6e6;
  padding: 30px 0;
  /* peakvision main.css `main > … ul:not(…) li` (specificity 0,5,3) sets
     padding-left: 1.5em on every list item; only !important keeps the job rows flush
     when the stylesheet is loaded from the extension. */
  padding-left: 0 !important;
}
.dualoo-jobs__item:first-child {padding-top: 0;}
.dualoo-jobs__item:last-child {border-bottom: 0;}

/* The same peakvision rule adds a `›` marker through li:before (0,5,4). Suppress it on
   the job rows so they render as the plain list PFG shows. Bullets inside
   .dualoo-jobs__body are left alone on purpose: that is editorial copy from Dualoo and
   should keep the theme's list styling. */
.dualoo-jobs .dualoo-jobs__list .dualoo-jobs__item::before {display: none !important;}

.dualoo-jobs__item-title {
  width: 100%;
  margin-bottom: 10px;
}

.dualoo-jobs__meta {display: flex; flex-wrap: wrap; gap: 6px 16px;}
/* .dualoo-jobs__meta li::before (the `›` marker) is deliberately untouched here - it
   comes from the theme's own compiled _heading.scss (peakvision main.css li:before),
   not from this file. Do not add a rule for it in this stylesheet. */
.dualoo-jobs__meta li {width: auto;}

/* The apply link keeps whatever the theme gives its own `.btn.primary`; only the link
   underline is reset, because the button already reads as a button. */
.dualoo-jobs__apply {text-decoration: none;}

.dualoo-jobs .dualoo-jobs__body h4 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

@media (max-width: 768px) {
  .dualoo-jobs {margin: 52px auto;}
  .dualoo-jobs .dualoo-jobs__body h4 {
    margin-top: 1em;
  }
}