/* 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 cards — TWO-COLUMN layout (all viewports) =================
   Originally a 5-across row that also overflowed on mobile (each col-6 carried a 20px
   right margin). Now a clean, centered 2-column grid everywhere. */
html body .row:has(> .mr20.bg-white.border.rounded){
  display:grid!important; grid-template-columns:repeat(2,1fr)!important;
  gap:16px!important; margin:0 auto!important; padding:0!important; max-width:820px!important;
}
html body .mr20.bg-white.border.rounded{
  width:auto!important; max-width:none!important; margin:0!important; flex:none!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; }
/* any non-card child in that row (e.g. the "Technology Stack" heading) spans both columns */
html body .row:has(> .mr20.bg-white.border.rounded) > :not(.mr20){
  grid-column:1 / -1!important; width:auto!important; max-width:none!important; margin:0!important;
}
/* size the logo icons sensibly */
html body .mr20.bg-white.border.rounded img{
  max-width:64px!important; height:auto!important;
  margin-left:auto!important; margin-right:auto!important; display:block!important;
}
@media (max-width:767.98px){
  html body .row:has(> .mr20.bg-white.border.rounded){ gap:12px!important; padding:0 4px!important; }
  html body .mr20.bg-white.border.rounded img{ max-width:56px!important; }
}