/* portfolio-fixes.css — two fixes for the cloned Odoo portfolio detail pages
   (portfolio/<slug>/). Loaded on every portfolio case-study page.
   Reversible: remove the <link> to this file.

   1) "Sample Interview Questions" accordion → restyled to match the homepage
      FAQ (dark gradient-bordered cards, white 600 questions, rotating chevron,
      light expandable answers, 16px gaps). Keeps the existing Bootstrap toggle.
   2) "Technology Stack" logo cards → fix the col-6 + mr20 overflow on mobile
      (they render badly / overlap because each 50% column also carries a 20px
      right margin). Forces a clean 2-up grid with correctly-sized icons.
*/

/* shared chevron (white) */
:root{ --pf-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ================= 1. Interview Questions → homepage FAQ look ================= */
html body .s_accordion_image .s_accordion .accordion,
html body .s_accordion_image .s_accordion .accordion-flush{
  display:flex!important; flex-direction:column!important; gap:16px!important;
  max-width:900px!important; margin:0 auto!important; width:100%!important;
  background:transparent!important; border:0!important;
}
html body .s_accordion_image .s_accordion .accordion-item{
  border:1px solid transparent!important; border-radius:12px!important;
  margin:0!important; overflow:hidden!important; box-shadow:none!important;
  background:
    linear-gradient(0deg, rgba(176,176,176,.10), rgba(176,176,176,.10)) padding-box,
    linear-gradient(0deg, #05052B, #05052B) padding-box,
    linear-gradient(90deg, #192A42 0%, #1F73FF 50%, #192A42 100%) border-box!important;
}
html body .s_accordion_image .s_accordion .accordion-header,
html body .s_accordion_image .s_accordion .accordion-button{
  background:transparent!important; box-shadow:none!important; border:0!important;
  padding:20px 24px!important; margin:0!important;
  display:flex!important; align-items:center!important;
  justify-content:space-between!important; gap:24px!important; color:#fff!important;
}
/* the question text (nested in <span class="base-fs"><h3><span>…</span></h3>) */
html body .s_accordion_image .s_accordion .accordion-button,
html body .s_accordion_image .s_accordion .accordion-button *{
  color:#fff!important; -webkit-text-fill-color:#fff!important;
}
html body .s_accordion_image .s_accordion .accordion-button h3,
html body .s_accordion_image .s_accordion .accordion-button h3 span,
html body .s_accordion_image .s_accordion .accordion-button .base-fs{
  font-weight:600!important; font-size:1rem!important; line-height:1.5!important;
  margin:0!important; text-align:left!important;
}
/* hide the Odoo "Read More" + circle indicator, and use a homepage-style chevron */
html body .s_accordion_image .s_accordion .accordion-button .btn-ui-1{ display:none!important; }
html body .s_accordion_image .s_accordion .accordion-button::after{
  content:""!important; flex:none!important; width:14px!important; height:14px!important;
  background:var(--pf-chev) no-repeat center/contain!important;
  border:0!important; margin:0!important; transform:none!important;
  transition:transform .3s ease!important; filter:none!important; opacity:1!important;
}
html body .s_accordion_image .s_accordion .accordion-button:not(.collapsed)::after{ transform:rotate(180deg)!important; }
/* the expandable answer */
html body .s_accordion_image .s_accordion .accordion-collapse,
html body .s_accordion_image .s_accordion .accordion-body{ background:transparent!important; }
html body .s_accordion_image .s_accordion .accordion-body{ padding:0 24px 22px!important; }
html body .s_accordion_image .s_accordion .accordion-body,
html body .s_accordion_image .s_accordion .accordion-body p,
html body .s_accordion_image .s_accordion .accordion-body li,
html body .s_accordion_image .s_accordion .accordion-body span,
html body .s_accordion_image .s_accordion .accordion-body strong{
  color:#e6ecf5!important; -webkit-text-fill-color:#e6ecf5!important;
  font-size:.95rem!important; line-height:1.6!important;
}

/* ================= 2. Technology Stack — badge-style logo cards =================
   Restyled to match the homepage "Recognition and Achievements" (.nh-mqcard) grid:
   dark rounded bordered cards, each holding a LARGE, clearly-visible logo + label.
   One row on desktop; wraps to 2–3 per row on tablet/mobile so the logos stay big. */
html body .row:has(> .mr20.bg-white.border.rounded){
  display:flex!important; flex-wrap:wrap!important;
  justify-content:center!important; align-items:stretch!important;
  gap:20px!important;
  margin:0 auto!important; padding:0!important; max-width:1180px!important;
}
/* the "Technology Stack" heading gets its own full-width line ABOVE the strip */
html body .row:has(> .mr20.bg-white.border.rounded) > :not(.mr20){
  flex:0 0 100%!important; width:100%!important; max-width:none!important;
  order:-1!important; margin:0 0 10px!important;
}
/* each tech = dark bordered card (like .nh-mqcard) with a big centered logo + label */
html body .mr20.bg-white.border.rounded{
  flex:1 1 170px!important; min-width:150px!important; max-width:220px!important;
  width:auto!important; margin:0!important;
  background:transparent!important; box-shadow:none!important;
  border:1px solid #192a42!important; border-radius:14px!important;
  padding:18px 14px!important; min-height:178px!important;
  display:flex!important; flex-direction:column!important;
  align-items:center!important; justify-content:center!important; gap:12px!important;
  transition:border-color .2s, transform .2s!important;
}
html body .mr20.bg-white.border.rounded:hover{
  border-color:#2b456b!important; transform:translateY(-3px)!important;
}
/* fallback for browsers without :has() — at least kill the overflowing margin */
html body .s_references .mr20{ margin-right:0!important; margin-left:0!important; }
/* strip the wrappers Odoo put around the logo/label so they stack cleanly */
html body .mr20.bg-white.border.rounded h5,
html body .mr20.bg-white.border.rounded h6,
html body .mr20.bg-white.border.rounded p{
  margin:0!important; padding:0!important; width:100%!important;
}
/* logos: BIG + on a uniform WHITE rounded tile so every logo — including the dark
   transparent ones (AWS, Node.js, React wordmark) — is clearly visible on the dark card.
   The tech logos are all colored artwork, so a white tile never hides them, and it makes
   the previously-white-background ones (Ethereum, Web3.js, Truffle, Ganache) match. */
html body .mr20.bg-white.border.rounded img{
  height:clamp(84px,9vw,98px)!important; width:auto!important; aspect-ratio:1/1!important;
  max-width:100%!important; object-fit:contain!important;
  background:#fff!important; border-radius:12px!important; padding:12px!important;
  box-sizing:border-box!important;
  margin:0 auto!important; display:block!important; opacity:1!important;
  transition:transform .2s!important;
}
html body .mr20.bg-white.border.rounded:hover img{ transform:scale(1.04)!important; }
html body .mr20.bg-white.border.rounded:hover img{ opacity:1!important; }
/* labels: readable, centered under the logo */
html body .mr20.bg-white.border.rounded span,
html body .mr20.bg-white.border.rounded strong{
  font-size:15px!important; line-height:1.3!important; font-weight:600!important;
  color:#dbe5ff!important; -webkit-text-fill-color:#dbe5ff!important;
  white-space:normal!important; text-align:center!important; overflow-wrap:break-word!important;
}
@media (max-width:575.98px){
  html body .row:has(> .mr20.bg-white.border.rounded){ gap:14px!important; }
  html body .mr20.bg-white.border.rounded{
    flex:1 1 42%!important; min-width:42%!important; max-width:none!important;
    min-height:158px!important; padding:16px 12px!important;
  }
  html body .mr20.bg-white.border.rounded img{ height:clamp(72px,20vw,92px)!important; }
}