/* =============================================================
   RYA SAILING CENTRE — TEMPLATE STYLES
   Colours:
     Dark blue  : #162e50
     Aqua blue  : #009dd0
     Light grey : #f4f4f4
     White      : #ffffff
   Breakpoints:
     768px  (tablet)
     992px  (landscape tablet / small desktop)
     1200px (desktop)
   No CSS grid — flexbox only.
   Only elements inside .pageContent are targeted here.
============================================================= */


/* ============================================================
   SHARED UTILITIES
============================================================= */

.ryaBtn,
.ryaBtnWhite {
	display: inline-block;
	padding: 12px 28px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ryaBtn {
	background-color: #009dd0;
	color: #ffffff;
	border-color: #009dd0;
}

.ryaBtn:hover {
	background-color: #162e50;
	border-color: #162e50;
	color: #ffffff;
}

.ryaBtnWhite {
	background-color: #ffffff;
	color: #162e50;
	border-color: #ffffff;
}

.ryaBtnWhite:hover {
	background-color: transparent;
	color: #ffffff;
}


/* ============================================================
   LANDING PAGE
============================================================= */

/* --- Intro --- */
.ryaLandingIntro {
	padding: 40px 0 20px;
}
.ryaLandingIntro h2
{
	color: #162e50;
    font-size: 30px;
    font-weight: 400;
    padding: 0 0 12px 0;
    margin: 0;
}
.ryaLandingIntro p {
	margin-bottom: 16px;
}


/* --- Training Combines --- */
.ryaTrainingCombo {
	background-color: #f4f4f4;
	padding: 32px;
	margin: 24px 0;
	text-align:Center;
}

.ryaTrainingCombo h2 {
color: #162e50;
    font-size: 30px;
    font-weight: 400;
    padding: 0 0 22px 0;
    margin: 0;
}

.ryaTrainingCombo ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ryaTrainingCombo ul li {
	padding: 55px 0 6px 0;
	margin-bottom:20px;
	position: relative;
background:url(../img/RYA-big-tick.png) center top no-repeat;
}

.ryaSeeFlx 
{
	display:flex;
	flex-wrap:wrap;
	
}
.ryaSeeLeft
{
	flex:1 0 100%;
	position:relative;
	min-height:400px;
}
.ryaSeeLeft img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ryaSeeRight
{
	flex:1 0 100%;
	background-color:#f4f4f4;
}
.ryaSeeRight h2
{
font-size: 30px !important;
    font-weight: 300 !important;
	margin:0;
	padding:0 0 20px 0;
}
.ryaSeeRight .ryaSeeIn
{
	padding:30px;
}
.ryaSeeCourses .coursesLink
{
	padding-top:20px;
}
.ryaSeeCourses .coursesLink a{
	display: inline-block;
    padding: 12px 17px;
    color: #fff;
    background-color: #162e50;
    text-decoration: none;
    font-size: 16px;
}
.inclusionRya
{
	background-color:#162e50;
margin:20px 0;
}
.inclusionRya .flx
{
	display:flex;
	flex-wrap:wrap;
		padding:30px;
}
.inclusionRya .flx .inc
{
	flex:1 0 100%;

}
.inclusionRya .incIn
{
	text-align:center;
	color:#fff;
}
.inclusionRya .incIn .inlusionHead h2
{
	color: #ffffff;
    font-size: 30px;
    font-weight: 400;
    padding: 0 0 12px 0;
    margin: 0;
}
.inclusionRya .incIn ul
{
	list-style-type:none;
	list-style-position:inside;
	text-indent:0;
	margin:0;
	padding:0;
}
@media (min-width: 768px) {
	.inclusionRya .flx .inc
	{
		flex:1 0 50%;
	}
	    .logoIonion.rya img {
        max-width: 360px;
    }
	
	.ryaSeeLeft

	{
		flex:1 0 40%;
	}
	.ryaSeeRight
	{flex: 1 0 60%}
	
	.ryaSeeRight 
	{
		display:flex;
		align-items:center;
		padding:30px;
	}
	.ryaTrainingCombo {
		padding: 40px 48px;
	}
	.ryaTrainingCombo ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 40px;
		justify-content:center;
	}
	.ryaTrainingCombo ul li
	{
		flex:1;
		font-size:22px;
		padding:55px 10px 0 10px;
	}
}


/* --- Goal Statement --- */
.ryaGoal {
	background-color: #162e50!important;
	padding: 32px!important;
	margin: 24px 0!important;
	text-align: center!important;
}

.ryaGoal p {
	color: #ffffff!important;
	font-size: 30px!important;
	
	font-weight: 300!important;
	margin: 0!important;
	line-height: 1.5!important;
}

@media (min-width: 992px) {
	.ryaGoal p {
		font-size: 1.2rem;
	}
}


/* --- How Training Works --- */
.ryaHowItWorks {
	margin: 32px 0;
}

.ryaHowInner {
	background-color: #162e50;
}

.ryaHowTop {
	display: flex;
	flex-direction: column;
}

.ryaHowLabel {
	background-color: #162e50;
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 28px 28px 16px;
}

.ryaHowCol {
	color: #ffffff;
	padding: 12px 28px 28px;
	font-size: 0.95rem;
	line-height: 1.6;
}

.ryaHowCol p { margin: 0; }

@media (min-width: 768px) {
	.ryaHowTop {
		flex-direction: row;
	}
	.ryaHowLabel {
		flex: 0 0 220px;
		padding: 32px 24px;
		display: flex;
		align-items: center;
	}
	.ryaHowCol {
		flex: 1;
		padding: 32px 24px;
		border-left: 1px solid rgba(255,255,255,0.12);
	}
}

@media (min-width: 992px) {
	.ryaHowLabel {
		flex: 0 0 260px;
		font-size: 1rem;
	}
}

/* Ticks row — three equal columns */
.ryaHowTicks {
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(255,255,255,0.12);
}

.ryaHowTick {
	color: #ffffff;
	padding: 20px 28px;
	font-size: 0.9rem;
	position: relative;
	padding-left: 48px;
}

.ryaHowTick::before {
	content: "";
	position: absolute;
	left: 24px;
	top: 24px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #009dd0;
}

@media (min-width: 768px) {
	.ryaHowTicks {
		flex-direction: row;
	}
	.ryaHowTick {
		flex: 1;
		border-left: 1px solid rgba(255,255,255,0.12);
	}
	.ryaHowTick:first-child {
		border-left: none;
	}
}


/* --- Weekly Data --- */
.ryaWeekly {
	margin: 32px 0;
}

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

.ryaWeeklyLeft,
.ryaWeeklyRight {
	padding: 32px;
	font-size: 0.95rem;
	line-height: 1.7;
}

.ryaWeeklyLeft {
	background-color: #f4f4f4;
	color: #162e50;
}
.ryaWeeklyLeft p
{
	font-size:30px!important;
	font-weight:300!important;
}
.ryaWeeklyRight {
	background-color: #162e50;
	color: #ffffff;
}

.ryaWeeklyRight ul,
.ryaWeeklyLeft ul {
	padding-left: 20px;
	margin: 12px 0 0;
}

.ryaWeeklyRight ul li {
	margin-bottom: 6px;
}

@media (min-width: 768px) {
	.ryaWeeklyInner {
		flex-direction: row;
	}
	.ryaWeeklyLeft,
	.ryaWeeklyRight {
		flex: 1;
	}
}


/* ============================================================
   COURSES LISTING PAGE
============================================================= */

/* --- Courses Intro --- */
.ryaCoursesIntro {
	padding: 32px 0 16px;
}
.ryaCoursesIntro h2
{
	color: #162e50;
    font-size: 30px;
    font-weight: 400;
    padding: 0 0 12px 0;
    margin: 0;
}
.ryaCoursesIntro p {
	margin-bottom: 14px;
}


/* --- Course Groups --- */
.ryaCourseGroups {
	margin: 24px 0;
}

.ryaCourseGroup {
	margin-bottom: 0;
	border-top: 3px solid #009dd0;
}


/* Group inner: left heading + right cards */
.ryaCourseGroupInner {
	display: flex;
	flex-direction: column;
}

.ryaCourseGroupLeft {
	background-color: #162e50;
	padding: 32px;
	flex-shrink: 0;
}

.ryaCourseGroupLeft h2 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ryaCourseGroupSubtitle {
	color: #009dd0;
	font-size: 0.9rem;
	margin: 0;
}

.ryaCourseGroupRight {
	display: flex;
	flex-direction: column;
	background-color: #f1f1f1;
}

@media (min-width: 768px) {
	.ryaCourseGroupInner {
		flex-direction: row;
	}
	.ryaCourseGroupLeft {
		flex: 0 0 40%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.ryaCourseGroupRight {
		flex: 1 0 60%;
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media (min-width: 992px) {
	.ryaCourseGroupLeft {
		flex: 1 0 45%;
	}
		.ryaCourseGroupRight {
		flex: 1 0 55%;
	}
}


/* Individual course cards */
.ryaCourseCard {
	border-bottom: 1px solid #cccccc;
}

.ryaCourseCardInner {
	padding: 28px 32px;
}

.ryaCourseCard h3 {
color: #162e50;
    font-size: 30px;
    font-weight: 400;
    padding: 0 0 12px 0;
    margin: 0;
}

.ryaCourseCardSubtitle {
padding: 0 0 15px 0 !important;
    margin: 0 !important;
	font-weight:500;
}
.ryaCourseGroupRight .ryaCourseCardDesc p
{
font-size:15px!important;	
}
.ryaCourseCardDesc {
	font-size: 0.9rem;
	line-height: 1.6;
	color: #444;
	margin-bottom: 16px;
}
.ryaCourseCardDesc ul {
    margin: 0;
    padding: 0 0 15px 0;
    list-style-position: inside;
}
.ryaCourseCardLink a {
	display: inline-block;
	font-size: 20;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #009dd0;
	text-decoration: none;
	border-bottom: 2px solid #009dd0;
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.ryaCourseCardLink a:hover {
	color: #162e50;
	border-color: #162e50;
}

@media (min-width: 768px) {
	.ryaCourseCard {
		flex: 0 0 100%;
		border-bottom: 1px solid #cccccc;
		box-sizing: border-box;
	}
}


/* Group footer — full width */
.ryaCourseGroupFooter {

}

.ryaCourseGroupFooterInner {
	padding: 24px 32px;

	color: #444;
}

.pageWrap.rya .pageContent .ryaCourseGroupFooterInner p {
    font-size: 20px;
    text-align: center;
}
/* --- Ways to Participate --- */
.ryaWaysToParticipate {
	margin: 48px 0 60px;
}

.ryaWaysToParticipate > h2 {
	color: #162e50;
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 24px;
}

.ryaParticipateEntries {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ryaParticipateEntry {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	background-color: #f4f4f4;
}

.ryaParticipateNumber {
	background-color: #162e50;
	color: #ffffff;
	font-size: 1.4rem;
	font-weight: 700;
	min-width: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 20px 0;
}

.ryaParticipateContent {
	padding: 20px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ryaParticipateContent h3 {
	color: #162e50;
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 6px;
}

.ryaParticipateDesc {
	font-size: 0.9rem;
	line-height: 1.6;
	color: #555;
	margin-bottom: 10px;
}

.ryaParticipateLink a {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #009dd0;
	text-decoration: none;
	border-bottom: 2px solid #009dd0;
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.ryaParticipateLink a:hover {
	color: #162e50;
	border-color: #162e50;
}

@media (min-width: 768px) {
	
	.pageWrap.rya .pageContent .ryaCourseGroupFooterInner p {
    font-size: 30px;
		
	}
	.ryaParticipateEntries {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px;
	}
	.ryaParticipateEntry {
		flex: 0 0 calc(50% - 2px);
	}
}

@media (min-width: 992px) {
	.ryaParticipateEntry {
		flex: 1;
	}
}


/* ============================================================
   COURSE SINGLE PAGE (child — e.g. Beginner to Yachtmaster)
============================================================= */

/* --- Intro --- */
.ryaSingleIntro {
	padding: 36px 0 20px;
}

.ryaSingleIntro p { margin-bottom: 14px; }


/* --- Alternating image / content blocks --- */
.ryaSubCourses {
	margin: 16px 0;
}

.ryaSubCourseEntry {
	margin-bottom: 4px;
}

.ryaSubCourseEntryInner {
	display: flex;
	flex-direction: column;
}

/* Image */
.ryaSubCourseImg {
	flex-shrink: 0;
	overflow: hidden;
}

.ryaSubCourseImg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Content */
.ryaSubCourseContent {
	padding: 32px;
	background-color: #f4f4f4;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ryaSubCourseContent h2 {
	color: #162e50;
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 8px;
}

.ryaSubCourseSubtitle {
	color: #009dd0;
	font-size: 0.9rem;
	margin: 0 0 14px;
	font-weight: 600;
}

.ryaSubCourseText {
	font-size: 0.95rem;
	line-height: 1.7;
	color: #444;
	margin-bottom: 20px;
}

.ryaSubCourseLink { margin-top: auto; }

@media (min-width: 768px) {
	.ryaSubCourseEntryInner {
		flex-direction: row;
		min-height: 320px;
	}

	.ryaSubCourseImg {
		flex: 0 0 40%;
	}

	.ryaSubCourseContent {
		flex: 1;
	}

	/* Image right variant */
	.ryaSubCourseEntry.rya-img-right .ryaSubCourseEntryInner {
		flex-direction: row-reverse;
	}
}

@media (min-width: 992px) {
	.ryaSubCourseImg {
		flex: 0 0 45%;
	}

	.ryaSubCourseContent {
		padding: 48px;
	}
}

@media (min-width: 1200px) {
	.ryaSubCourseEntryInner {
		min-height: 380px;
	}
}


/* ============================================================
   COURSE SINGLE SUB PAGE (grandchild — e.g. RYA Competent Crew)
============================================================= */

/* --- Intro --- */
.ryaSubIntro {
color: #162e50;
    font-size: 30px;
    font-weight: 400;
    padding: 0 0 12px 0;
    margin: 0;
}
.ryaSubIntro h2
{
	color: #162e50;
    font-size: 30px;
    font-weight: 400;
    padding: 0 0 12px 0;
    margin: 0;
}
.ryaSubIntro p { margin-bottom: 14px; }


/* --- At a Glance --- */
.ryaAtAGlance {
	background-color: #162e50;
	padding: 32px;
	margin: 24px 0;
}

.ryaAtAGlance h3 {
	color: #ffffff;
	font-size: 30;
	font-weight: 400;
	
	text-transform: uppercase;
	margin: 0 0 24px;
}

.ryaGlanceGrid {
	display: flex;
	flex-direction: column;
}

.ryaGlanceItem {
	display: flex;
	flex-direction: column;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ryaGlanceItem:last-child {
	border-bottom: none;
}

.ryaGlanceLabel {
	color: #009dd0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 3px;
}

.ryaGlanceValue {
	color: #ffffff;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.4;
}
.pageWrap.rya .pageContent p
{
	padding:0 0 15px 0!important;
	margin:0!important;
}

@media (min-width: 768px) {
	.ryaAtAGlance {
		padding: 40px 48px;
	}
	.ryaGlanceItem {
		flex-direction: row;
		align-items: baseline;
		gap: 20px;
	}
	.ryaGlanceLabel {
		flex: 0 0 180px;
		margin-bottom: 0;
	}
	.ryaGlanceValue {
		font-size: 1.1rem;
	}
}

@media (min-width: 992px) {
	.ryaGlanceGrid {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.ryaGlanceItem {
		flex: 0 0 50%;
		box-sizing: border-box;
		padding-right: 40px;
	}
	/* Remove border from last two items */
	.ryaGlanceItem:nth-last-child(-n+2) {
		border-bottom: none;
	}
}


/* --- Content Sections (repeater, alternating image/content) --- */
.ryaSubSection {
	
}

.ryaSubSectionInner {
	display: flex;
	flex-direction: column;
}

.ryaSubSectionImg {
	flex-shrink: 0;
	overflow: hidden;
}

.ryaSubSectionImg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ryaSubSectionContent {
	background-color: #f4f4f4;
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ryaSubSectionContent h3 {
    color: #162e50;
    font-size: 30px;
    font-weight: 400;
    padding: 0 0 12px 0;
    margin: 0;
}
.ryaSubSectionContent h4 {
    color: #162e50;
    font-size: 22px;
    font-weight: 400;
    padding: 0 0 12px 0;
    margin: 0;
}
.ryaSubSectionText {
	font-size: 0.95rem;
	line-height: 1.75;
	color: #444;
}
.ryaGetInContact
{
	padding-top:15px;
	text-align:Center;
}
.ryaSubSectionContent .ryaGetInContact,
.ryaGetInContact.left
{
	text-align:left;
}
.ryaGetInContact a
{
	display:inline-block;
	padding:12px 17px;
	color:#fff;
	background-color:#162e50;
	text-decoration:none;
	font-size:16px;
}
.ryaSubSectionText ul {
	list-style: none;
	margin: 8px 0;
	padding: 0;
}

.ryaSubSectionText ul li {
	padding: 0 0 0 22px;
	position: relative;
}

.ryaSubSectionText ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background-color: #009dd0;
	border-radius: 50%;
}

.ryaSubSectionText p {
	margin-bottom: 12px;
}

.ryaSubSectionText p:last-child {
	margin-bottom: 0;
}

/* Full width when no image */
.ryaSubSectionNoImg .ryaSubSectionContent {
	background-color: #ffffff;
	padding: 28px 0;
}

.ryaSubSectionNoImg .ryaSubSectionContent h3 {
	color: #162e50;
}

@media (min-width: 768px) {
	.ryaSubSectionInner {
		flex-direction: row;
		min-height: 300px;
	}
	.ryaSubSectionImg {
		flex: 0 0 50%;
	}
	.ryaSubSectionContent {
		flex: 1;
		padding: 36px 40px;
	}
	/* Image right on odd rows */
	.ryaSubSection.rya-img-right .ryaSubSectionInner {
		flex-direction: row-reverse;
	}
	.ryaSubSectionNoImg .ryaSubSectionInner {
		min-height: 0;
	}
}

@media (min-width: 992px) {
	.ryaSubSectionInner {
		min-height: 340px;
	}
	.ryaSubSectionImg {
		flex: 0 0 50%;
	}
	.ryaSubSectionContent {
		padding: 44px 48px;
	}
}

@media (min-width: 1200px) {
	.ryaSubSectionInner {
		min-height: 380px;
	}
}


/* --- CTA Banner --- */
.ryaCta {
text-align:Center;
	margin: 32px 0;
	padding:20px;
}

.ryaCtaInner {
	padding: 40px 32px;
}
.ctaHeader
{
	padding-bottom:30px;
}
.ryaCta h2 {
	color: #162e50;
	font-size: 30px;
	font-weight: 400;
	margin: 0 0 14px;
}
.ryaTrainingForm
{
	text-align:left;
	max-width:900px;
	padding:15px;
	margin:0 auto;
	border:1px solid #cccccc;
	box-shadow: 0px 1px 25px 0px rgba(0,0,0,0.23);
-webkit-box-shadow: 0px 1px 25px 0px rgba(0,0,0,0.23);
-moz-box-shadow: 0px 1px 25px 0px rgba(0,0,0,0.23);
}
.ryaTrainingForm textarea
{
	max-height:250px!important;
	height:250px!important;
}
.ryaTrainingForm input[type=submit] {
    display: block!important;
    padding: 10px 15px!important;
    color: #fff!important;
    font-weight: 300!important;
    font-size: 18px!important;
    text-align: Center!important;
    background-color: #162e50!important;
    border: none!important;
    width: 100%!important;
}
.ryaCtaContent {
	color: rgba(255,255,255,0.8);
	font-size: 0.95rem;
	line-height: 1.7;
	margin-bottom: 24px;
}

.ryaCtaActions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.ryaNextStep {
	color: rgba(255,255,255,0.65);
	font-size: 0.875rem;
}

.ryaNextStep a {
	color: #009dd0;
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid #009dd0;
}

.ryaNextStep a:hover {
	color: #ffffff;
	border-color: #ffffff;
}

@media (min-width: 768px) {
	.ryaCtaInner {
		padding: 48px 48px;
	}
	.ryaCtaActions {
		flex-direction: row;
		align-items: center;
	}
}