/* ==========================================================================
   OPPORTUNITY DETAILS CARD — single post page only.
   Loaded conditionally (see inc/enqueue.php) so no other page pays
   the cost of this CSS. Uses the sitewide --aii-* vars defined in
   critical.css so colors/typography always match the brand palette.

   NOTE: file/handle kept as "opportunity-summary" for backward
   compatibility; the section itself is titled "Opportunity Details"
   (see inc/opportunity-fields.php). The schema and markup below are
   generic by design — the same card renders correctly for a
   Government Job, Apprenticeship, Internship, Private Job or Skill
   Training listing.

   The section sits inside the SAME content container the article
   itself uses (single.php's .aii-container, max-width:820px). Within
   that container the card is centered and capped at 900px so it
   reads as a native piece of the article rather than an injected,
   full-bleed block.
   ========================================================================== */

.aii-opportunity-details{
  width:100%;
  max-width:900px;
  margin:2rem auto 0;
}

/* White card: light border, soft shadow, generous internal padding —
   matches the Government-portal card language used elsewhere on the
   site (search widget, stat cards, etc.). */
.aii-opportunity-details__inner{
  width:100%;
  background:var(--aii-white);
  border:1px solid #e2e8f0;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(0,59,117,.08);
  padding:35px;
}

/* In-card header: blue icon + bold heading + bottom border, sitting
   on the white card itself (no full-bleed colored banner), matching
   the blue used for buttons and section headings sitewide. */
.aii-opportunity-details__header{
  margin:0 0 25px;
  padding-bottom:16px;
  border-bottom:2px solid #eef1f5;
}

.aii-opportunity-details__title{
  margin:0;
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--aii-dark);
  display:flex;
  align-items:center;
  gap:.65rem;
}

.aii-opportunity-details__title-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:999px;
  background:rgba(11,94,215,.1);
  color:var(--aii-primary);
}

.aii-opportunity-details__title-icon .aii-icon{
  width:18px;
  height:18px;
}

/* Government-style information TABLE: label column on the left,
   value column on the right, thin row borders, light zebra striping.
   A real <table> (see inc/opportunity-fields.php) rather than a
   stacked label/value list, so every row reads as label | value side
   by side — matching the look of a standard Government
   recruitment-portal details table. */
.aii-opportunity-details__table-wrap{
  width:100%;
  overflow-x:auto; /* safety net on very narrow / zoomed viewports */
}

.aii-opportunity-details__table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.aii-opportunity-details__row{
  border-bottom:1px solid #eef1f5;
  transition:background-color .15s ease;
}

.aii-opportunity-details__row:last-child{
  border-bottom:none;
}

/* Light zebra rows for scannability, government-portal style. */
.aii-opportunity-details__row--even{
  background:var(--aii-bg);
}

.aii-opportunity-details__row--odd{
  background:var(--aii-white);
}

/* Light grey hover on both zebra states. */
.aii-opportunity-details__row:hover{
  background:#f1f5f9;
}

.aii-opportunity-details__label{
  width:38%;
  text-align:left;
  vertical-align:middle;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:16px 1rem 16px 1.25rem;
  font-size:.8125rem;
  font-weight:700;
  color:#5b6b7c;
  line-height:1.4;
  border-right:1px solid #eef1f5;
}

.aii-opportunity-details__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(11,94,215,.08);
  color:var(--aii-primary);
}

.aii-opportunity-details__icon .aii-icon{
  width:15px;
  height:15px;
}

/* Values are normal weight (not bold) so the bold labels carry the
   visual hierarchy of each row. */
.aii-opportunity-details__value{
  width:62%;
  margin:0;
  padding:16px 1.25rem 16px 1rem;
  font-size:.9375rem;
  font-weight:400;
  color:var(--aii-dark);
  line-height:1.5;
  word-break:break-word;
  vertical-align:middle;
  text-align:left;
}

/* Table converts to a stacked, readable card layout on mobile instead
   of squeezing two table columns into a narrow screen. */
@media (max-width:559px){
  .aii-opportunity-details__table,
  .aii-opportunity-details__table tbody,
  .aii-opportunity-details__row{
    display:block;
    width:100%;
  }

  .aii-opportunity-details__label{
    display:flex;
    width:100%;
    padding:.85rem 1.25rem .35rem;
    border-right:none;
  }

  .aii-opportunity-details__value{
    display:block;
    width:100%;
    padding:0 1.25rem .9rem 3.15rem;
  }
}

/* Buttons live below the table, centered, equal width, 15px gap —
   using the exact sitewide .aii-btn classes so they match the rest
   of the theme's buttons pixel-for-pixel. */
.aii-opportunity-details__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:15px;
  margin-top:25px;
  padding-top:25px;
  border-top:1px solid #eef1f5;
}

.aii-opportunity-details__actions .aii-btn{
  flex:1 1 220px;
  max-width:260px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  text-align:center;
}

@media (max-width:559px){
  .aii-opportunity-details__actions .aii-btn{
    flex:1 1 100%;
    max-width:none;
  }
}

.aii-opportunity-details__actions .aii-btn .aii-icon{
  width:16px;
  height:16px;
  flex-shrink:0;
}

/* Primary CTA (Apply Now) — solid brand blue, most visual weight. */
.aii-opportunity-details__actions .aii-btn--primary{
  font-weight:700;
  box-shadow:0 4px 12px rgba(11,94,215,.25);
}

/* Secondary CTA (Official Notification) — solid dark, one step down
   from the primary action. Scoped to this card only (not a sitewide
   .aii-btn variant). */
.aii-opportunity-details__actions .aii-btn--secondary{
  background:var(--aii-dark);
  color:#fff;
  border-color:var(--aii-dark);
}

.aii-opportunity-details__actions .aii-btn--secondary:hover{
  background:#00294f;
}

/* Outline CTA (Official Website) inherits the sitewide .aii-btn--outline
   styling already defined in critical.css. */

@media (prefers-reduced-motion:reduce){
  .aii-opportunity-details__actions .aii-btn,
  .aii-opportunity-details__row{transition:none;}
}

.aii-opportunity-details__actions .aii-btn:focus-visible{
  outline:2px solid var(--aii-dark);
  outline-offset:2px;
}

/* -------------------- Responsive: tablet / mobile -------------------- */

/* Tablet: card narrows to 90% of its container instead of always
   maxing out at 900px, so it doesn't feel edge-to-edge on mid-size
   screens. */
@media (min-width:560px) and (max-width:1024px){
  .aii-opportunity-details{
    width:90%;
  }
}

/* Mobile: reduce the card's internal padding so 35px doesn't eat too
   much of a narrow screen, while the table itself still stacks via
   the rules above. */
@media (max-width:559px){
  .aii-opportunity-details{
    width:100%;
  }

  .aii-opportunity-details__inner{
    padding:20px;
  }

  .aii-opportunity-details__header{
    margin-bottom:18px;
    padding-bottom:12px;
  }

  .aii-opportunity-details__title{
    font-size:1.1rem;
  }
}

/* Related Opportunities — reuses the same reusable .aii-card /
   .aii-cards-grid markup as the archive/search/homepage listings, so
   no separate card styling is needed here. */
.aii-related-opportunities{
  margin:2.5rem 0 0;
}

.aii-related-opportunities__title{
  margin:0 0 1.25rem;
  font-size:1.15rem;
  font-weight:800;
  color:var(--aii-dark);
  display:flex;
  align-items:center;
  gap:.5rem;
}

.aii-related-opportunities__title::before{
  content:"";
  display:inline-block;
  width:6px;
  height:1.1rem;
  background:var(--aii-primary);
  border-radius:2px;
  flex-shrink:0;
}

/* Fallback in case the active parent/child theme stack doesn't
   already ship a .screen-reader-text utility (GeneratePress does,
   this simply guards against that assumption breaking silently). */
.aii-opportunity-details .screen-reader-text{
  border:0;
  clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);
  height:1px;
  width:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  word-wrap:normal !important;
}