/* Styles for the Fiber Optics Services component (c8006). */
/* Card look (background/border) matches the shared card_outlined.css tokens
   (grey.background #f8f8f8 / grey.border #cecece), but card_outlined.css itself
   isn't reused here: its hover state inverts the whole card to a solid blue
   background, which is meant for single-link quick-action tiles, not a card
   that carries its own separate CTA link. */

.c8006-eyebrow {
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #707070;
  margin: 0 0 0.5rem;
}

.c8006-featured-card {
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  border: 1px solid #cecece;
  border-radius: 1rem;
  overflow: hidden;
}

.c8006-featured-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}

.c8006-featured-image {
  width: 100%;
}

.c8006-featured-image picture,
.c8006-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1026px) {
  .c8006-featured-card {
    flex-direction: row;
    align-items: stretch;
  }

  .c8006-featured-content {
    width: 50%;
    justify-content: center;
    padding: 3rem;
  }

  .c8006-featured-image {
    width: 50%;
  }
}

.c8006-small-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: #f8f8f8;
  border: 1px solid #cecece;
  border-radius: 1rem;
  padding: 1.5rem;
}

.c8006-small-card-image {
  border-radius: 0.5rem;
  overflow: hidden;
}

.c8006-small-card-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.c8006-small-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* The VD shows both CTAs (featured and small-card) hugging their own text at
   desktop widths, with visible card background beside them - not stretched
   to fill the column. .btn-cta's own width:auto at 1026px+ only takes effect
   if the flex item isn't stretched; .c8006-featured-content/.c8006-small-card-
   content don't set align-items, so the flex default (stretch) was forcing
   the anchor to 100% of the column regardless of that width:auto. Overriding
   with align-self here (not align-items on the container) so the image/text
   siblings keep filling the row as normal - only the CTA stops stretching. */
/* Sizing below is measured directly off Downloads/EPB-Homepage-sections/
   07-fiber-optics-desktop.png (pixel-scanned for exact border/text edges,
   not eyeballed): the file is a 2x export (confirmed via the eyebrow's 2px
   underline rendering at 4 raw px), and at 1026px+ both CTAs measure ~45.5px
   tall / ~19-20px horizontal text padding, at a font-size well under the
   sitewide .btn-cta default of 18px - not just "smaller container, same
   button", the button itself is a smaller variant here. */
@media (min-width: 1026px) {
  .btn-cta.c8006-cta,
  .btn-cta.c8006-small-cta {
    align-self: flex-start;
    font-size: 0.875rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}