/* ==========================================================================
   SmartEdge — Industries page
   Layout from packagedesign/04_INDUSTRIES/01_MOCKUP/Industries_Page_Desktop_Approved.png
   Depends on main.css, components.css and pages.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Vertical selector

   04_INDUSTRIES/01_MOCKUP: a narrow left rail of equal-height industry rows,
   a chevron on each row, and a filled navy pill for the active one. The rail is
   a fixed 232px so the panel beside it starts on the same grid line as the rest
   of the page, and every row is the same height so the labels line up.
   -------------------------------------------------------------------------- */
.se-intabs{background:var(--se-white);padding-block:var(--se-section-y)}
.se-tabs--industries .se-tabs__inner{display:grid;grid-template-columns:232px minmax(0,1fr);gap:clamp(20px,2.4vw,36px);align-items:start}
.se-tabs--industries .se-tabs__tabbar{display:flex;flex-direction:column;gap:6px;position:sticky;top:calc(var(--se-header-h) + 20px)}
.se-tabs--industries .se-tabs__tab{
  display:flex;align-items:center;gap:11px;width:100%;min-height:56px;text-align:left;
  padding:10px 14px;border-radius:var(--se-radius-sm);border:1px solid var(--se-line);background:var(--se-white);
  font-family:var(--se-font-head);font-size:.875rem;font-weight:700;color:var(--se-ink);line-height:1.35;
  cursor:pointer;transition:background-color .16s var(--se-ease),color .16s var(--se-ease),border-color .16s var(--se-ease);
}
.se-tabs--industries .se-tabs__tab:hover{background:var(--se-mist);color:var(--se-navy);border-color:var(--se-line)}
.se-tabs--industries .se-tabs__tab:focus-visible{outline:2px solid var(--se-orange);outline-offset:2px}
.se-tabs--industries .se-tabs__tab[aria-selected=true]{background:var(--se-navy);color:#fff;border-color:var(--se-navy)}
.se-tabs--industries .se-tabs__icon{
  width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--se-blue-soft);color:var(--se-navy);flex:none;
}
.se-tabs--industries .se-tabs__tab[aria-selected=true] .se-tabs__icon{background:rgba(255,255,255,.16);color:#fff}
.se-tabs--industries .se-tabs__label{flex:1 1 auto;min-width:0}
/* The chevron in the approved mockup. It also reserves the right-hand space the
   longest label needs, so "Logistics & Transportation" no longer touches the
   edge of the rail. */
.se-tabs--industries .se-tabs__chev{flex:none;display:inline-flex;color:var(--se-ink-faint);transition:transform .16s var(--se-ease),color .16s var(--se-ease)}
.se-tabs--industries .se-tabs__tab[aria-selected=true] .se-tabs__chev{color:rgba(255,255,255,.7)}
.se-tabs--industries .se-tabs__tab[aria-selected=true] .se-tabs__chev .se-icon{transform:rotate(90deg)}
.se-tabs--industries .se-tabs__panel[hidden]{display:none}
.se-tabs--industries .se-tabs__panel{animation:se-fade .22s var(--se-ease)}

/* --------------------------------------------------------------------------
   2. Active panel

   The panel is two balanced two-column rows plus full-width blocks. The earlier
   three-column grid left the image column stranded beside a very tall text
   column, which is what made the section read as misaligned. Every block now
   starts on the same left edge and the rows share one gap, so the panel lines
   up with the rest of the page grid.
   -------------------------------------------------------------------------- */
.se-inpanel{min-width:0}
.se-inpanel__head{margin-bottom:clamp(18px,2vw,26px);max-width:74ch}
.se-inpanel__title{font-family:var(--se-font-head);font-size:var(--se-h2-size);font-weight:800;color:var(--se-navy);line-height:1.2;margin:0 0 .5rem}
.se-inpanel__intro{font-size:1.0625rem;line-height:1.7;color:var(--se-ink)}
.se-inpanel__intro p{margin:0 0 .6rem}
.se-inpanel__intro p:last-child{margin-bottom:0}

.se-inpanel__top{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(20px,2.4vw,32px);align-items:start}
.se-inpanel__media{margin:0;border-radius:var(--se-radius);overflow:hidden;background:var(--se-blue-soft);box-shadow:var(--se-shadow-sm)}
.se-inpanel__img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.se-inpanel__caption{
  padding:12px 16px;font-size:.8125rem;line-height:1.5;color:var(--se-ink-soft);
  background:var(--se-mist);border-top:1px solid var(--se-line-soft);
}
/* Capability cards, the composition the approved mockup uses for solutions. */
.se-inpanel__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start}
.se-incard{
  background:var(--se-mist);border:1px solid var(--se-line-soft);border-radius:var(--se-radius-sm);
  padding:16px 18px;min-width:0;
}
.se-incard__title{
  margin:0 0 .35rem;font-family:var(--se-font-head);font-size:.9375rem;font-weight:800;
  color:var(--se-navy);line-height:1.35;
}
.se-incard__text{margin:0;font-size:.8125rem;line-height:1.6;color:var(--se-ink-soft)}
.se-inpanel__block--challenges{margin-top:clamp(20px,2.4vw,30px)}

/*
   Correction pass: three blocks on this page were wide and short, so they
   read as a half-empty row. Each now splits into a text column and a
   supporting column. The text keeps the measure it already had — the split
   only gives the free half to something useful — so no line of copy gets
   longer and nothing has to be cut to fit.
*/
.se-inpanel__split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(20px,2.4vw,32px);align-items:start}
.se-inpanel__splitmain{min-width:0}
.se-inpanel__splitmain .se-checks--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* The FAQ column is narrower, so its split is closer to even. */
.se-inpanel__split--faq{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(22px,2.6vw,38px)}
.se-inpanel__promo{position:relative;align-self:start}
.se-inpanel__promo--tight{padding:14px 16px}
.se-inpanel__faqmedia{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--se-radius);box-shadow:var(--se-shadow-sm);margin-bottom:14px}

.se-inpanel__bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.4vw,32px);align-items:start;margin-top:clamp(20px,2.4vw,30px)}
.se-inpanel__block{min-width:0}
.se-inpanel__side{display:grid;gap:22px;align-content:start;min-width:0}
.se-inpanel__block--ai{display:grid;gap:14px;align-content:start}
.se-inpanel__block--full{margin-top:clamp(20px,2.4vw,30px)}
.se-inpanel__aimedia{border-radius:var(--se-radius-sm);overflow:hidden;background:var(--se-blue-soft)}
.se-inpanel__aiimg{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.se-inpanel__subtitle{
  font-family:var(--se-font-head);font-size:1.0625rem;font-weight:800;color:var(--se-navy);
  margin:0 0 12px;line-height:1.3;
  padding-bottom:7px;border-bottom:1px solid var(--se-line-soft);
}
.se-inpanel__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,30px)}

/*
   Correction pass: five short capability points in the hero. Two columns and
   a tight leading so they read as a compact band under the lead paragraph
   rather than as a second paragraph pushing the hero taller.
*/
.se-inhero__points{
  list-style:none;margin:18px 0 22px;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;max-width:56ch;
}
.se-inhero__points li{
  position:relative;padding-left:24px;
  font-size:.875rem;line-height:1.5;color:var(--se-ink-soft);
}
.se-inhero__points li::before{
  content:'';position:absolute;left:0;top:.32em;
  width:14px;height:14px;border-radius:50%;
  background:var(--se-blue-soft);box-shadow:inset 0 0 0 1px var(--se-blue);
}

/*
 * The owner's long-form industry copy. Bounded measure and a heading rhythm
 * that matches the rest of the site, so a long article never turns the panel
 * into a wall of text or breaks out of the container.
 */
.se-inpanel__block--rich{margin-top:clamp(20px,2.4vw,30px);max-width:78ch}
.se-inpanel__block--rich h3{font-family:var(--se-font-head);font-size:1.25rem;font-weight:800;color:var(--se-navy);line-height:1.3;margin:1.9rem 0 .6rem}
.se-inpanel__block--rich h3:first-child{margin-top:0}
.se-inpanel__block--rich h4{font-family:var(--se-font-head);font-size:1.0625rem;font-weight:800;color:var(--se-navy);line-height:1.35;margin:1.4rem 0 .5rem}
.se-inpanel__block--rich p{margin:0 0 1rem;font-size:1rem;line-height:1.75;color:var(--se-ink)}
.se-inpanel__block--rich ul,.se-inpanel__block--rich ol{margin:0 0 1.1rem;padding-left:1.25rem;display:grid;gap:.5rem}
.se-inpanel__block--rich li{font-size:.9375rem;line-height:1.7;color:var(--se-ink)}
.se-inpanel__block--rich li::marker{color:var(--se-orange)}
.se-inpanel__block--rich a{color:var(--se-orange-ink);font-weight:600}
.se-inpanel__block--rich a:hover{color:var(--se-orange)}
.se-inpanel__block--rich strong{color:var(--se-navy)}

/* --------------------------------------------------------------------------
   3. Responsive
   The vertical rail becomes a horizontal scroller rather than wrapping into
   an unreadable multi-line wall of tabs, as the responsive QA requires.
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .se-inpanel__top,.se-inpanel__bottom{grid-template-columns:minmax(0,1fr)}
  .se-inpanel__block--rich{max-width:none}
  .se-inpanel__cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:1023px){
  .se-tabs--industries .se-tabs__inner{grid-template-columns:1fr}
  .se-tabs--industries .se-tabs__tabbar{
    position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  }
  .se-tabs--industries .se-tabs__tab{flex:0 0 auto;width:auto;min-height:48px;white-space:nowrap;scroll-snap-align:start}
  .se-tabs--industries .se-tabs__label{flex:0 0 auto}
}

@media (max-width:820px){
  .se-inpanel__img{aspect-ratio:16/9}
  .se-inpanel__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:560px){
  .se-inpanel__cards{grid-template-columns:1fr}
}

@media (max-width:640px){
  .se-inpanel__actions .se-btn{width:100%}
  .se-inpanel__caption{font-size:.8125rem}
}

@media print{
  /* Every vertical is printed so no approved content is lost on paper. */
  .se-tabs--industries .se-tabs__tabbar{display:none}
  .se-tabs--industries .se-tabs__panel[hidden]{display:block !important}
  .se-inpanel{page-break-inside:avoid;margin-bottom:24px}
}

/* Correction pass: the split blocks above stack once there is no room for a
   supporting column beside them. */
@media (max-width:900px){
  .se-inpanel__split,
  .se-inpanel__split--faq{grid-template-columns:1fr}
  .se-inpanel__faqmedia{max-width:520px}
}
@media (max-width:560px){
  .se-inhero__points{grid-template-columns:1fr;gap:6px;margin:16px 0 20px}
  .se-inpanel__splitmain .se-checks--grid{grid-template-columns:1fr}
}