/* Tridevom Portfolio Responsive – Oct 2026.
   Non-destructive overrides. All original services/forms/portfolio data retained. */
:root { --portfolio-ink: #10264b; --portfolio-blue: #0c58c2; }
#client-portfolio { scroll-margin-top: 98px; }
.portfolio-preview-section .container, .portfolio-page-section .container { min-width: 0; }
.portfolio-page-section .portfolio-brand-count { font-size: 13px; letter-spacing: .015em; text-align: center; margin: -7px 0 24px; }
/* Exactly four columns for desktop and two for phones on BOTH pages. */
.brand-work-grid, .client-portfolio-grid {
 display: grid !important;
 grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
 gap: 17px !important;
 align-items: stretch;
}
.brand-work-card, .client-portfolio-card {
 box-sizing: border-box;
 min-width: 0;
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 overflow: hidden;
 border-radius: 18px;
 padding: 0 0 17px;
 border: 1px solid #dfe8f2;
 background: #fff;
 box-shadow: 0 9px 28px rgba(4,35,80,.065);
 isolation: isolate;
 transform: none;
}
.brand-work-card:hover, .client-portfolio-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 14px 34px rgba(4,35,80,.11);
 border-color: #c9d9ec;
}
.client-portfolio-card::before, .client-portfolio-card::after { display:none; }
/* Logo panels: all same height and sizing, no big banners. */
.brand-work-card .brand-home-logo,
.client-portfolio-card .client-logo-panel {
 display:flex;
 flex: 0 0 auto;
 justify-content:center;
 align-items:center;
 position:relative;
 width:100%;
 height:128px;
 margin:0 0 12px;
 padding:17px;
 box-sizing:border-box;
 overflow:hidden;
 border:0;
 border-bottom:1px solid rgba(14,47,88,.06);
 border-radius:0;
 background:var(--brand-panel,#f0f5fc);
 box-shadow:none;
}
.brand-work-card .brand-home-logo img,
.client-portfolio-card .client-logo-panel img {
 display:block;
 width:auto;
 height:auto;
 max-width:100%;
 max-height:100%;
 object-fit:contain;
 filter:none;
}
/* Some uploaded logos are transparent and need a white/light canvas. */
.brand-work-card .brand-home-logo[style*="#0b1718"],
.client-portfolio-card .client-logo-panel[style*="#0b1718"] {background:#f8fafc;}
.brand-work-card .brand-home-logo[style*="#150c0a"],
.client-portfolio-card .client-logo-panel[style*="#150c0a"] {background:#f8f5f1;}
.brand-home-placeholder, .client-logo-placeholder {
 background:linear-gradient(135deg,#edf4ff,#f8fafd) !important;
}
.brand-home-placeholder span, .client-logo-initials {
 display:flex;align-items:center;justify-content:center;
 width:65px;height:65px;border-radius:17px;
 background:linear-gradient(135deg,#071d45,#1d65c0);color:white;
 font-size:23px;font-weight:800;letter-spacing:1px;
}
.brand-work-copy {
 min-width:0; width:100%; padding: 0 17px;
 display:flex;flex-direction:column;align-items:flex-start;flex:1;
 box-sizing:border-box;
}
.brand-work-copy>span,.client-portfolio-card .client-industry {
 display:block;
 font-size:10px;
 line-height:1.5;
 letter-spacing:.055em;
 color:#3462a0;
 font-weight:800;
 text-align:left;
 max-width:none;
 overflow-wrap:anywhere;
 margin:0 0 8px;
}
.brand-work-copy h3,.client-portfolio-card h3 {
 color:var(--portfolio-ink);
 font-size:17px;
 font-weight:800;
 line-height:1.35;
 letter-spacing:-.02em;
 margin:0 0 9px;
 overflow-wrap:anywhere;
}
.brand-work-copy p,.client-portfolio-card>p {
 color:#5b6e85;
 line-height:1.55;
 font-size:12px;
 margin:0 0 13px;
 min-height:0;
 overflow-wrap:anywhere;
}
.brand-work-copy a,.client-portfolio-card>a {
 color:var(--portfolio-blue);
 font-weight:800;
 font-size:12px;
 line-height:1.35;
 min-height:34px;
 display:inline-flex;
 align-items:center;
 align-self:flex-start;
 padding:5px 0;
 margin:auto 0 0;
 text-decoration:none;
 gap:0;
}
.brand-work-copy a:hover,.client-portfolio-card>a:hover {text-decoration:underline;gap:0;}
.client-portfolio-card .client-card-top {
 display:flex;
 flex-direction:column;
 min-height:0;
 margin:0 17px 5px;
 padding:0;
 align-items:flex-start;
 justify-content:flex-start;
}
.client-portfolio-card .client-card-top .client-logo-mark { display:none; }
.client-portfolio-card h3,.client-portfolio-card>p,
.client-portfolio-card .client-scope,.client-portfolio-card>a {
 margin-left:17px; margin-right:17px;
}
.client-portfolio-card .client-scope {margin-top:0;margin-bottom:12px;gap:5px;align-items:flex-start;}
.client-portfolio-card .client-scope b{font-size:9px;letter-spacing:.06em;line-height:1.4;margin:0 0 2px;width:100%;}
.client-portfolio-card .client-scope span{font-size:10px;line-height:1.35;padding:5px 7px;border-radius:8px;}
.client-portfolio-card>a {margin-top:auto;}
.portfolio-home-cta {margin-top:22px;}
@media (min-width: 768px) and (max-width: 979px) {
 .brand-work-grid,.client-portfolio-grid {grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media(max-width: 767px) {
 .brand-work-grid,.client-portfolio-grid {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:11px !important;
 }
 .portfolio-preview-section,.portfolio-page-section {overflow-x:clip;}
 .brand-work-card,.client-portfolio-card {border-radius:14px;padding-bottom:10px;}
 .brand-work-card .brand-home-logo,.client-portfolio-card .client-logo-panel {
  height:101px;margin-bottom:11px;padding:10px;
 }
 .brand-home-placeholder span,.client-logo-initials {width:50px;height:50px;border-radius:12px;font-size:18px;}
 .brand-work-copy {padding:0 10px;}
 .client-portfolio-card .client-card-top {margin:0 10px 4px;}
 .brand-work-copy>span,.client-portfolio-card .client-industry {
  font-size:8px;line-height:1.4;letter-spacing:.015em;margin-bottom:5px;
 }
 .brand-work-copy h3,.client-portfolio-card h3 {
  font-size:13.5px;line-height:1.3;margin-bottom:7px;letter-spacing:-.01em;
 }
 .brand-work-copy p,.client-portfolio-card>p {
  font-size:10.5px;line-height:1.42;margin-bottom:9px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
 }
 .client-portfolio-card h3,.client-portfolio-card>p,
 .client-portfolio-card .client-scope,.client-portfolio-card>a {margin-left:10px;margin-right:10px;}
 .client-portfolio-card .client-scope {display:none;}
 .brand-work-copy a,.client-portfolio-card>a {font-size:10.5px;min-height:36px;padding:7px 0;}
 .portfolio-page-section .portfolio-brand-count {font-size:11px;margin:0 0 15px;}
 .portfolio-filter {max-width:100%;}
 .portfolio-filter-btn {font-size:11px;min-height:36px;}
 .portfolio-heading-row .text-link {font-size:12px;}
 .portfolio-home-cta {gap:14px;}
}
@media (max-width:360px) {
 .brand-work-grid,.client-portfolio-grid{gap:9px !important;}
 .brand-work-card .brand-home-logo,.client-portfolio-card .client-logo-panel{height:88px;}
 .brand-work-copy h3,.client-portfolio-card h3{font-size:12px;}
 .brand-work-copy p,.client-portfolio-card>p{font-size:10px;}
}
@media(prefers-reduced-motion:reduce) {
 .brand-work-card,.client-portfolio-card{transition:none;}
 .brand-work-card:hover,.client-portfolio-card:hover{transform:none;}
}