/*
Theme Name: Delia Arts Foundation
Theme URI: https://wordpress.org/themes/deliaweb/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: deliaweb
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

.our-story-description .story-line .content:nth-child(5) {
	height:320rem !important;
}

/* ==========================================================================
   Our Team (.da- prefix)
   Sized using the theme's rem-as-px fluid system.
   1rem = 1px at a 1920px design width (see html font-size in main style.css).
   Values below are estimates based on the screenshot — replace with exact
   Figma pixel values if you have the design file.
   ========================================================================== */

.da-team {
  padding: 160rem 32rem;
	width:100%;
	max-width:1280rem;
	  margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 768px) {
  .da-team {
    padding: 160rem 24rem;
  }
}
@media screen and (max-width: 375px) {
  .da-team {
    padding: 160rem 16rem;
  }
}

.da-team__title {
  font-size: 132rem;
  line-height: 132rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 40rem;
  color: #222222;
}
@media screen and (max-width: 768px) {
  .da-team__title {
    font-size: 48rem;
    line-height: 48rem;
    margin-bottom: 30rem;
  }
}
@media screen and (max-width: 375px) {
  .da-team__title {
    font-size: 32rem;
    line-height: 32rem;
    margin-bottom: 20rem;
  }
}

.da-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rem;
}
@media screen and (max-width: 768px) {
  .da-team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20rem;
  }
}
@media screen and (max-width: 375px) {
  .da-team__grid {
    grid-template-columns: 1fr;
    gap: 16rem;
  }
}

.da-team__card {
  width: 100%;
}

.da-team__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: #e9e4e1;
}

.da-team__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.da-team__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 70%,
    rgba(0, 0, 0, 0.85) 100%
  );
  pointer-events: none;
}

.da-team__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rem;
}
@media screen and (max-width: 375px) {
  .da-team__info {
    padding: 14rem;
  }
}

.da-team__name {
  color: #ffffff;
  font-size: 24rem;
  line-height: 24rem;
  font-weight: 400;
  margin: 0 0 4rem;
  font-family: "glacial-indifference", "sans-serif";
}
@media screen and (max-width: 375px) {
  .da-team__name {
    font-size: 16rem;
    line-height: 18rem;
  }
}

.da-team__role {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14rem;
  line-height: 16rem;
  font-weight: 400;
  margin: 0;
  font-family: "glacial-indifference-regular", "sans-serif";
}
@media screen and (max-width: 375px) {
  .da-team__role {
    font-size: 14rem;
    line-height: 15rem;
  }
}


/* ==========================================================================
   Our Story (.da-story block, BEM, rem-as-px fluid system)
   Breakpoints match the rest of the theme: 1920 / 768 / 375.
   ========================================================================== */

.da-story {
  background-color: #F8F7F0;
  padding: 60rem 0 100rem;
}
@media screen and (max-width: 375px) {
  .da-story {
    padding: 30rem 0 60rem;
  }
}

.da-story__container {
  max-width: 1600rem;
  margin: 0 auto;
  padding: 0 40rem;
}
@media screen and (max-width: 768px) {
  .da-story__container {
    padding: 0 24rem;
  }
}
@media screen and (max-width: 375px) {
  .da-story__container {
    padding: 0 20rem;
  }
}

/* Top: back link + heading
   ========================================================================== */

.da-story__top {
  margin-bottom: 60rem;
}
@media screen and (max-width: 375px) {
  .da-story__top {
    margin-bottom: 30rem;
  }
}

.da-story__back {
  display: inline-flex;
  align-items: center;
  gap: 10rem;
  margin-bottom: 24rem;
  text-decoration: none;
}

.da-story__back span {
  font-family: "glacial-indifference-regular", "sans-serif";
  font-size: 16rem;
  color: #2FA1A9;
}

.da-story__back-icon {
  width: 20rem;
  height: auto;
  display: block;
}

.da-story__title {
  font-family: "glacial-indifference", "sans-serif";
  font-weight: 800;
  color: #222222;
  margin: 0;
}

/* Mobile heading: "Our Story", stacked, large */
.da-story__title--mobile {
  display: none;
  font-size: 44rem;
  line-height: 44rem;
  text-transform: uppercase;
}

/* Desktop heading: "This Is Our Story", single line */
.da-story__title--desktop {
  display: block;
  font-size: 56rem;
  line-height: 56rem;
  text-transform: uppercase;
}

@media screen and (max-width: 768px) {
  .da-story__title--mobile {
    display: block;
  }
  .da-story__title--desktop {
    display: none;
  }
}
@media screen and (max-width: 375px) {
  .da-story__title--mobile {
    font-size: 32rem;
    line-height: 32rem;
  }
}

/* Layout: gallery column + content column
   ========================================================================== */

.da-story__layout {
  display: grid;
  grid-template-columns: var(--da-story-gallery-width, 540rem) 1fr;
  gap: 80rem;
  align-items: start;
}

@media screen and (max-width: 768px) {
  .da-story__layout {
    display: block;
  }
}

/* Desktop / tablet cascade gallery — independent of the text content
   ========================================================================== */

.da-story__gallery {
  position: relative;
  /* width and height are set inline per-instance from PHP, matching the
     exact measured container size of the design (540 x 2128) */
}

@media screen and (max-width: 768px) {
  .da-story__gallery {
    display: none;
  }
}

.da-story__gallery-item {
  position: absolute;
  /* top / left / width / height are set inline per image from PHP —
     these are exact coordinates measured from the design mockup via
     template matching against the real photos, so they reproduce the
     collage precisely rather than an approximated stagger pattern. */
}

.da-story__gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content column
   ========================================================================== */

.da-story__content {
  display: flex;
  flex-direction: column;
  gap: 60rem;
}
@media screen and (max-width: 375px) {
  .da-story__content {
    gap: 40rem;
  }
}

.da-story__section {
  display: grid;
  grid-template-columns: 240rem 1fr;
  gap: 40rem;
}
@media screen and (max-width: 1024px) {
  .da-story__section {
    grid-template-columns: 200rem 1fr;
  }
}
@media screen and (max-width: 768px) {
  .da-story__section {
    display: block;
  }
}

.da-story__section-title {
  font-family: "glacial-indifference", "sans-serif";
  font-weight: 700;
  font-size: 25rem;
  line-height: 28rem;
  color: #222222;
  margin: 0;
}
@media screen and (max-width: 375px) {
  .da-story__section-title {
    font-size: 25rem;
    line-height: 28rem;
    margin-bottom: 12rem;
  }
}

.da-story__section-text p {
  font-family: "glacial-indifference-regular", "sans-serif";
  font-size: 25rem;
  line-height: 32rem;
  color: #222222;
  margin: 0 0 16rem;
}
.da-story__section-text p:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 375px) {
  .da-story__section-text p {
    font-size: 24rem;
    line-height: 27rem;
  }
}

/* Mobile-only inline images between text sections
   ========================================================================== */

.da-story__inline-images {
  display: none;
}

@media screen and (max-width: 768px) {
  .da-story__inline-images {
    display: flex;
    gap: 16rem;
    margin-top: 24rem;
    align-items: flex-end;
  }

  .da-story__inline-image {
    flex: 1;
    overflow: hidden;
    /* aspect-ratio is set inline per image from PHP, using the real
       measured width/height of the source photo */
  }

  .da-story__inline-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media screen and (max-width: 375px) {
  .da-story__inline-images {
    gap: 10rem;
    margin-top: 16rem;
  }
}

/* Bottom CTAs — different treatment per breakpoint
   ========================================================================== */

.da-story__back--bottom {
  margin-top: 60rem;
}

.da-story__back--desktop {
  display: inline-flex;
}
@media screen and (max-width: 768px) {
  .da-story__back--desktop {
    display: none;
  }
}

.da-story__cta--mobile {
  display: none;
}
@media screen and (max-width: 768px) {
  .da-story__cta--mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40rem;
    padding: 16rem 30rem;
    background-color: #2FA1A9;
    border-radius: 26rem;
    text-decoration: none;
  }

  .da-story__cta--mobile span {
    font-family: "glacial-indifference", "sans-serif";
    font-size: 16rem;
    letter-spacing: 1rem;
    text-transform: uppercase;
    color: #F8F7F0;
  }
}