/*
 * Batch 4 layout styles: cards_layout, branchs_layout, downloads_layout,
 * testimonial, testimonial_grid, meet_the_team, featured_pages, child_pages,
 * sibling_pages.
 *
 * Structural grid/tabs/accordion/carousel primitives live in
 * template-parts/flexible/flexible-base.css - this file only adds the
 * visual styling specific to each layout, scoped under its own
 * .flex-{name} root class.
 */

/* ==========================================================================
   cards_layout - "Cards"
   ========================================================================== */
.flex-cards_layout .cards-intro {
  max-width: 720px;
  margin: 0 0 32px;
}

.flex-cards_layout.is-centered .flex-grid,
.flex-cards_layout.is-centered .carousel-track {
  justify-content: center;
}

.flex-cards_layout .card-item {
  display: flex;
  flex-direction: column;
}

.flex-cards_layout .carousel-track .card-item {
  width: 280px;
}

.flex-cards_layout .card-item__media {
  margin: -32px -32px 20px;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.flex-cards_layout .card-item__media img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.flex-cards_layout .card-item__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 10px;
}

.flex-cards_layout .card-item__desc {
  color: var(--color-muted);
  font-size: 0.95rem;
  margin: 0 0 16px;
}

.flex-cards_layout .card-item__desc p:last-child {
  margin-bottom: 0;
}

.flex-cards_layout .card-item__link {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   branchs_layout - "Branches"
   ========================================================================== */
.flex-branchs_layout .branchs-content {
  max-width: 860px;
}

.flex-branchs_layout .branchs-content > *:last-child {
  margin-bottom: 0;
}

.flex-branchs_layout .branchs-content a {
  color: var(--color-primary);
  font-weight: 600;
}

/* ==========================================================================
   downloads_layout - "Downloads"
   ========================================================================== */
.flex-downloads_layout .download-item {
  display: flex;
  align-items: center;
  gap: 16px;
  color: inherit;
  text-decoration: none;
}

.flex-downloads_layout .download-item:hover .download-item__title {
  color: var(--color-primary);
}

.flex-downloads_layout .download-item__media {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
}

.flex-downloads_layout .download-item__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flex-downloads_layout .download-item__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: rgba(46, 98, 245, 0.1);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.flex-downloads_layout .download-item__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.flex-downloads_layout .download-item__title {
  font-weight: 600;
  font-size: 0.98rem;
  transition: color 0.15s ease;
  overflow-wrap: anywhere;
}

.flex-downloads_layout .download-item__meta {
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* ==========================================================================
   testimonial - "Testimonial" (single quote)
   ========================================================================== */
.flex-testimonial {
  display: flex;
  justify-content: center;
}

.flex-testimonial__card {
  max-width: 720px;
  text-align: center;
}

.flex-testimonial__card blockquote {
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: 500;
}

.flex-testimonial__card figcaption {
  justify-content: center;
}

/* ==========================================================================
   testimonial_grid - "Testimonial Grid"
   ========================================================================== */
.flex-testimonial_grid .testimonial-avatar--photo {
  object-fit: cover;
}

/* ==========================================================================
   meet_the_team - "Meet The Team"
   ========================================================================== */
.flex-meet_the_team .team-member {
  text-align: center;
}

.flex-meet_the_team .team-member__photo {
  margin: -32px -32px 20px;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.flex-meet_the_team .team-member__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.flex-meet_the_team .team-member__name {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}

.flex-meet_the_team .team-member__name a {
  color: inherit;
}

.flex-meet_the_team .team-member__name a:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   featured_pages / child_pages / sibling_pages
   These three layouts share the same "linked page card" visual pattern.
   ========================================================================== */
.flex-featured_pages .featured-page-item,
.flex-child_pages .child-page-item,
.flex-sibling_pages .sibling-page-item {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.flex-featured_pages .featured-page-item__media,
.flex-child_pages .child-page-item__media,
.flex-sibling_pages .sibling-page-item__media {
  margin: -32px -32px 20px;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.flex-featured_pages .featured-page-item__media img,
.flex-child_pages .child-page-item__media img,
.flex-sibling_pages .sibling-page-item__media img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.flex-featured_pages .featured-page-item__title,
.flex-child_pages .child-page-item__title,
.flex-sibling_pages .sibling-page-item__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 8px;
}

.flex-featured_pages .featured-page-item:hover .featured-page-item__title,
.flex-child_pages .child-page-item:hover .child-page-item__title,
.flex-sibling_pages .sibling-page-item:hover .sibling-page-item__title {
  color: var(--color-primary);
}

.flex-featured_pages .featured-page-item__desc,
.flex-child_pages .child-page-item__desc,
.flex-sibling_pages .sibling-page-item__desc {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 0;
}