/* ════════════════════════════════════
   Portfolio Page — layout only.
   Global components in global.css.
   ════════════════════════════════════ */

/* ── PAGE HEADER ── */
.port-page-header {
  background: var(--bg);
  color: var(--text);
  padding-top: calc(var(--paddingXL) * 2);
  border-bottom: var(--borderThickness) solid var(--divider);
}

/* ── WORK LIST ── */
.port-work-list {
  background: var(--bg);
  color: var(--text);
}

.port-work-list .container {
  padding-top: 0;
}

/* ── COMPANY GROUP (one entry per company) ── */
.port-company-group {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-areas: "photo info";
  gap: var(--paddingXL);
  align-items: start;
  padding: var(--paddingLG);
  margin: 0 calc(var(--paddingLG) * -1);
  border-bottom: calc(var(--borderThickness) / 2) solid var(--divider);
  border-radius: var(--radiusMD);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    box-shadow var(--trans),
    transform var(--trans);
}

.port-company-group:is(:hover, :focus-visible) {
  box-shadow: 0 var(--paddingSM) var(--paddingXL) rgba(0, 0, 0, 0.1);
}

.port-company-group:focus-visible {
  outline: var(--borderThickness) solid var(--brandPrimary);
  outline-offset: calc(var(--borderThickness) * -1);
}

/* ── PHOTO — left column ── */
.port-photo-grid {
  grid-area: photo;
  display: block;
  position: relative;
}

/* Show only first image in list view */
.port-photo-grid__item:not(:first-child) {
  display: none;
}

.port-photo-grid__item {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radiusMD);
  position: relative;
  background: var(--surface-subtle);
}

.port-photo-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--trans);
}

.port-photo-grid__item:hover img {
  transform: scale(1.04);
}

.port-photo-grid__category {
  position: absolute;
  left: var(--paddingSM);
  top: var(--paddingSM);
  max-width: calc(100% - var(--paddingMD));
  padding: var(--paddingXS) var(--paddingSM);
  border-radius: var(--radiusSM);
  background: var(--secondary);
  color: var(--basicText);
  font-size: var(--textCaption);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.port-photo-placeholder {
  width: 100%;
  height: 100%;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--textH3);
  font-weight: 800;
  color: var(--surface-emphasis);
  background: var(--surface-subtle);
}

/* ── COMPANY LABEL — right column ── */
.port-company-label {
  grid-area: info;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--paddingLG);
}

.port-company-label__main {
  display: flex;
  flex-direction: column;
  gap: var(--paddingSM);
  min-width: 0;
}

.port-company-label__left {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.port-company-num {
  color: var(--ink, #0e0e10);
  font-family: Inter;
  font-size: var(--textHeadline);
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  padding: 0;
  margin: 0;
  transition: color var(--trans);
}

.port-company-name {
  color: var(--Ink, #0e0e10);
  font-family: Oxygen;
  font-size: var(--textH2);
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.05rem;
  padding: 0;
  margin: 0;
  transition: color var(--trans);
}

.port-company-group:is(:hover, :focus-visible) .port-company-num {
  color: var(--brandPrimaryDark);
}

.port-company-group:is(:hover, :focus-visible) .port-company-name {
  color: var(--brandPrimary);
}

.port-company-cta {
  display: inline-flex;
  position: absolute;
  top: var(--paddingLG);
  right: var(--paddingLG);
  align-items: center;
  gap: var(--paddingXS);
  flex-shrink: 0;
  font-size: var(--textBody);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: var(--ls-link);
  transition: color var(--trans);
}

.port-company-group:is(:hover, :focus-visible) .port-company-cta {
  color: var(--secondary);
}

.port-company-cta [data-type-text] {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width var(--trans),
    opacity var(--trans);
}

.port-company-group:is(:hover, :focus-visible)
  .port-company-cta
  [data-type-text] {
  max-width: 12rem;
  opacity: 1;
}

.port-company-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brandPrimary);
}

.port-company-cta__icon svg {
  width: var(--iconMED);
  height: var(--iconMED);
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tags / category text on light bg */
.port-work-list .card__subtitle {
  color: var(--text-muted);
}

/* Achievement arrow text — keep orange */
.port-work-list .port-company-achievement {
  color: var(--secondary);
  font-size: var(--textBody);
  font-weight: 500;
}

/* Company type label */
.port-company-type {
  font-size: var(--textCaption);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Two-bullet highlights row */
.port-company-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--paddingSM);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--paddingXS) var(--paddingLG);
}

.port-company-highlights__item {
  font-size: var(--textBody);
  color: var(--text-muted);
  line-height: 1.5;
  display: flex;
  padding: 0;
}

.port-company-highlights__arrow {
  color: var(--secondary);
  font-weight: 700;
  flex-shrink: 0;
}
.home-footer__tab {
  visibility: hidden;
}

/* ── RESPONSIVE ── */
@media (max-width: 1199px) {
  .port-company-group {
    grid-template-columns: var(--min-photo-h) 1fr;
    gap: var(--paddingLG);
  }
}

@media (max-width: 767px) {
  .port-company-group {
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "info";
    gap: var(--paddingMD);
  }

  .port-company-label {
    flex-direction: column;
    align-items: flex-start;
  }

  .port-company-highlights {
    grid-template-columns: 1fr;
    gap: var(--paddingXS);
  }

  .port-photo-grid__item {
    aspect-ratio: 16/9;
  }
}