/* ==========================================================================
   INDUSTRIES PAGE PHOTOS
   --------------------------------------------------------------------------
   TO USE YOUR OWN PHOTOS: replace the ten url(...) values in the block below
   with your own files, e.g.  --photo-startups: url("../images/startups.jpg");
   Nothing else needs to change. Suggested size 1200x800px, JPEG, under 250KB.

   The current images are from Unsplash and are free for commercial use with
   no attribution required, under the Unsplash License (unsplash.com/license).
   They load from Unsplash's servers, so the page needs an internet connection
   until you swap in local files.
   ========================================================================== */

:root {
  /* --- the six cards at the top of the page --- */
  --photo-card-startups:      url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=900&q=70&auto=format&fit=crop");
  --photo-card-manufacturing: url("https://images.unsplash.com/photo-1496247749665-49cf5b1022e9?w=900&q=70&auto=format&fit=crop");
  --photo-card-realestate:    url("https://images.unsplash.com/photo-1543892607-04657ef3a279?w=900&q=70&auto=format&fit=crop");
  --photo-card-healthcare:    url("https://images.unsplash.com/photo-1516841273335-e39b37888115?w=900&q=70&auto=format&fit=crop");
  --photo-card-retail:        url("https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=900&q=70&auto=format&fit=crop");
  --photo-card-professionals: url("https://images.unsplash.com/photo-1517048676732-d65bc937f952?w=900&q=70&auto=format&fit=crop");

  /* --- the four large sector panels further down --- */
  --photo-art-startups:      url("https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1200&q=70&auto=format&fit=crop");
  --photo-art-manufacturing: url("https://images.unsplash.com/photo-1610891015188-5369212db097?w=1200&q=70&auto=format&fit=crop");
  --photo-art-realestate:    url("https://images.unsplash.com/photo-1602150137620-510810591dff?w=1200&q=70&auto=format&fit=crop");
  --photo-art-professionals: url("https://images.unsplash.com/photo-1573166364839-1bfe9196c23e?w=1200&q=70&auto=format&fit=crop");
}

/* --------------------------------------------------------------------------
   CARDS: photo band across the top, icon sits below it
   -------------------------------------------------------------------------- */
.industry-card { padding: 0; overflow: hidden; }
.industry-card-photo {
  display: block; position: relative; width: 100%; height: 168px; flex: 0 0 auto;
  /* navy shows through until the photo loads, so the card never flashes white */
  background-color: var(--navy);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: saturate(.72) contrast(1.02);
  transition: transform .45s ease, filter .45s ease;
}
.industry-card-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,29,54,.22) 0%, rgba(7,29,54,.06) 45%, rgba(7,29,54,.52) 100%);
}
.industry-card:hover .industry-card-photo { transform: scale(1.045); filter: saturate(.9) contrast(1.04); }

.industry-card .photo-startups      { background-image: var(--photo-card-startups); }
.industry-card .photo-manufacturing { background-image: var(--photo-card-manufacturing); }
.industry-card .photo-realestate    { background-image: var(--photo-card-realestate); }
.industry-card .photo-healthcare    { background-image: var(--photo-card-healthcare); }
.industry-card .photo-retail        { background-image: var(--photo-card-retail); }
.industry-card .photo-professionals { background-image: var(--photo-card-professionals); }

/* the icon now overlaps the bottom edge of the photo as a gold tile */
.industry-card > svg {
  position: relative; z-index: 1;
  width: 44px; height: 44px; margin: -22px 0 0 26px; padding: 11px;
  color: var(--navy); background: var(--gold); border-radius: 3px;
  box-shadow: 0 6px 16px rgba(8,28,52,.18);
}
.industry-card h2 { margin: 20px 26px 10px; }
.industry-card p  { margin: 0 26px 28px; }

/* --------------------------------------------------------------------------
   PANELS: photo fills the panel, tint keeps the overlaid text readable
   -------------------------------------------------------------------------- */
.industry-detail-art.has-photo .art-photo {
  position: absolute; inset: 0; z-index: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.industry-detail-art.art-startups      .art-photo { background-image: var(--photo-art-startups); }
.industry-detail-art.art-manufacturing .art-photo { background-image: var(--photo-art-manufacturing); }
.industry-detail-art.art-realestate    .art-photo { background-image: var(--photo-art-realestate); }
.industry-detail-art.art-professionals .art-photo { background-image: var(--photo-art-professionals); }
/* healthcare and retail panels: a separate photo, with the card photo underneath as a fallback if it fails to load */
.industry-detail-art.art-healthcare    .art-photo { background-image: url("https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?w=1200&q=70&auto=format&fit=crop"), var(--photo-card-healthcare); }
.industry-detail-art.art-retail        .art-photo { background-image: url("https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?w=1200&q=70&auto=format&fit=crop"), var(--photo-card-retail); }

/* dark panels: navy wash, light text. light panels: ivory wash, navy text.
   Tuned so the photograph stays clearly visible while the caption keeps
   comfortable contrast against it. */
.industry-detail-art.has-photo::after { z-index: 1; opacity: .25; }
.industry-detail-art.has-photo .art-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(7,29,54,.42) 0%, rgba(7,29,54,.62) 55%, rgba(7,29,54,.8) 100%);
}
.industry-detail-art.has-photo:not(.dark) .art-photo::after {
  background: linear-gradient(160deg, rgba(250,249,246,.62) 0%, rgba(243,242,238,.78) 55%, rgba(232,232,228,.9) 100%);
}
/* the corner tag (now removed) and the copy both sit above the photo.
   NOTE: strong keeps the absolute positioning it has in services.css,
   so only its stacking order is changed here. */
.industry-detail-art.has-photo::before { z-index: 2; opacity: .72; }
.industry-detail-art.has-photo.dark::before { background: rgba(7,29,54,.3); }
.industry-detail-art.has-photo:not(.dark)::before { background: rgba(255,255,255,.28); }
.industry-detail-art.has-photo > span { position: relative; z-index: 2; }
.industry-detail-art.has-photo > strong { z-index: 2; }
/* a touch of shadow so the caption never fights a busy photo */
.industry-detail-art.has-photo.dark > strong,
.industry-detail-art.has-photo.dark > span { text-shadow: 0 1px 12px rgba(4,16,30,.55); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) { .industry-card-photo { height: 152px; } }
@media (max-width: 760px)  {
  .industry-card-photo { height: 190px; }
  .industry-card > svg { margin-left: 24px; }
  .industry-card h2 { margin: 18px 24px 9px; }
  .industry-card p  { margin: 0 24px 26px; }
}
@media (max-width: 400px)  { .industry-card-photo { height: 165px; } }