/* Brand Invest CMS — public opportunity pages (self-contained, served by the app).
   Dedicated classes so the listing/detail never inherit homepage grid positioning. */

/* ---- Listing grid (fixes the horizontal-overflow bug) -------------------- */
.opp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap:var(--gutter);
  width:100%;
}
.opp-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  width:100%;
}
.opp-card .hm-feat-media{
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
}
.opp-card .hm-feat-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .6s ease;
}
.opp-card .hm-feat-body{
  padding-block-start:18px;
  min-width:0;
}
.opp-card .hm-feat-body h3{ overflow-wrap:anywhere; }
.opp-card:hover .hm-feat-media img{ transform:scale(1.05); }

@media (max-width:640px){
  .opp-grid{ grid-template-columns:1fr; }
}

/* ---- Detail cover (fills the 16:9 container for square/portrait images) --- */
.opp-cover{
  aspect-ratio:16 / 9;
  overflow:hidden;
  margin-bottom:34px;
  background:var(--bg-soft);
}
.opp-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* ---- Detail gallery (Phase 1: consistent crop; full redesign is Phase 2) -- */
.opp-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:var(--gutter);
  margin-top:40px;
}
.opp-gallery-item{
  aspect-ratio:4 / 3;
  overflow:hidden;
}
.opp-gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* ==========================================================================
   Phase 2 — public catalogue (search / filters / sort / pagination)
   Reuses .opp-grid + .opp-card; adds an accessible filter form + pager.
   ========================================================================== */

/* Page header (language switching lives in the main site header — no in-page toggle) */
.opp-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.opp-count{ color:var(--ink-3, #6b7280); font-size:.9rem; margin:0; }

/* Exactly 3 / 2 / 1 columns; bottom-align prices so cards stay aligned. */
.opp-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.opp-card{ background:#fff; }
.opp-card .hm-feat-body{ display:flex; flex-direction:column; flex:1 1 auto; }
.opp-card .hm-feat-price{ margin-top:auto; }

/* Filter form — collapsed by default at every breakpoint; a prominent dark
   "Search & filters" button opens it. It auto-opens (details[open]) when filters
   are active. The four-column desktop grid appears once expanded. */
.opp-filterform{ margin-bottom:34px; }
.opp-filters{ border:0; background:transparent; }
.opp-filters-toggle{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none;
  background:var(--ink, #111); color:#fff; font-weight:600; font-size:.9rem;
  padding:12px 22px; border-radius:6px; list-style:none;
}
.opp-filters-toggle:hover{ background:#000; }
.opp-filters-toggle::-webkit-details-marker{ display:none; }
.opp-filters-toggle::after{ content:'▾'; transition:transform .2s ease; }
.opp-filters[open] .opp-filters-toggle::after{ transform:rotate(180deg); }
.opp-filters-toggle:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; }
.opp-filters-body{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:16px;
  padding:18px; border:1px solid var(--line, #e5e7eb); border-radius:8px; background:var(--bg-soft, #f9fafb);
}
.opp-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.opp-field--wide{ grid-column:span 2; }
.opp-field label{ font-size:.75rem; font-weight:600; color:var(--ink-3, #6b7280); }
.opp-field input,
.opp-field select{ width:100%; min-width:0; padding:9px 11px; border:1px solid var(--line, #e5e7eb); border-radius:6px; background:#fff; font:inherit; color:var(--ink, #111); }
.opp-field input:focus,
.opp-field select:focus{ outline:2px solid #2563eb; outline-offset:1px; border-color:#2563eb; }
.opp-actions{ grid-column:1 / -1; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.opp-reset{ font-size:.85rem; color:var(--ink-3, #6b7280); text-decoration:underline; }
.opp-reset:hover{ color:var(--ink, #111); }

/* ---- Controlled tag filter (v3.4) ---------------------------------------
   Nested inside the existing disclosure and collapsed by default: the catalogue never
   renders a large permanently-expanded tag list. All spacing uses logical properties so
   the layout is correct in both LTR (en) and RTL (fa). */
.opp-field--full{ grid-column:1 / -1; }
.opp-tags{ border:0; background:transparent; }

/* Disclosure summary: label + compact count badge on one baseline-aligned row. */
.opp-tags-toggle{
  display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  font-size:.8rem; font-weight:600; color:var(--ink-3, #6b7280); list-style:none;
  padding:6px 0;
}
.opp-tags-toggle::-webkit-details-marker{ display:none; }
.opp-tags-toggle::after{ content:'▾'; font-size:.8em; transition:transform .2s ease; }
.opp-tags[open] .opp-tags-toggle::after{ transform:rotate(180deg); }
.opp-tags-toggle:hover{ color:var(--ink, #111); }
.opp-tags-toggle:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; border-radius:3px; }
.opp-tags-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.25rem; padding:.1rem .35rem; border-radius:999px;
  background:var(--ink, #111); color:#fff;
  font-size:.68rem; font-weight:700; line-height:1.25; font-variant-numeric:tabular-nums;
}

/* Group grid: 1 → 2 → up to 4 columns purely from available width.
   `align-items:start` is essential — without it every card stretches to the tallest
   row, which is what made the groups look large and mostly empty. */
.opp-taggroups{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 176px), 1fr));
  align-items:start; gap:10px; margin-top:10px;
}
/* Compact card. `min-inline-size:0` defeats the UA's min-content sizing on <fieldset>,
   which would otherwise refuse to shrink and push the page into horizontal overflow. */
.opp-taggroup{
  margin:0; padding:9px 11px; min-inline-size:0; min-width:0;
  border:1px solid var(--line, #e5e7eb); border-radius:6px; background:#fff;
  text-align:start;
}
.opp-taggroup legend{
  float:none; width:auto; margin:0 0 6px; padding:0;
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3, #6b7280); line-height:1.2;
}
/* One tag per row: checkbox first, label beside it, both vertically centred.
   `align-items:flex-start` + line-height keeps a wrapped label aligned to the box. */
.opp-tagchk{
  display:flex; align-items:flex-start; gap:.5rem;
  padding:.2rem 0; min-width:0; cursor:pointer;
  font-size:.82rem; line-height:1.35; color:var(--ink, #111); text-align:start;
}
.opp-tagchk span{ min-width:0; overflow-wrap:break-word; }
.opp-tagchk:hover{ color:#000; }

/* CRITICAL (v3.4.1): `.opp-field input` above sets width:100% + padding + border for the
   text/number filter inputs, and it also matched these checkboxes — each box stretched to
   the full column, shoving the label away and inflating every group. Equal specificity, so
   the earlier rule won on the properties this block never declared. Reset them explicitly
   at higher specificity; scoped to checkboxes so real inputs are untouched. */
.opp-filters-body .opp-tagchk input[type="checkbox"],
.opp-taggroup .opp-tagchk input[type="checkbox"]{
  flex:0 0 auto;
  inline-size:auto; width:auto; min-width:0;
  block-size:auto; height:auto;
  margin:0; padding:0; border:0; border-radius:0; background:none;
  accent-color:var(--ink, #111);
  translate:0 .12em;   /* optical alignment with the first line of the label */
}
.opp-filters-body .opp-tagchk input[type="checkbox"]:focus-visible{
  outline:2px solid #2563eb; outline-offset:2px;
}

/* ---- Selected-filter chips (v3.4, restyled v3.4.1) -----------------------
   One pill per active filter; the whole pill is the "remove this filter" link.
   Every offset is logical (inline-start/end), so RTL needs no overrides. */
.opp-chips{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem;
  margin:0 0 22px; padding:0; text-align:start;
}
.opp-chip{
  display:inline-flex; align-items:center; gap:.45rem; max-width:100%;
  padding:.3rem .35rem .3rem .7rem;
  border:1px solid var(--line, #e5e7eb); border-radius:999px;
  background:var(--bg-soft, #f9fafb); color:var(--ink, #111);
  font-size:.78rem; line-height:1.45; text-decoration:none; white-space:normal;
  transition:border-color .15s ease, background-color .15s ease;
}
.opp-chip:hover{ border-color:var(--ink, #111); background:#fff; text-decoration:none; }
.opp-chip:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; }
.opp-chip-label{ min-width:0; overflow-wrap:break-word; }
/* Visible round × affordance inside the pill. */
.opp-chip-x{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  inline-size:1.05rem; block-size:1.05rem; border-radius:50%;
  background:rgba(0,0,0,.06); color:var(--ink-3, #6b7280);
  font-size:.8rem; line-height:1;
}
.opp-chip:hover .opp-chip-x{ background:var(--ink, #111); color:#fff; }
/* "Clear all" is an understated text action, deliberately not a pill. */
.opp-chip--clear{
  padding-inline:.35rem; border:0; border-radius:3px; background:transparent;
  color:var(--ink-3, #6b7280); text-decoration:underline; text-underline-offset:2px;
}
.opp-chip--clear:hover{ background:transparent; color:var(--ink, #111); }

/* ---- Detail-page layout (v3.5.0) ----------------------------------------
   The frontend's shared `.ed-grid` is a 12-column grid at every viewport width, so the
   detail page's `span 8` / `span 4` split stayed side-by-side on phones (~218px of body
   text next to a ~101px spec sidebar). Scoped to the CMS detail page only — `.ed-grid`
   itself is untouched, and opportunities.css is loaded solely by CMS public pages. */
@media (max-width:768px){
  /* display:block also neutralises the inline `grid-column:span N` on the children. */
  .opp-detail-grid{ display:block; }
  .opp-detail-grid > aside{ margin-top:26px; }
}

/* ---- Detail-page tag badges (v3.5.0) ------------------------------------
   Read-only, wrapping, logical spacing so RTL needs no override. */
.opp-tagbadges{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin:26px 0 0; text-align:start; }
.opp-tagbadge{
  display:inline-flex; align-items:center; max-width:100%;
  padding:.25rem .65rem; border:1px solid var(--line, #e5e7eb); border-radius:999px;
  background:var(--bg-soft, #f9fafb); color:var(--ink-3, #6b7280);
  font-size:.75rem; line-height:1.5; overflow-wrap:break-word;
}

/* Pagination */
.opp-pager{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:40px; }
.opp-pager-btn{ text-decoration:none; border:1px solid var(--line, #e5e7eb); border-radius:6px; padding:8px 16px; color:var(--ink, #111); }
.opp-pager-btn:hover{ background:var(--bg-soft, #f9fafb); }
.opp-pager-btn.is-disabled{ opacity:.4; pointer-events:none; }
.opp-pager-info{ font-size:.85rem; color:var(--ink-3, #6b7280); }

/* No-results state */
.opp-empty{ text-align:center; padding:70px 20px; border:1px dashed var(--line, #e5e7eb); border-radius:10px; }
.opp-empty h3{ margin:0 0 8px; }
.opp-empty p{ color:var(--ink-3, #6b7280); margin:0 0 20px; }

/* Responsive columns (must follow the base rule above) */
@media (max-width:1024px){
  .opp-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .opp-filters-body{ grid-template-columns:repeat(2, 1fr); }
  /* Tablet: exactly two tag-group columns. */
  .opp-taggroups{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .opp-grid{ grid-template-columns:1fr; }
  .opp-filters-body{ grid-template-columns:1fr; }
  .opp-field--wide{ grid-column:auto; }
  /* Keep the tag block full-width when the filter grid collapses to one column, and let the
     group cards stack so nothing forces page-level horizontal overflow at 375px. */
  .opp-field--full{ grid-column:auto; }
  .opp-taggroups{ grid-template-columns:1fr; }
  .opp-chips{ margin-bottom:18px; }
}