/* Generic Bootstrap-carousel button-group mechanics — same rules
   carousel-slider.css (Phase 13) owns for itself. SDC auto-attach only
   loads a component's OWN co-located CSS, not a sibling's, and this
   component doesn't declare carousel-slider as a dependency, so these
   are copied in directly rather than adding a cross-component CSS
   dependency. Originally shipped via dist/css/carousel.css. */
.carousel .carousel-btn-group {
  position: absolute;
  height: auto;
  left: auto;
  width: auto;
}
.carousel .carousel-btn-group .btn {
  margin: 0 0.25rem;
}

/* hours-table-carousel-specific button-group placement/color, plus the
   item header and description styling. Originally shipped via
   dist/css/hours.css, now folded into css/layout/hours-shared.css — but
   that library (leh_storybook/hours-shared) is only a dependency of
   lts_hours/listing-carousel, not lts_hours/listing-table-carousel (this
   component's actual JS dependency), so it never loads on this
   component's real render path. Copied in directly for the same reason
   as above.
   NOTE: the 4 rule blocks below (.hours-table-carousel .carousel-btn-group,
   .btn-divider, .carousel-description, .carousel-item-header incl. its
   nested .heading/media queries/.date::before) are intentionally
   byte-duplicated in ../../css/layout/hours-shared.css — that stylesheet
   DOES also load on this same page today, via lts_hours' HoursListingCarousel
   block (web/modules/custom/lts_hours/src/Plugin/Block/HoursListingCarousel.php)
   attaching lts_hours/listing-carousel, which depends on
   leh_storybook/hours-shared. Both copies must be kept in sync: if you edit
   one, edit the other. */
.hours-table-carousel .carousel-btn-group {
  background-color: #fff;
  right: 0 !important;
  top: calc(4rem / 2 - 2.375rem / 2) !important;
  z-index: 50;
}
@media (min-width: 768px) {
  .hours-table-carousel .carousel-btn-group {
    top: 0 !important;
  }
}

.btn-divider {
  background-color: #a4a4a4;
  display: block;
  height: 1rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  width: 0.0625rem;
}

.carousel-description {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.carousel-item-header {
  align-items: center;
  padding-top: 0.5rem;
  display: flex;
  min-height: 4rem;
}
@media (min-width: 768px) {
  .carousel-item-header {
    min-height: unset;
  }
}
.carousel-item-header .heading {
  color: #15181b;
  font-family: "proxima-nova", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01rem;
}
@media (min-width: 768px) {
  .carousel-item-header .heading {
    font-size: calc(18px + 4 * ((100vw - 768px) / 632));
  }
}
@media (min-width: 1400px) {
  .carousel-item-header .heading {
    font-size: 22px;
    line-height: 1.2;
  }
}
.carousel-item-header .heading > :not(a, .material-symbols-outlined, pre) {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}
@media (max-width: 767.98px) {
  .carousel-item-header .heading {
    margin-bottom: 0;
  }
}
@media (min-width: 768px) {
  .carousel-item-header .heading .date::before {
    content: "-";
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Table structure/header rules, moved here from hours-listing-table-item.css
   (Phase 14 final-review Finding 2). hours-listing-table-carousel.twig always
   renders the .responsive-table wrapper and <thead> unconditionally, but the
   hours-listing-table-item SDC (and its CSS library) only renders/attaches
   inside the `{% for row in item.rows %}` loop — when rows is empty (e.g. the
   known local Google-Calendar-API-key gap), that CSS never attaches and the
   table structure/header rendered unstyled. These selectors only ever apply
   to the table's own wrapper/thead markup, which is owned by THIS component,
   so they belong here rather than in the conditionally-attached item CSS.
   Do not move the tbody-specific rules back out of hours-listing-table-item.css
   — those are genuinely row-content-specific and are fine to stay conditional. */
.responsive-table {
  padding: 0;
  overflow-x: auto;
}
.responsive-table table.hours-table tr > th:first-child,
.responsive-table table.hours-table tr > td:first-child {
  left: 0;
  min-width: 10rem;
  position: sticky;
}
.responsive-table table.hours-table thead tr td::before {
  background-color: #15181b;
  content: "";
  height: 100%;
  left: -1px;
  position: absolute;
  top: 0;
  width: 0.0625rem;
}
.responsive-table table.hours-table thead tr > th,
.responsive-table table.hours-table thead tr > td {
  border: solid 0 #e1e1e1;
}


/* Row-content rules for the hours table (tbody cell borders, background and
   typography), moved here from hours-listing-table-item.css.

   The rows this styles are NOT rendered server-side: lts_hours injects them
   over AJAX after page load, so `{% for row in item.rows %}` in this
   component's template iterates zero times and the hours-listing-table-item
   SDC never renders. Its co-located CSS therefore never auto-attaches, which
   left tbody cells transparent and grey-striped on every site instead of
   white. A previous phase moved the wrapper/thead rules here for the same
   reason; these are the rest.

   Keep hours-table rules in this file, which is attached whenever the table
   markup renders, rather than in the row component. */
.responsive-table table.hours-table tbody tr > th:first-child::before, .responsive-table table.hours-table tbody tr > th:first-child::after,
.responsive-table table.hours-table tbody tr > td:first-child::before,
.responsive-table table.hours-table tbody tr > td:first-child::after {
  background-color: #e1e1e1;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  width: 0.0625rem;
}
.responsive-table table.hours-table tbody tr > th:first-child::before,
.responsive-table table.hours-table tbody tr > td:first-child::before {
  left: -1px;
}
.responsive-table table.hours-table tbody tr > th:first-child::after,
.responsive-table table.hours-table tbody tr > td:first-child::after {
  right: 0;
}
.responsive-table table.hours-table tbody th,
.responsive-table table.hours-table tbody td {
  background-color: #fff !important;
  color: #15181b;
  font-family: "proxima-nova", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: normal;
}
@media (min-width: 768px) {
  .responsive-table table.hours-table tbody th,
.responsive-table table.hours-table tbody td {
    font-size: calc(14px + 2 * ((100vw - 768px) / 632));
  }
}
@media (min-width: 1400px) {
  .responsive-table table.hours-table tbody th,
.responsive-table table.hours-table tbody td {
    font-size: 16px;
    line-height: 1.6;
  }
}
.responsive-table table.hours-table tbody th > :not(a, .material-symbols-outlined, pre),
.responsive-table table.hours-table tbody td > :not(a, .material-symbols-outlined, pre) {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}
.responsive-table table.hours-table tbody th {
  font-weight: 700;
}