/* ==========================================================================
   SmartEdge — Portfolio
   Layout from packagedesign/05_PORTFOLIO/01_MOCKUP/Portfolio_Page_Desktop_Approved.png
   Depends on main.css, components.css and pages.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Archive body
   -------------------------------------------------------------------------- */
.se-pfbody{padding-block:var(--se-flow-y)}
.se-filterresults__intro{margin-bottom:20px;max-width:70ch}
.se-filterresults__intro .se-sh__title{margin:0 0 .4rem}
.se-filterresults__lede{margin:0;font-size:1rem;line-height:1.68;color:var(--se-ink)}
.se-filterresults__head{margin-top:20px}
.se-filterresults__count{margin:0;font-size:.9375rem;font-weight:600;color:var(--se-ink-soft)}
.se-filterresults__count strong{color:var(--se-navy);font-weight:800}

.se-filtergroup--tree{padding-top:2px}
.se-tree__spacer{width:22px;height:22px;flex:none}
.se-filteropt__count{margin-left:auto;font-size:.75rem;color:var(--se-ink-faint);font-variant-numeric:tabular-nums}
.se-filtergroup [data-se-filter-clear-group]{font-size:.6875rem}
.se-tree .se-filteropt{gap:8px;padding:4px 6px;font-size:.8125rem}

/* --------------------------------------------------------------------------
   2. Cards
   -------------------------------------------------------------------------- */
.se-portcard article{height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);overflow:hidden;box-shadow:var(--se-shadow-sm);transition:transform .2s var(--se-ease),box-shadow .2s var(--se-ease)}
.se-portcard article:hover{transform:translateY(-3px);box-shadow:var(--se-shadow)}
.se-portcard__body{display:flex;flex-direction:column;gap:9px;padding:16px 17px 18px;flex:1 1 auto}
.se-portcard__title{font-size:1.0625rem}
.se-portcard__foot{margin-top:auto;padding-top:6px}

/* --------------------------------------------------------------------------
   3. Why band
   -------------------------------------------------------------------------- */
/*
   Bug fixes #6 and #8.

   #6 Balance. The text column ran 488px while the photograph was 334px, so
   154px of the row was empty and the two halves did not read as a pair. The
   image column is now the wider of the two and the crop is 4:3, which the
   1600x900 source supports without upscaling. The picture now sits at about
   the height of the copy and the row is balanced without growing the section.

   #8 Collision. The four blocks in the text column were spaced by paragraph
   margins only. Vertical margin is the one thing in this section that can
   collapse or be overridden from elsewhere in the cascade, so it was the only
   remaining way for the heading and the paragraphs to run into each other.
   The column is now a grid with an explicit gap and every child margin is
   zeroed, so the spacing between blocks is a fixed 16px that no later rule can
   take away. Nothing is hidden, clipped or truncated, and no font size or
   measure is reduced: the full text still renders at the same size.
*/
/* Equal columns. The copy measure is capped at 66ch (594px), so a column at
   least that wide lets the text run at its intended measure; anything narrower
   and the same words wrap onto extra lines. An equal split keeps the text
   column above that cap at 1440px and gives the picture enough width for a
   4:3 crop, which is what brings the two halves to the same height. */
.se-pfwhy__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:center}
.se-pfwhy__img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 50%;border-radius:var(--se-radius);box-shadow:var(--se-shadow)}

/* --------------------------------------------------------------------------
   4. Detail modal
   -------------------------------------------------------------------------- */
.se-pfmodal{max-width:860px}
.se-pdetail__img{width:100%;aspect-ratio:16/9;object-fit:cover}
.se-pdetail__subtitle{font-family:var(--se-font-head);font-size:1.0625rem;font-weight:800;color:var(--se-navy);margin:26px 0 12px}
.se-pdetail__text{font-size:1rem;line-height:1.75}
.se-psingle .se-pdetail{max-width:70ch;margin-top:40px}

/* --------------------------------------------------------------------------
   5. Single project page hero
   -------------------------------------------------------------------------- */
.se-phero--single{background:linear-gradient(165deg,var(--se-blue-soft) 0%,#fff 62%)}
.se-phero--single .se-phero__title{margin-top:.2rem}
.se-psingle{padding-block:var(--se-flow-y)}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  .se-pfwhy__grid{grid-template-columns:1fr}
}

@media (max-width:1023px){
  /* The filter panel becomes a collapsible block above the results. */
  .se-filterpanel{position:static;max-height:none}
}

@media print{
  .se-filterpanel,.se-pfbody .se-pagination{display:none}
}

/* Bug fix #8: deterministic vertical rhythm inside the text column. The gap
   is the spacing; the child margins are all zero so nothing can collapse and
   nothing can pull two blocks together. */
.se-pfwhy__text{display:grid;align-content:start;gap:16px;min-width:0}
.se-pfwhy__text>.se-sh__title{margin:0}
.se-pfwhy__para{margin:0;max-width:66ch;font-size:.9375rem;line-height:1.65;color:var(--se-ink-soft)}
@media (max-width:1023px){
  .se-pfwhy__para{max-width:none}
}