/* =============================================
   FRONT PAGE — KATYLA
   ============================================= */
[data-aos="fade-up"] {
    transform: translate3d(0, 100px, 0) !important;
}

    [data-aos="fade-up"].aos-animate {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
    }

section {
    margin: 0 auto;
    max-width: 100%;
	 padding: 50px 13%;
}
p,h1,h2,h3,h4,h5,h6{
margin:0;
}
.section-title-sub{
letter-spacing:1px;
	font-size:12px;
	color: #b1b1b1;
	margin-bottom:5px;
}
section h2{
    font-size:3vw;
	  font-family: 'Playfair Display', serif;
    color: #8a4b2b;
	margin:0 0 15px;
}
/* ---- HERO ---- */
.section-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 50px);
     padding-bottom:0;
    overflow: hidden;
	background:url("https://katyla.art/wp-content/uploads/2026/03/bg-pattern.webp")repeat;
}

.section-hero__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 60px 60px 0;
}

.section-hero__title {
    margin-bottom: 20px;
}

.section-hero__desc {
    line-height: 1.7;
}

.section-hero__right {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.section-hero__img-main {
    width: 75%;
    height: 90%;
    object-fit: cover;
    display: block;
    margin-left: 5%;
}

.section-hero__img-child {
    position: absolute;
    width: 30%;
    top: 50%;
    left: 11%;
    transform: translateY(-50%);
    z-index: 1;
    object-fit: cover;
}

.section-hero__img-main,
.section-hero__img-child,
.section-journey__img-main {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.5s cubic-bezier(0.77, 0, 0.175, 1);
}

    .section-hero__img-main.active,
    .section-journey__img-main.active {
        clip-path: inset(0 0% 0 0);
    }

.section-hero__img-child {
    transition-delay: 0.7s;
}

    .section-hero__img-child.active {
        clip-path: inset(0 0% 0 0);
    }
/* ---- HÀNH TRÌNH ---- */
.section-journey{
padding-bottom:100px;
}
.section-journey__inner {

    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
}
.section-journey__content h2{
	margin-bottom:35px;
}
.section-journey__content h2, .section-journey__sub{
	text-align:center;
}

.section-journey__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
	max-width:600px;
	margin:0 auto;
}

.section-journey__right-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-journey__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- ARTWORK ---- */
.section-artwork {
  	background:url("https://katyla.art/wp-content/uploads/2026/03/bg-pattern.webp")repeat;
	padding-bottom:0;
}

.section-artwork__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.section-artwork__heading {
    font-family: 'Playfair Display', serif;
    color: #8a4b2b;
    margin-bottom: 60px;
}

.section-artwork__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin-bottom:0;
}
.section-artwork__img {
    width: 100%;
    height: auto;
    display: block;
}

.section-artwork__info {
    display: flex;
    flex-direction: column;
    gap: 20px;
	margin-left:50px;
	
}
.section-artwork__row--reverse {
    direction: rtl;
}
.section-artwork__row--reverse .section-artwork__info{
order:1;
	margin:0 50px 0 0; 
}
    .section-artwork__row--reverse > * {
        direction: ltr;
    }



    .section-artwork__info h3 {
        font-family: 'Playfair Display', serif;
        color: #8a4b2b;
		margin:0;
		font-size:3vw;
    }

/* ---- SỰ KIỆN ---- */


.section-events__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.section-events__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 60px;
}

.section-events__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.event-item {
    display: grid;
    grid-template-columns: 170px 100px 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid rgba(43,18,0,0.1);
}

    .event-item:last-child {
        border-bottom:none;
    }

.event-item__thumb img {
    width: 170px;
    height: 100px;
    object-fit: cover;
    display: block;
}

.event-item__date {
    display: flex;
    flex-direction: column;
  
}

.event-item__day {
    font-size: 50px;
    color: #8a4b2b;
    line-height: 1;
	font-weight:800;
}

.event-item__month {
    font-size: 13px;
    margin-top: 4px;
}

.event-item__info h4 {
    font-family: 'Playfair Display', serif;
    color: #8a4b2b;
    margin-bottom: 8px;
}

.event-item__info p {
    margin-bottom: 12px;
}

.event-item__meta {
    display: flex;
    gap: 20px;
    align-items: center;
}

.event-item__location,
.event-item__time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

    .event-item__location svg,
    .event-item__time svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

/* ---- STORY ---- */
.section-story {
   	background:url("https://katyla.art/wp-content/uploads/2026/03/bg-pattern.webp")repeat;
}

.section-story__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.section-story__header {
    margin-bottom: 48px;
	display:flex;
	justify-content:space-between;
	align-items:end;
}
 .section-story__header h2,  .section-story__header .section-title-sub {
           margin:0;
        }
       

.section-story__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.story-card__thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 4/3;
    margin-bottom: 16px;
}

    .story-card__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
    }

.story-card:hover .story-card__thumb img {
    transform: scale(1.04);
}

.story-card__cat {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 8px;
}

    .story-card__cat a {
          color: #58595b;
       
    }

.story-card__title {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 1.4;
	 color: #8a4b2b;
}

    .story-card__title a {
        text-decoration: none;
        color: inherit;
    }

.story-card__excerpt {
    font-size: 15px;
    line-height: 1.5;
}

/* ---- INSTAGRAM ---- */
.section-instagram {
    padding: 80px 0;
}

.section-instagram__header {
    padding: 0 80px;
    margin-bottom: 40px;
	text-align:center;
}

.section-instagram__header-inner p {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    margin-bottom: 8px;
}

    .section-instagram__header-inner p a {
        text-decoration: underline;
    }


    .section-instagram__header-inner h2 a {
        text-decoration: none;
        color: inherit;
    }

@media (max-width:1280px){
section {
    padding: 50px 5%;
}
	.section-hero{
	    min-height: initial;
	}
	.section-hero__img-main {
    width: 89%;
    height: 92%;
    
}
	.section-hero__img-child {
    position: absolute;
    width: 31%;
    top: 50%;
    left: -9%;
    transform: translateY(-50%);
    z-index: 1;
    object-fit: cover;
}
}
	@media (max-width: 767px) {
	section {
    padding: 50px 15px;
}
	section h2{
		    font-size: 10vw;
	}
    .section-hero {
        grid-template-columns: 1fr;
        min-height: auto;
		padding:50px;
		
    }

    .section-hero__left {
        padding: 40px 24px;
        order: 2;
    }
	.section-hero__img-main {
    width: 85%;
    height: 100%;
    margin-left: 0;
}
.section-hero__img-child {
 
    width: 34%;
    top: 72%;
    left: 0;

}
	.section-hero__title {
    margin-bottom: 15px;
}
        .section-hero__right {
        height: 44vh;
        order: 1;
			
    }
	    .section-hero__left {
        padding: 15px 0 0;
        order: 2;
    }
	.section-journey{
	padding:50px 0 0;
	}
	.section-journey__body {
		        grid-template-columns: 1fr;
    gap: 24px;
		padding:0 15px;
}
.section-journey__right-col {
    gap: 24px;
}
    .section-journey__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
	.section-artwork{
	padding-bottom:50px;
	}
        .section-artwork__row {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 50px;
    }
.section-artwork__info h3 {
    font-size: 9vw;
}
    .section-artwork__row--reverse {
        direction: ltr;
		margin:0;
    }
.section-artwork__info {
    margin: 0;
	gap:15px;
}
	.section-events h2{
		margin-bottom:0;
		
	}
    .section-events__header {
        grid-template-columns: 1fr;
		gap:15px;
		margin-bottom:15px;
    }
.event-item__info h4 {
    font-size: 16px;
}
    .event-item {
        grid-template-columns: 1fr;
        gap: 15px;
    }
.event-item__info p {
    font-size: 14px;
}
    .event-item__thumb img {
        width: 100%;
        height: 180px;
    }
    .section-story__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
.section-instagram {
    padding: 50px 0;
}

}

@media (max-width: 600px) {
    .section-story__grid {
        grid-template-columns: 1fr;
    }
}